Тёмный

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

Школа itProger / Программирование
Просмотров 138 тыс.
50% 1

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

Опубликовано:

 

12 май 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 145   
@alexandralexandr2997
@alexandralexandr2997 Год назад
Посмотреть атрибуты для определенного тега в VS-code, можно с помощью сочетания клавиш: ctrl + пробел God bless you 🙂🙌
@user-sh7gq3tq6v
@user-sh7gq3tq6v Год назад
герой
@Ilham0._.0
@Ilham0._.0 Год назад
От души
@alexandralexandr2997
@alexandralexandr2997 Год назад
@@Ilham0._.0спасибо :)
@Ilham0._.0
@Ilham0._.0 Год назад
@@alexandralexandr2997 можешь сказать что делать если изображение вставил в сайт,потом заходишь через телефон на свой сайт и изображение не показывает
@alexandralexandr2997
@alexandralexandr2997 Год назад
@@Ilham0._.0 рад был бы подсказать, но я к сожалению не знаю, тут все индивидуально. Попробуй задать этот вопрос чату gpt, возможно он ответит на твой вопрос.
@user-ds3ig7wj4n
@user-ds3ig7wj4n 24 дня назад
Думала всегда,что это кошмар сложно, но с вашими объяснениями все кристально понятно. Иногда мозг уже начинает медленее грузиться из-за большого потока информации,но я просто отматываю назад и смотрю до тех пор пока не смогу обработать. Огромное спасибо за то, что не просто рассказываете ,но и показываете как и что прописывать. Супер!!!!
@eg0rka252
@eg0rka252 3 года назад
Все очень классно! Видео оч понятные и интересные, спасибо большое за такой контент
@user-gs4ec4it5l
@user-gs4ec4it5l 3 года назад
Спасибо!! Очень понятные и хорошие уроки!
@user-vi9zb4zh3n
@user-vi9zb4zh3n 2 года назад
Огромное спасибо, для новичков главное доступность информации и не отбить желание учиться дальше, у вас это хорошо получается.
@user-aka-root
@user-aka-root Год назад
Урок супер как и все остальные!!! Нашёл только небольшую несостыковку на моменте 10:49, тут ты говоришь, что атрибут "for" работает с названием объекта, хотя на самом деле этот атрибут работает с id объекта
@timirlanhaniev
@timirlanhaniev Год назад
Я не разбираюсь, но разве id и название объекта не одно и тоже?
@saapool
@saapool Год назад
@@timirlanhaniev нет, id - идентификационный номер, название - название.
@hattori-6751
@hattori-6751 Год назад
логика одна и та же, ты можешь обращаться как к идентификатору так и к имени. Сначала сам подумай, а потом делай замечания людямлогика
@Dmitry_Grachiev
@Dmitry_Grachiev Год назад
​@@hattori-6751 А вот меня даже такая крохотная несостыковка сильно запутала: Как одновременно и объединить все radio (для этого им нужно дать один name), и подключить к каждому radio свой label? по словам автора, нужно к label добавить атрибут for, куда указать name, а как указать name, если один и тот же name присвоен нескольким radio?!?! Надеюсь кто-нибудь понял мой высеp
@hattori-6751
@hattori-6751 Год назад
@@Dmitry_Grachiev ты поймешь это во время обучения css , ну или в верстке первого макета
@user-jv1gl4xk8v
@user-jv1gl4xk8v 2 года назад
👍👍👍👍👍респект! Короткие но очень информативные уроки.
@Q_roxe
@Q_roxe 2 года назад
Отличный урок,длинный,и по этому на фоне всех остальных в этом курсе-сложноватый,но благо у нас отличный спикер который все понятно объясняет,спасибо за урок
@oleggbllack1453
@oleggbllack1453 2 года назад
Пересмотрел кучу уроков по web формам, но только благодаря вашему видео понял эту тему. Благодарю за проделанную работу
@user-rb1zv6yg3v
@user-rb1zv6yg3v 3 года назад
для label for, там все таки id, а не name Введите имя
@1llidan520
@1llidan520 3 года назад
+
@user-my1rp9sk3m
@user-my1rp9sk3m 3 года назад
+
@JakeAdvenTime
@JakeAdvenTime 2 года назад
Можешь объяснить в чём разница пожалуйста?
@jedinvidia9616
@jedinvidia9616 2 года назад
@@JakeAdvenTime Значения id и name одинаковые, а так вроде не правильно
@kanekihub
@kanekihub 2 года назад
Большое вам спасибо, кажется тему с полями для ввода я выучил лучше других тем)
@ksenrix
@ksenrix 9 месяцев назад
Очень Благодарен ! Спасибо !
@user-gv1hp9er3b
@user-gv1hp9er3b 10 месяцев назад
Информативный урок! Отлично!
@user-cf8in6kr7g
@user-cf8in6kr7g 2 года назад
Отличные видео, информации много, нужно время все переварить 😁
@livius0653
@livius0653 3 года назад
Спасибо за урок
@pagamestudio
@pagamestudio 6 месяцев назад
Здорово! Отличные уроки
@Croft555
@Croft555 2 года назад
Чудова подача, дякую!
@user-se8rc9lz3n
@user-se8rc9lz3n Год назад
Смотрю ваши уроки и понимаю, что программировать не сложно в целом =) (хотя очевидно, что дальше будет сложнее) Спасибо за ваш труд!
@zelimgamer3762
@zelimgamer3762 Год назад
HTML - текст гипертекстовой разметки, а программирование это уже C,C++,C#,Java,Js,Kotlin,Swift,Python.. терпения вам 😂
@zhanarn7083
@zhanarn7083 Месяц назад
очень понятно все объяснено, спасибо!
@vuitlik5449
@vuitlik5449 3 года назад
0 дизлайков? Да ты крут!
@user-se3rp1wt8u
@user-se3rp1wt8u 3 месяца назад
Спасибо вам большое за урок!!!
@user-km2bh1mz7z
@user-km2bh1mz7z 2 года назад
Красавчик ! Спасибо !
@sanjar5862
@sanjar5862 3 года назад
Воу видосы выходят так быстро респектос , уроки у тебя крутые ,жду жс )
@alexandermetadonov
@alexandermetadonov 3 года назад
Он заранее снимает, и загружает одновременно
@davron_xolboyev
@davron_xolboyev 3 года назад
спасибо за урок
@AnimeKing940
@AnimeKing940 4 месяца назад
урок понятный и разборчивый !
@alimniyazov5248
@alimniyazov5248 3 года назад
Очень хороший урок
@mr_nekit7809
@mr_nekit7809 Год назад
хороший курс 🙂🙃
@hakimjonghaniev5536
@hakimjonghaniev5536 2 года назад
Спасибо
@el1oz155
@el1oz155 3 года назад
у меня reset не очищает поля (( почему? Поправка: Забыл вписать :)
@user-gu4oo1ts1c
@user-gu4oo1ts1c 6 месяцев назад
Merci!
@reversplay529
@reversplay529 Год назад
Блин очень классно все объясняешь )) Усынови меня и учи ))))
@user-mo1jf5sm2t
@user-mo1jf5sm2t 3 года назад
Добрый день, курс классный, спасибо! Подскажите, можно ли в Notepad++ сделать автоподбор атрибутов (как у Вас, когда выскакивает список возможных атрибутов для этого тега)? Если нет, в каком редакторе это доступно? Windows Спасибо!
@itproger
@itproger 3 года назад
Можете плагин Emmet установить для Notepad++
@BELSHOP01
@BELSHOP01 7 месяцев назад
Вы чутка ошиблись) в атрибуте for=" указывается назавние id", а не name=" "
@faridaslanov5965
@faridaslanov5965 Год назад
простооооо СУУУППЕЕРРРРР
@AntonAndreyev
@AntonAndreyev Год назад
Поправка про дату и время:
@shyngxs
@shyngxs 9 месяцев назад
А что дает это "-local"?
@ptytb7701
@ptytb7701 20 дней назад
классно
@user-wj6ie1mw8m
@user-wj6ie1mw8m Год назад
Спасибо, очень полезный курс. Подскажите, какой редактор (IDE) Вы используете? Как реализована "подсказка" списка атрибутов к тегу? Не могу настроить в VS Code
@shyngxs
@shyngxs 9 месяцев назад
Atom, а в VS Code вы можете использовать сочетание клавиш Control+Space чтобы узнать все доступные атрибуты к тегу.
@Toiry2
@Toiry2 6 месяцев назад
В vs code подсказки лучше сделаны
@ob7349
@ob7349 3 года назад
А можно примеры использования атрибута hidden? И disabled, зачем поле, в которое нельзя ввести?
@faniskhalikov9736
@faniskhalikov9736 2 года назад
к примеру: для работы с бэкендом очень важно присутствие поля id, а показывать пользователю нет необходимости
@user-ex9cs8zi7e
@user-ex9cs8zi7e 3 месяца назад
😊😊😊😊😊😊
@spectorx7256
@spectorx7256 3 года назад
Может часто задаваемый вопрос, но тем не менее, отступы играют какую-либо роль в языке или это просто для наглядности?
@itproger
@itproger 3 года назад
В HTML - это просто для наглядности
@Anatoliy1790
@Anatoliy1790 Год назад
🙂
@Krylowandrey
@Krylowandrey 7 дней назад
Как в ВС код посмотреть все возможные атрибуты для того или иного тега? ( внутри редактора)
@Leshanga
@Leshanga Год назад
привет,подскажи пожалуйста как вызывать подсказку тэгов как высвечивается на 6:35 ,и спасибо за уроки :)
@timirlanhaniev
@timirlanhaniev Год назад
Она должна быть автоматически в этом приложении
@Leshanga
@Leshanga Год назад
@@timirlanhaniev спасибо ,думаю установить другой редактор)
@SAMANUELb
@SAMANUELb 10 месяцев назад
если у тебя не атом, то попробуй сочетание клавиш ctr+пробел
@Leshanga
@Leshanga 10 месяцев назад
@@SAMANUELb спасибо))
@Bezdarnyi_Master
@Bezdarnyi_Master 3 года назад
хотел сделать, чтоб текст вводился по центру окна и прописал align='center' в input.... не проканало..)))
@itproger
@itproger 3 года назад
CSS свойство для этого есть, но CSS уже в следующем курсе :)
@xeither289
@xeither289 2 года назад
☦❤🙏💕☦💕❤🙏
@user-ot5tz9kj1c
@user-ot5tz9kj1c Год назад
Подскажите пожалуйста, пользуюсь атомом, не понимаю как блоки сворачивать, подскажите как это сделать пожалуйста
@klaussid195
@klaussid195 2 года назад
переход так и не заработал, менял и name и id пробовал делать так же как в примере, результат один переход в поле не происходит результаты сохранял страницу обновлял, почему такое происходит?
@user-he9hu2ox9k
@user-he9hu2ox9k 3 месяца назад
Та же проблема(
@_furryich
@_furryich 3 года назад
:)
@Magaaston
@Magaaston 3 года назад
Использую Egde как основной браузер и поверь он все читает ) type="color" легко
@Magaaston
@Magaaston 3 года назад
datatime-local кста на Эдже работает)))
@fffdhdhdryryry
@fffdhdhdryryry Месяц назад
а почему сейчас не работают кнопку reset, sumbit и страница не перегружается?
@kris1tall56
@kris1tall56 Месяц назад
чтобы было окошко с временем надо написать без date т.е просто time
@roman3403
@roman3403 2 года назад
А как зделать фон неподвижним? постараюсь обяснить: Нужно чтоби фон не проворачивался с текстом. Текст проварачивается а фон закреплен.
@defoxx__243
@defoxx__243 Месяц назад
Ну объясняешь ты классно
@LEGENDARY192
@LEGENDARY192 Год назад
Очень хорошее видео, но я прифигел после 5-ти минутных обучалок 25 минут смотреть. за 2 часа посмотрел)
@sakinurs3084
@sakinurs3084 3 года назад
а почему у тебя стоят аж два , если можно поставить и 1
@_furryich
@_furryich 3 года назад
2 строчка получается
@JakeAdvenTime
@JakeAdvenTime 2 года назад
1 делает маленький отступ 2 делают более большой отступ
@MariaIvanova777
@MariaIvanova777 2 года назад
Color в Edge работает.
@vladyslavkarmazyn601
@vladyslavkarmazyn601 2 года назад
Почему-то не сработал. Когда пишу без "собачки", то ничего не выскакиевает, как на видео. Кто знает почему?
@alexeyzarifyan5518
@alexeyzarifyan5518 2 года назад
Проверь, чтоб элемент input был вложен в элемент form
@ismailovmarat
@ismailovmarat Год назад
В EDGE все поддерживает
@leonhart1052
@leonhart1052 Год назад
У меня в атоме когда ввожу текст он ростягивается в одной строке в даль, как сделать так как у автора?
@LEGENDARY192
@LEGENDARY192 Год назад
Наверное уже поздно, но вот в самом конце строки
@hamradio.r3dux
@hamradio.r3dux Месяц назад
А что это за среда разработки? Это не Visual Studio Code?
@zhanarn7083
@zhanarn7083 Месяц назад
Atom
@xeither289
@xeither289 2 года назад
ИИСУС ХРИСТОС ЕСТЬ МЕССИЯ И ОН ВОСКРЕС
@OpO738
@OpO738 2 года назад
1 курс, для меня был понятнее , досмотрю этот, потом на 1 старый курс , перейду . =-(((
@imam9107
@imam9107 Год назад
datetime-local вместо datetime и все работает в хроме))
@newbrunetteforhim2418
@newbrunetteforhim2418 Год назад
Спасибо! )
@Termux-nazar-antihack-linux
@Termux-nazar-antihack-linux 5 месяцев назад
8:27
@user-hn7sh4ir6t
@user-hn7sh4ir6t 3 года назад
Ну и нифига у меня не обновляется страничка. С кнопкой очистить та же история
@user-hn7sh4ir6t
@user-hn7sh4ir6t 2 года назад
@OnlyOne Спасибо
@jekaterinastef7665
@jekaterinastef7665 3 года назад
Добрейшего! Кнопка reset вообще никак не реагирует, ничего не стирает ни в каких манипуляциях. В чем проблема?
@itproger
@itproger 3 года назад
Некоторые браузеры ее не поддерживают
@jekaterinastef7665
@jekaterinastef7665 3 года назад
@@itproger а есть ли что-нибудь универсальное для всех браузеров? Только танцы с бубнами? Большая форма, юзер задолбается стирать
@whitehat-it-4096
@whitehat-it-4096 3 года назад
Так в чём собственно смысл тега form?
@JakeAdvenTime
@JakeAdvenTime 2 года назад
для , работает также, как для . То есть некоторые поля для ввода могу не работать без
@Aaaa-jn4bm
@Aaaa-jn4bm 3 года назад
Видеоролики интересные и полезные для начального изучения html, только очень напрягает произношение английских слов
@SAMANUELb
@SAMANUELb 10 месяцев назад
@@maskwejlka3698 вот-же @xeither289 обрадуется когда ухнает что в комментариях сам боже сидит)
@Takeshi_Kowac
@Takeshi_Kowac 8 месяцев назад
у меня ни в хроме ни в сафари не отображается ни календарь ни выбор цвета ...=(
@ToupeKit
@ToupeKit Месяц назад
Бывает
@am1go735
@am1go735 Год назад
атрибут name це ніби якір?
@uraserebranskiy
@uraserebranskiy Год назад
Нет
@user-rj2cd4yb9e
@user-rj2cd4yb9e 4 месяца назад
Ctrl + R - обновление страницы.
@xeither289
@xeither289 2 года назад
БОГ ЕСТЬ ЛЮБИТЕ БОГА И СВОИХ БЛИЖНИХ
@max_voronenkov
@max_voronenkov Год назад
Поменяй аву чел
@frontend_developer_anti_vata
@frontend_developer_anti_vata 6 месяцев назад
​​@@max_voronenkovобиженый ватничек за Россию ущемился от авы
@nikson9334
@nikson9334 2 года назад
взлетело когда for=id, а не name
@akhmedmagomedov324
@akhmedmagomedov324 3 года назад
А зачем br дважды прописывать??
@user-hs2vh7ee7l
@user-hs2vh7ee7l 2 года назад
Чтобы отступ был побольше
@user-fs9th3sr9g
@user-fs9th3sr9g 3 года назад
Класс лайкни меня чтобы я стал хорошим программистом
@jedinvidia9616
@jedinvidia9616 2 года назад
Ну что? Как успехи?
@zetochka9952
@zetochka9952 6 месяцев назад
мне тоже интересны успехи )
@user-li7si6mr3k
@user-li7si6mr3k 5 месяцев назад
Секс
@hardflex6579
@hardflex6579 3 года назад
Без обид но у тебя местами повторение одних и тех же слов,это увеличивает время урока,сократи объяснение,а так всё good,thx)
@superman-prime409
@superman-prime409 3 года назад
🤫🤫🤫
@motay8103
@motay8103 3 года назад
Он объясняет для новичков, и повторяется что бы ты запомнил
@karman8029
@karman8029 11 месяцев назад
имба видосики уже 13 ролик посмотрел
@Burovasofia
@Burovasofia Год назад
спасибо за урок
@lawdriver88
@lawdriver88 Год назад
Спасибо
Далее
Get a knife! | Standoff 2
01:06
Просмотров 1,5 млн
Login Form in HTML & CSS
11:07
Просмотров 1,1 млн
Стилизация форм на HTML и CSS
12:44
Просмотров 61 тыс.
Get a knife! | Standoff 2
01:06
Просмотров 1,5 млн