12. HTML тег input и его вариации. Атрибут type, значения tel, email, password, url, search и другие

[@AleksanderLamkov]

Забыл упомянуть ещё один тип для поля ввода: - визуально скрывает элемент со страницы. Используется зачастую для передачи каких-то мета-данных (токен, id товара) при отправке формы. Подробнее, наверное, вам пока знать не обязательно, но если столкнетесь с ним, то общее представление у вас будет :) Вот тут чуть подробнее: developer.mozilla.org/ru/docs/Web/HTML/Element/input/hidden

[@ukraine1514]

Почитаем, спасибо 👍😁

[@BezhovHF]

Лучшие плейлист для повторения, убирает все вопросы, спасибо огромное

[@Мальчик_Ананас]

Кратко и понятно. А также курсы новые, что очень радует

[@ilya10rus]

Спасибо, за вашу работу! 😊

[@Pon-Pon-Patapon]

Спасибо, очень интересно.

[@silenciomar]

Благодарю за урок! Поражает то, как кратко и информативно вы донесли информацию.

[@alexb.2616]

Пять баллов!

[@VadimKapustin]

Спасибо за видео, отличная подача и текст! Мне кажется ambient не лучший выбор для познавательного контента, даже наоборот, мешает воспринимать информацию и усыпляет (Не совет, а обратная связь)

[@evgenyyakushenko4636]

Вроде все же можно стилизовать с помощью нестандартных псевдоэлементов типа ::-webkit-slider-thumb, ::-webkit-slider-runnable-track и прочих с разными вендорными префиксами

[@AleksanderLamkov]

Хм, не знал. Спасибо! Нашел такое: css-tricks.com/styling-cross-browser-compatible-range-inputs-css/ Вообще, мне в работе всегда приходилось делать кастомные range-слайдеры с двумя ползунками (а-ля мин-макс цена) и к сожалению, дефолтный type="range" с этим не справляется до сих пор...

[@neldy2909]

а зачем теги и если и без них все работает?

[@AleksanderLamkov]

Без form отправка формы работать не будет, а fieldset помогает пользователям скринридера понять, какие поля ввода сгруппированы.

[@ilytoowee1372]

Отличный урок! Только есть вопрос: "Зачем инпуты и лэйбл совать в тег ?" Чтобы просто был абзац и не надо было добавлять тег br? Тогда не лучше див использовать?

[@AleksanderLamkov]

На самом деле можно использовать и и , строгих правил нет. Просто в спецификации в статьях про формы используют именно . Я предполагаю, что это сугубо ради внешних вертикальных отступов, которые добавляются браузерами для тегов параграфов по умолчанию. Ну то есть все это, чтобы группы полей не слипались друг с другом по вертикали.

[@ilytoowee1372]

Также еще вопрос, как лучше использовать лейбл с инпутом? Связывать по айди или вкладывать? Или разницы нет?

[@AleksanderLamkov]

Я предпочитаю связывать явно, то есть располагать label и input на одном уровне вложенности. Потому что в лейбл нельзя вкладывать блочные теги, а это иногда требуется. Когда лейбл и инпут лежат на одном уровне, то разметка получается более гибкой. Сложно объяснить без конкретного примера, но валидация полей с выводом кастомных ошибок или подсказок в соседнем тултипе - первое, что приходит в голову, когда инпут вложенный напрямую в лейбл будет мешать задумке.

[@ErikAveyan]

Александр, спасибо за все видео-уроки! Подскажи, пожалуйста, где можно взять макеты, набить руку, верстая сайты, как-то самому тяжело приходит идея/макет, чтобы с нуля начать так писать, легче по макету пока будет. может есть проверенные источники для практики html + css

[@AleksanderLamkov]

Привет! Спасибо за фидбек :) Макеты можно найти в телеграмм-каналах: t.me/maketforfigma, t.me/figma2html и могу предложить такой макет с примерным ТЗ: boosty.to/friendly-frontend/posts/f7550e28-5d82-4594-b99a-48055cb790cc?share=ios_post_link

[@ErikAveyan]

Благодарю) еще вопрос, в сложных для себя ситуациях, обращаться лучше к гугл и различным там источникам или можно практиковать с chat-gpt?@@AleksanderLamkov

[@AleksanderLamkov]

ChatGPT классная вещь, но нужно перепроверять, что она выдает, а не бездумно всё копипастить :) Ну а так, лучше совмещать все способы поиска информации.

[@dimitridoroshko]

Какая у вас IDE? Webstorm?

[@AleksanderLamkov]

Угу, WebStorm.

[@dimitridoroshko]

@@AleksanderLamkov крутая IDE, это да :)

[@dimitridoroshko]

@@AleksanderLamkov а чем вам VScode не понравился? Там же плагинами можно все хорошо дополнить и +- тот же вебшторм только легче

[@AleksanderLamkov]

​@@dimitridoroshko на самом деле много чем. Как минимум жутко неудобный поиск по файлам и коду проекта. Плюс боль с FTP / SFTP плагинами для ремоут-подключения к серверу в VSCode - в начале карьеры они меня здорово подставили, т. к. по-тихому умерли, а всякие альтернативы были одна мертвее другой. Настраивать всё плагинами - это надеятся на то, что они при автоапдейте не умрут. В WebStorm же "изкоробки" есть всё то, что нужно для более серьёзной разработки. Ну и также, если чего-то не хватает, можно накинуть плагинов. А про "легкость" IDE - этот фактор для меня перестал существовать, как только обновил рабочие железяки. Что VSC, что WS, запускаются и работают одинаково шустро.

[@dimitridoroshko]

@@AleksanderLamkov какие у вас характеристики рабочего компьютера / ноута?

[@GekaLeonov]

Подскажите пожалуйста, какой атрибут (наподобие атрибута selected для ) использовать для тега (или "checkbox"), чтобы, один из двух предложенных вариантов, был изначально выбран, после загрузки страницы .Спасибо

[@AleksanderLamkov]

Нужен атрибут checked.

[@AlexeyPatrushev]

А у тебя случайно нет текстовых файлов всей инфы? Хочу для себя в Notion хранить)

[@AleksanderLamkov]

Увы. Лишь в формате сценариев без кода. В статьи переводить будет тяжко. Когда-нибудь выйдет обновленный курс, быть может сделаю и полноценную текстовую версию. Получится прям как полноценный онлайн-учебник...

[@zhaslanulysabyrzhan]

оборачивать чекбоксы с лейблом в параграф это что-то из разряда "бест практис"?

[@AleksanderLamkov]

Привет! Не только чекбоксы, а в принципе любые поля ввода (input, textarea, select). Так рекомендует W3C: html.spec.whatwg.org/multipage/forms.html#writing-a-form's-user-interface

[@zhaslanulysabyrzhan]

@@AleksanderLamkov Спасибо

[@AleksanderLamkov]

Пранализировал этот вопрос подробнее. Все же оборачивание в параграф не имеет большого смысла. Если разметка поля ввода сложная и внутри параграфа используется div (а так бывает часто), то такая разметка будет невалидной: caninclude.glitch.me/caninclude?child=Div&parent=P Скорее всего в том примере w3c параграфы используются сугубо для визуала. В общем, лучше оборачивать в , а не в .

[@zhaslanulysabyrzhan]

@@AleksanderLamkovспасибо за ответ

[@sabyrka]

Привет, зачем для input с type checkbox указывать атрибут name если данные отправляются с атрибута value чтобы сервер после отправки формы распознал выбор пользователя?

[@AleksanderLamkov]

Привет! Без name у input сервер не увидит данные из value. Данные из формы с таким полем: Отправятся в виде: { "password": "qwerty" } Без name сервер не сможет понять, к какому свойству отправляемого объекта относится значение из value.

[@ЕкатеринаКолоярская]

А для чего может понадобиться громкость звука?

[@AleksanderLamkov]

Чтобы реализовать кастомный плеер со своим регулятором громкости.

[@neldy2909]

а в name можно любое название вводить?

[@AleksanderLamkov]

Да, ограничений никаких нет.

[@War4yn]

А точно нельзя стилизовать календарь через css ? Вроде можно

[@AleksanderLamkov]

Только поле ввода. Выпадающий поверх страницы интерфейс календаря - нет. Он в каждом браузере свой.

[@Ivanfwit]

жаль нельзя стилизовать большинство типов инпутов

[@Renegade11111]

С каждым видео музыка все громче и громче. Контент - заебись, но зачем делать музыку, чтоб тебя было еле слышно - загадка)

[@AleksanderLamkov]

Согласен с негодованием. Но видео, которые ты сейчас смотришь, я записывал почти год назад. В целом подход к наличию музыки в видео я пересмотрел уже к середине курса по HTML, так что потерпи чуток, скоро эти неудобства исчезнут :)

[@colakghazaryan4836]

Уберите идиотский раздражающий фоновый звук!!!

[@AleksanderLamkov]

Его не будет уже через пару видео в рамках этого курса.