Стилизация форм на HTML и CSS

preview_player
Показать описание
В этом видео я расскажу Вам как стилизовать форму на сайте.
А также я расскажу Вам как стилизовать поле input когда в нем есть текст.
Мы будем использовать HTML и CSS.

#codeburger
  1. codeBurger
  2. codeBurger
  3. форма обратной связи html
  4. форма регистрации html
  5. формы html css
  6. формы css html
Рекомендации по теме
Стилизация форм на 0:12:44

Стилизация форм на HTML и CSS

HTML уроки. HTML 0:35:30

HTML уроки. HTML теги форм. HTML input. Уроки HTML CSS JS. Урок №4

CSS Only - 0:05:29

CSS Only - Input Field with Floating Text Animation | Floating label input css

Animated Input Field 0:05:10

Animated Input Field in HTML CSS | Floating Label CSS Only @codehal

Awesome Input Animation 0:04:47

Awesome Input Animation using HTML & CSS | CodingNepal

CSS Input Field 0:06:52

CSS Input Field Text Animation @OnlineTutorialsYT | CSS Only Floating Label

Урок 40 Стилизация 0:18:30

Урок 40 Стилизация HTML форм с помощью CSS

Анимированная форма входа 0:22:28

Анимированная форма входа на сайт / HTML и CSS / Стилизация input...

Boost Your Angular 0:00:55

Boost Your Angular Skills: Deep Dive into Directives - #angular18

Input Animation With 0:08:31

Input Animation With HTML & CSS | Style Google

#11 Формы: form, 0:10:19

#11 Формы: form, fieldset, legend, label, input, select, textarea [Курс по Верстке от AROKEN]...

Styling Input Type 0:07:51

Styling Input Type Color | Pure CSS Tutorial

Custom Input Date 0:05:09

Custom Input Date | Styling Input Date | Pure CSS Tutorial

Custom Input Type 0:07:42

Custom Input Type File Upload Button Using HTML & CSS | Styling with CSS

Стилизация input type 0:11:42

Стилизация input type file | css/html | instaClone #1

Как сделать кастомный 0:03:04

Как сделать кастомный поиск(input) на веб-сайте? HTML, CSS

How To Create 0:10:53

How To Create Custom Input Field Using Html & CSS | Floating Placeholder

HTML input placeholder 0:01:00

HTML input placeholder attribute, Change placeholder color with CSS, style an HTML textbox input

Slide Up Input 0:05:50

Slide Up Input Label on Focus Animation | Pure CSS Input Field Animation Effect

Group Input Form 0:07:52

Group Input Form Design - Html CSS Tutorial For Beginners - Fullscreen Search Form Design

Пример стилизации инпута 0:18:20

Пример стилизации инпута (input)

Input Label Animation 0:12:36

Input Label Animation | HTML & CSS

Настройка стилей для 0:07:04

Настройка стилей для Input 'File'. CSS + JS + HTML

Button on Input 0:03:31

Button on Input - CSS Position Tutorial

Комментарии
Автор

5:48 - не знаю почему это работает у автора, но у меня без параметра "left: 0;'" тайтлы никак не "наезжали" на инпуты.
На случай, если кто столкнулся с такой же проблемой...

carrotJam
Автор

Офигенно! Спасибо! Крутой урок! Впервые попал на Ваш канал, но сразу же лайк и подписка =)

Mykhailo_Vdovychenko
Автор

Неужели есть грамотный верстальщик, который делает по БЭМ и flexbox? Спасибо! Отличный урок!

DragonnSteve
Автор

Огромное Вам спасибо из 2022-го! Успехов!

enterkvas
Автор

Супер, спасибо огромное, форма получилась классной!)

bombilovkagd
Автор

Крутое видео, продолжай в том же духе))

ArtemiyGusev
Автор

Молодец, так держать. Единственный канал, где всё доходчиво разъ
ясняется и поясняется

nzvvolb
Автор

Спасибо из 2024, бро, просто и понятно) респект

gyigdpk
Автор

Спасибо, очень часто пользуюсь, удобно

Nikitanus
Автор

Чувак - Огромное Спасибо!!! Я столько нового узнал!!! Поставил - бы 300 лайков если б можно было! Удачи!

Antonpianomusic
Автор

Видео топ, ещё бы рефреш страницы был... Лайк

artembogachenko
Автор

это видео которое мне реально помогло спасибо!!

\

daradel
Автор

спасибо помог а то где не посмотрю везде js

avalonex
Автор

Спасибо очень интересно, но есть вопрос почему когда вы писали в .form__label,
Апсолютную позицию у меня та натпись (Пароль, емаел) осталась с боку?

kcutsjw
Автор

За что поставлю лайк. Что каждый ход объясняется зачем и как. Так в разы проще воспринимается информация.
Спасибо автор !

beda
Автор

Спасибо за туториал. Во внимание других, псевдокласс placeholder-shown не работает на IE 11

manofsteppe
Автор

Ну все же можно сделать CSSами, а то взяли моду - чуть что, сразу JS лепить... А потом удивляются - что браузеры стока ресурсов жрут!

butxoqq
Автор

Привет codeBurger. Друг подскажи пожалуйста. Я уже долго не могу решить проблему. В коде примерно всё тоже. Только у меня добавлен И когда введено например имя и фамилия без отчества. То label опускается прям на них. Грубо говоря после добавления pattern, label начал опускаться на текст. Как пофиксить данную проблему? Ни где не могу найти решение. ((

vnoxtgx
Автор

Спасибо за урок, ни разу не юзал селекторы с псевдоклассом not(). Подскажите, как с поддержкой в браузерах, стоит ли начинать применять на реальных и больших проектах?

dvedggg
Автор

Спасибо за урок, а куда дальше эти данные поступают? Вдруг логин неправильный

janedow