HTML5 для начинающих / Урок #13 - Создание HTML форм и полей для ввода

HTML содержит множество тегов для построения всевозможных веб-форм. За урок мы научимся создавать формы, прописывать внутри них различные поля и добавлять к этому всему атрибуты.
✅ Полезные ссылки:
✏️ Урок на сайте itProger: itproger.com/course/html/13
⏰ Тайм коды:
00:00 - Начало
00:17 - Создание тега «form»
02:46 - Создание подписи для поля - тег «label»
03:08 - Создание поля для вода информации
04:20 - Атрибуты для тега «input»
11:47 - Разные форматы «input» полей
20:43 - Создание кнопок в форме
24:21 - Завершение
✔ Сообщество программистов: itproger.com/
✔ -------------
Вступай в группу Вк - prog_life 🚀
Группа FaceBook - goo.gl/XW0aaP
Инстаграм itProger: / itproger_official
Instagram: / gosha_dudar
Telegram: t.me/itProger_official
Twitter - / goshadudar
- Уроки от #itProger 👨🏼‍💻
- Все уроки по хештегу #itprogerLessons

[@alexandralexandr2997]

Посмотреть атрибуты для определенного тега в VS-code, можно с помощью сочетания клавиш: ctrl + пробел God bless you 🙂🙌

[@user-sh7gq3tq6v]

герой

[@Ilham0._.0]

От души

[@alexandralexandr2997]

@@Ilham0._.0спасибо :)

[@Ilham0._.0]

@@alexandralexandr2997 можешь сказать что делать если изображение вставил в сайт,потом заходишь через телефон на свой сайт и изображение не показывает

[@alexandralexandr2997]

@@Ilham0._.0 рад был бы подсказать, но я к сожалению не знаю, тут все индивидуально. Попробуй задать этот вопрос чату gpt, возможно он ответит на твой вопрос.

[@user-vi9zb4zh3n]

Огромное спасибо, для новичков главное доступность информации и не отбить желание учиться дальше, у вас это хорошо получается.

[@vuitlik5449]

0 дизлайков? Да ты крут!

[@eg0rka252]

Все очень классно! Видео оч понятные и интересные, спасибо большое за такой контент

[@user-gs4ec4it5l]

Спасибо!! Очень понятные и хорошие уроки!

[@Q_roxe]

Отличный урок,длинный,и по этому на фоне всех остальных в этом курсе-сложноватый,но благо у нас отличный спикер который все понятно объясняет,спасибо за урок

[@oleggbllack1453]

Пересмотрел кучу уроков по web формам, но только благодаря вашему видео понял эту тему. Благодарю за проделанную работу

[@user-jv1gl4xk8v]

👍👍👍👍👍респект! Короткие но очень информативные уроки.

[@user-ds3ig7wj4n]

Думала всегда,что это кошмар сложно, но с вашими объяснениями все кристально понятно. Иногда мозг уже начинает медленее грузиться из-за большого потока информации,но я просто отматываю назад и смотрю до тех пор пока не смогу обработать. Огромное спасибо за то, что не просто рассказываете ,но и показываете как и что прописывать. Супер!!!!

[@kanekihub]

Большое вам спасибо, кажется тему с полями для ввода я выучил лучше других тем)

[@user-gv1hp9er3b]

Информативный урок! Отлично!

[@user-cf8in6kr7g]

Отличные видео, информации много, нужно время все переварить 😁

[@user-aka-root]

Урок супер как и все остальные!!! Нашёл только небольшую несостыковку на моменте 10:49, тут ты говоришь, что атрибут "for" работает с названием объекта, хотя на самом деле этот атрибут работает с id объекта

[@timirlanhaniev]

Я не разбираюсь, но разве id и название объекта не одно и тоже?

[@saapool]

@@timirlanhaniev нет, id - идентификационный номер, название - название.

[@hattori-6751]

логика одна и та же, ты можешь обращаться как к идентификатору так и к имени. Сначала сам подумай, а потом делай замечания людямлогика

[@Dmitry_Grachiev]

​@@hattori-6751 А вот меня даже такая крохотная несостыковка сильно запутала: Как одновременно и объединить все radio (для этого им нужно дать один name), и подключить к каждому radio свой label? по словам автора, нужно к label добавить атрибут for, куда указать name, а как указать name, если один и тот же name присвоен нескольким radio?!?! Надеюсь кто-нибудь понял мой высеp

[@hattori-6751]

@@Dmitry_Grachiev ты поймешь это во время обучения css , ну или в верстке первого макета

[@user-se8rc9lz3n]

Смотрю ваши уроки и понимаю, что программировать не сложно в целом =) (хотя очевидно, что дальше будет сложнее) Спасибо за ваш труд!

[@zelimgamer3762]

HTML - текст гипертекстовой разметки, а программирование это уже C,C++,C#,Java,Js,Kotlin,Swift,Python.. терпения вам 😂

[@pagamestudio]

Здорово! Отличные уроки

[@lusi-kn6ef]

спасибо огромное за классные уроки обожаю ваш канал👍👍👍👍👍👍

[@AnimeKing940]

урок понятный и разборчивый !

[@zhanarn7083]

очень понятно все объяснено, спасибо!

[@ksenrix]

Очень Благодарен ! Спасибо !

[@user-se3rp1wt8u]

Спасибо вам большое за урок!!!

[@sanjar5862]

Воу видосы выходят так быстро респектос , уроки у тебя крутые ,жду жс )

[@alexandermetadonov]

Он заранее снимает, и загружает одновременно

[@livius0653]

Спасибо за урок

[@Croft555]

Чудова подача, дякую!

[@alimniyazov5248]

Очень хороший урок

[@user-rb1zv6yg3v]

для label for, там все таки id, а не name Введите имя

[@1llidan520]

+

[@user-my1rp9sk3m]

+

[@JakeAdvenTime]

Можешь объяснить в чём разница пожалуйста?

[@jedinvidia9616]

@@JakeAdvenTime Значения id и name одинаковые, а так вроде не правильно

[@MistInJay]

На моменте 16:43 атрибут "datetime" не корректно работает, потому что нужно использовать "datetime-local", тогда появится окошко для выбора даты и времени (без часового пояса). Он поддерживается и в Эйдже и в Хроме

[@davron_xolboyev]

спасибо за урок

[@user-km2bh1mz7z]

Красавчик ! Спасибо !

[@mr_nekit7809]

хороший курс 🙂🙃

[@reversplay529]

Блин очень классно все объясняешь )) Усынови меня и учи ))))

[@el1oz155]

у меня reset не очищает поля (( почему? Поправка: Забыл вписать :)

[@ptytb7701]

классно

[@hakimjonghaniev5536]

Спасибо

[@user-gu4oo1ts1c]

Merci!

[@AntonAndreyev]

Поправка про дату и время:

[@shyngxs]

А что дает это "-local"?

[@Krylowandrey]

Как в ВС код посмотреть все возможные атрибуты для того или иного тега? ( внутри редактора)

[@user-mo1jf5sm2t]

Добрый день, курс классный, спасибо! Подскажите, можно ли в Notepad++ сделать автоподбор атрибутов (как у Вас, когда выскакивает список возможных атрибутов для этого тега)? Если нет, в каком редакторе это доступно? Windows Спасибо!

[@itproger]

Можете плагин Emmet установить для Notepad++

[@faridaslanov5965]

простооооо СУУУППЕЕРРРРР

[@xeither289]

ИИСУС ХРИСТОС ЕСТЬ МЕССИЯ И ОН ВОСКРЕС

[@user-ex9cs8zi7e]

😊😊😊😊😊😊

[@user-wj6ie1mw8m]

Спасибо, очень полезный курс. Подскажите, какой редактор (IDE) Вы используете? Как реализована "подсказка" списка атрибутов к тегу? Не могу настроить в VS Code

[@shyngxs]

Atom, а в VS Code вы можете использовать сочетание клавиш Control+Space чтобы узнать все доступные атрибуты к тегу.

[@Toiry2]

В vs code подсказки лучше сделаны

[@user-ot5tz9kj1c]

Подскажите пожалуйста, пользуюсь атомом, не понимаю как блоки сворачивать, подскажите как это сделать пожалуйста

[@user-ms8wz6bc5e]

Добрый день. Как прописать свое название, которое будет указано внутри поля "Дата"? Вот пример: Пробовал и атрибуты value и placeholder, не помогают.... Спасибо.

[@Extwow]

Использую Egde как основной браузер и поверь он все читает ) type="color" легко

[@Extwow]

datatime-local кста на Эдже работает)))

[@Anatoliy1790]

🙂

[@BELSHOP01]

Вы чутка ошиблись) в атрибуте for=" указывается назавние id", а не name=" "

[@Leshanga]

привет,подскажи пожалуйста как вызывать подсказку тэгов как высвечивается на 6:35 ,и спасибо за уроки :)

[@timirlanhaniev]

Она должна быть автоматически в этом приложении

[@Leshanga]

@@timirlanhaniev спасибо ,думаю установить другой редактор)

[@SAMANUELb]

если у тебя не атом, то попробуй сочетание клавиш ctr+пробел

[@Leshanga]

@@SAMANUELb спасибо))

[@_furryich]

:)

[@ob7349]

А можно примеры использования атрибута hidden? И disabled, зачем поле, в которое нельзя ввести?

[@faniskhalikov9736]

к примеру: для работы с бэкендом очень важно присутствие поля id, а показывать пользователю нет необходимости

[@spectorx7256]

Может часто задаваемый вопрос, но тем не менее, отступы играют какую-либо роль в языке или это просто для наглядности?

[@itproger]

В HTML - это просто для наглядности

[@user-ms8wz6bc5e]

Какими плагинами или способами программисты пользуются чтобы искать два одинаковых ID в коде? В уроке было сказано, что нельзя присваивать одинаковые ID в коде HTML. Ведь если код объемный, трудно запомнить все имена ID...

[@MariaIvanova777]

Color в Edge работает.

[@kris1tall56]

чтобы было окошко с временем надо написать без date т.е просто time

[@JohnWood-wi4jz]

Не подскажете, у меня не работает ctrl+space. Не могу посмотреть теги к атрибуту инпут. Гуглил, ничего толкового не нашел

[@klaussid195]

переход так и не заработал, менял и name и id пробовал делать так же как в примере, результат один переход в поле не происходит результаты сохранял страницу обновлял, почему такое происходит?

[@user-he9hu2ox9k]

Та же проблема(

[@fffdhdhdryryry]

а почему сейчас не работают кнопку reset, sumbit и страница не перегружается?

[@xeither289]

☦❤🙏💕☦💕❤🙏

[@Bezdarnyi_Master]

хотел сделать, чтоб текст вводился по центру окна и прописал align='center' в input.... не проканало..)))

[@itproger]

CSS свойство для этого есть, но CSS уже в следующем курсе :)

[@OpO738]

1 курс, для меня был понятнее , досмотрю этот, потом на 1 старый курс , перейду . =-(((

[@LEGENDARY192]

Очень хорошее видео, но я прифигел после 5-ти минутных обучалок 25 минут смотреть. за 2 часа посмотрел)

[@hamradio.r3dux]

А что это за среда разработки? Это не Visual Studio Code?

[@zhanarn7083]

Atom

[@imam9107]

datetime-local вместо datetime и все работает в хроме))

[@newbrunetteforhim2418]

Спасибо! )

[@Aaaa-jn4bm]

Видеоролики интересные и полезные для начального изучения html, только очень напрягает произношение английских слов

[@SAMANUELb]

@@maskwejlka3698 вот-же @xeither289 обрадуется когда ухнает что в комментариях сам боже сидит)

[@sakinurs3084]

а почему у тебя стоят аж два , если можно поставить и 1

[@_furryich]

2 строчка получается

[@JakeAdvenTime]

1 делает маленький отступ 2 делают более большой отступ

[@leonhart1052]

У меня в атоме когда ввожу текст он ростягивается в одной строке в даль, как сделать так как у автора?

[@LEGENDARY192]

Наверное уже поздно, но вот в самом конце строки

[@roman3403]

А как зделать фон неподвижним? постараюсь обяснить: Нужно чтоби фон не проворачивался с текстом. Текст проварачивается а фон закреплен.

[@defoxx__243]

Ну объясняешь ты классно

[@vladyslavkarmazyn601]

Почему-то не сработал. Когда пишу без "собачки", то ничего не выскакиевает, как на видео. Кто знает почему?

[@alexeyzarifyan5518]

Проверь, чтоб элемент input был вложен в элемент form

[@user-rj2cd4yb9e]

Ctrl + R - обновление страницы.

[@xeither289]

БОГ ЕСТЬ ЛЮБИТЕ БОГА И СВОИХ БЛИЖНИХ

[@max_voronenkov]

Поменяй аву чел

[@frontend_developer_anti_vata]

​​@@max_voronenkovобиженый ватничек за Россию ущемился от авы

[@jekaterinastef7665]

Добрейшего! Кнопка reset вообще никак не реагирует, ничего не стирает ни в каких манипуляциях. В чем проблема?

[@itproger]

Некоторые браузеры ее не поддерживают

[@jekaterinastef7665]

@@itproger а есть ли что-нибудь универсальное для всех браузеров? Только танцы с бубнами? Большая форма, юзер задолбается стирать

[@Termux-nazar-antihack-linux]

8:27

[@user-hn7sh4ir6t]

Ну и нифига у меня не обновляется страничка. С кнопкой очистить та же история

[@user-hn7sh4ir6t]

@OnlyOne Спасибо

[@Takeshi_Kowac]

у меня ни в хроме ни в сафари не отображается ни календарь ни выбор цвета ...=(

[@ToupeKit]

Бывает

[@ismailovmarat]

В EDGE все поддерживает

[@am1go735]

атрибут name це ніби якір?

[@uraserebranskiy]

Нет

[@whitehat-it-4096]

Так в чём собственно смысл тега form?

[@JakeAdvenTime]

для , работает также, как для . То есть некоторые поля для ввода могу не работать без

[@user-fs9th3sr9g]

Класс лайкни меня чтобы я стал хорошим программистом

[@jedinvidia9616]

Ну что? Как успехи?

[@zetochka9952]

мне тоже интересны успехи )

[@akhmedmagomedov324]

А зачем br дважды прописывать??

[@user-hs2vh7ee7l]

Чтобы отступ был побольше

[@nikson9334]

взлетело когда for=id, а не name

[@user-li7si6mr3k]

Секс

[@hardflex6579]

Без обид но у тебя местами повторение одних и тех же слов,это увеличивает время урока,сократи объяснение,а так всё good,thx)

[@superman-prime409]

🤫🤫🤫

[@motay8103]

Он объясняет для новичков, и повторяется что бы ты запомнил

[@karman8029]

имба видосики уже 13 ролик посмотрел

[@Burovasofia]

спасибо за урок

[@lawdriver88]

Спасибо