Формы в HTML. Атрибуты required, disabled, readonly, placeholder, inputmode, type и autocomplete.
Вставка
- Опубліковано 2 лип 2024
- ✏️ В этом видео мы рассмотрим дополнительные атрибуты для всех рассмотренных ранее полей форм, которые могут пригодиться в работе: required, disabled, readonly, placeholder, все вариации inputmode, его отличия от атрибута type, атрибут autocomplete, autofocus, form, minlength и maxlength, size, pattern, spellcheck, novalidate, rows и cols, wrap.
🔴 Timeline:
▶ 00:00 | План урока
▶ 00:17 | Атрибут required
▶ 00:52 | Атрибут required и select
▶ 02:04 | Атрибут disabled
▶ 02:37 | Атрибут readonly
▶ 02:52 | Разница readonly и disabled
▶ 03:14 | Атрибут placeholder
▶ 03:32 | Атрибут inputmode
▶ 03:43 | inputmode text
▶ 03:46 | inputmode none
▶ 03:55 | inputmode numeric
▶ 04:08 | inputmode decimal
▶ 04:16 | inputmode tel
▶ 04:27 | inputmode email
▶ 04:36 | inputmode search
▶ 04:46 | inputmode url
▶ 04:59 | Разница inputmode и type
▶ 06:02 | Атрибут autocomplete
▶ 06:21 | Как браузер узнает, что предложить в autocomplete
▶ 07:40 | Атрибут autofocus
▶ 07:53 | Состояние фокуса
▶ 08:44 | Атрибут form
▶ 10:13 | Атрибут form на практике
▶ 10:47 | Атрибуты minlength и maxlength
▶ 11:39 | Атрибут size
▶ 12:35 | Атрибут size для select
▶ 12:58 | Атрибут size для select с multiple
▶ 13:11 | Атрибут pattern
▶ 13:40 | Атрибут pattern, меняем текст браузерного предупреждения
▶ 14:14 | Атрибут spellcheck
▶ 14:53 | Атрибут novalidate
▶ 15:29 | Атрибуты rows и cols
▶ 15:45 | Атрибут wrap
▶ 16:19 | Что дальше
📚 Полезные ссылки:
➖ Атрибут autocomplete на MDN: developer.mozilla.org/en-US/d...
➖ Атрибут autocomplete на doka.guide: doka.guide/html/autocomplete/
💬 Чат в телеграмме (помощь новичкам):
t.me/friendlyFrontendChat
🔸 Boosty (поддержать канал):
boosty.to/friendly-frontend
🗂️ Бесплатные курсы на канале:
🟠 HTML: • HTML курс 2024
🔵 CSS: • CSS курс 2024
🟡 JS: • JavaScript курс 2024
🟢 A11y: • Accessibility курс 2024
⚪️ Мастер-класс по верстке для новичков: • Верстка Kropp Fitness ...
🔘 Мастер-класс по верстке для продвинутых (БЭМ, SCSS): • Верстка Positivus (HTM...
🗺 Frontend Roadmap 2024 • Frontend Roadmap 2024 ...
📌 Автор:
➖ Личный сайт: aleksanderlamkov.ru/
➖ Telegram: t.me/friendlyFrontend
➖ Boosty: boosty.to/friendly-frontend
➖ GetMentor: getmentor.dev/mentor/aleksand...
➖ Solvery: solvery.io/mentor/aleksanderl...
#frontend #фронтенд #html
Спасибо за такой подробный разбора атрибутов. Про 'input-mode' даже не слышал
По красоте! Даже я со стажем 10+ лет верстальщика, некоторые моменты не знал. 😃👍
Офигенный урок! Отдельное спасибо за наглядный пример с Озоном!
Спасибо за урок!!! Поскорее бы уже перейти к практике верстки) На следующей неделе надо будет пройти css и в бой создавать сайты по твоим видео 🔥🔥
5:01 Александр, оговорились) Вы хотели сказать inputmode, не inputtype.
Привет! Видосы пушка! Скажи пожалуйста, где посмотреть весь список зарезервированных имен которые ты нашел?
Привет! Спасибо :) Ссылка есть в описании в "📚 Полезные ссылки", на doka guide, там удобнее всего смотреть.
@@AleksanderLamkov спасибо!
Большое спасибо за прекрасный материал!
Подскажите, пожалуйста, на Доке (и других источниках) прочла, что атрибут pattern используется только для тега . А вы говорите, что в тоже можно. Я попробовала, для атрибут pattern не дает действия. Можно ли сказать, что атрибут pattern нельзя использовать для тега или в этом случае есть какие то особенные правила использования атрибута?
Спасибо за фидбек! Да, вы правы, pattern нельзя использовать с textarea, тут я ошибся.
очень много разных атрибутов, даже с первого раза все не запомнить
13:45 обидно
Работаю над произношением, не кидайтесь помидорами)
Как считаешь стратегия с нумерацией видосов не приведёт к проблемам в будущем ?)
Ну, это же курс "для начинающих", он должен быть пронумерован, чтобы новички не терялись :)
По секрету (ага, в публичных комментариях) - осталось ещё буквально 3-4 видео в этом курсе, затем будет несколько видео на продвинутые темы по HTML без привязки к курсу, которые можно смотреть в любой последовательности.
А следующий курс, CSS для начинающих, тоже будет пронумерован.
Последовательность изучения очень важна. Я ведь не рандомно темы распределяю, сложность возрастает от темы к теме :)
@@AleksanderLamkovПривет! А после завершения css ты будешь снимать на другие разные темы? Или же например попробуешь выпускать видео по js? Просто очень интересно посмотреть твои ролики, но уже по ts, react и т.д) Спасибо заранее!
@@frolovv3, привет! Разумеется будут видео и по JavaScript и по React и далее. Но в первую очередь хочу сделать акцент на базовых технологиях, т. к. есть очень много нюансов, о которых никто не говорит.
@@AleksanderLamkov мы будем ждать видосы по реакту и TS :)
Уроки хорошие, спасибо!
НО, имхо, музыка лишняя... либо делать ее потише, отвлекает от прослушивания.
Привет! Этим видео почти год. В большинстве видео на канале фоновой музыки уже нет.
А есть атрибут для select чтоб ширина была равна selected option ?
Привет! Нет, увы. Мы вообще ничего с классическим выпадающим списком сделать не можем, можем только написать свой на JS, но это та ещё задачка.
Все не запомнить, во время практики все запомнится