Программирование с нуля с чего начать? Web разработка Урок 11 Формы Часть 1

Автор Lyudmila Yeriomenko
Программирование с нуля   с чего начать? Web разработка  Урок 11  Формы  Часть 1

в этой лекции мы.

Познакомимся с новым HTML элемента в формуле формы используется для того чтобы взаимодействовать с пользователями чтобы получать какие-то данные от пользователя и отправлять данные. Давайте начнём создадим файл я уже создал. Создал файл он называется у меня form HTML далее создадим на шаблон как всегда стоит ли я размещу Tech parts.

И доля в баре напишу Element форум который используется для того чтобы размещать форму на веб-странице и далее в форме мы можем расположить самой основной элемент формы — это элемент то есть вот по-английски — это самозакрывающийся тег для него не нужен закрывающий тег если мы сохраним наш файл и далее запустим его там видите здесь появляется элемент Input который представляет собой прямоугольное поле ввода которое можно вводить любой текст.

При желании мы можем расположить для того чтобы было понятно, что вводить в — это поле описание этого элемента Input например расположить текст с ним поставим двоеточие и пробел чтобы отделить его от инпута и теперь Input отображает таким образом, что пользователь понятно, что сюда надо ввести имя до доли ниже мы можем расположить ещё один элемент Input их может быть несколько форме например Last name. Что значит фамилия по-английски, а не отобразилось в строчку и для того чтобы расположить их один под одним. Давайте их оба расположенным в. ТГП теперь я не отображается друг под другом далее мы можем разместить ещё один Input Element например персон который часто располагают на веб-страницах все эти элементы сейчас степом текст который по умолчанию используется для Input Element. А если мы его явно то он будет выглядеть вот так вот Type и текст если мы сохраним сейчас обновим страницу то ничего не изменится потому, что типа по умолчанию установлен элемента Input. Давайте добавим для остальных элементов Input тоже — это тип явно, а точнее не для остальных, а для гласные, а для пароля. Давай добавим тип кроссворд есть такой тип для пароля специальный и теперь если мы будем. Давайте обновим страницу если мы вводим текст в пароле в поле пароль, а то отображаются точки чтобы пароль не было мы можем посмотреть какие типы инпутов используются в HTML документах на сайте N найти введён в поисковике mdn Input Type перейдем по ссылке. Давайте развернем страницу для удобства просмотра тут есть описание, а под ним атрибуты и в атрибутах указывается довольно-таки большое количество типов reboot of time do которые можно использовать ну. Давайте попробуем использовать. Некоторые из этих типов инпутов например checkbox. Давайте используем. Давайте оставим ещё один элемент i-type напишем checkbox. Давайте посмотрим как отразится на экране — это его видите. Появляется такой квадратный checkbox в котором можно устанавливать галочку да например мы здесь можем написать оставаться залогиниться на сайте до стоит Log In и теперь пользователь может выбирать оставаться ему залогинен постоянно на сайте или нет при помощи этого checkbox. А и. Давайте теперь рассмотрим следующий тип. Давайте посмотрим, что у нас тут есть давайте к примеру радио. Есть такая кнопка радиокнопка. Давайте сохраним и посмотрим и оно отображается похожая на checkbox её тоже можно выбирать, но есть, а над тем, что если расположено несколько потому, что мы можем выбрать одну какую-то из них. Например если мы тут укажем пол мужской или женский mail. Это мужской по-английски и фимейл — это женский. Давайте 2 радио кнопку радиобаттон расположен фимейл напишем сохраним и теперь отображается — это таким образом в данный момент мы можем выбрать. Оби опции для того чтобы мы могли выбирать только одну из двух до наших 2 радиокнопок нам нужно указать, что эти два элемента Ready принадлежат одной группе. Нам нужно в этих радио элементах указать ещё один атрибут name и например. Здесь указать. Секс — это пол по-английски и. Здесь также нам секс и теперь если мы обновим, что вы видите мы можем выбрать только одну опцию из этих двух таких функций может быть несколько в одной группе с названием зависимости от логики которые мы хотим добавить на нашу веб-страницу также мы можем использовать например ещё один тип инпут — это Color есть тип выбора цвета и здесь напишем всё Favorite Color выберите ваш любимый цвет. Давайте сохраним обновим. И вот так вот отображается этот Input Element Color и здесь мы можем выбирать цвет в этом кругу мы можем использовать все эти Input Element и без. Форма Без формы точнее без HTML элементов формы если мы уберем его и сохраним обновим страницу мы посмотрим. Давайте вся функциональность работает как и раньше то есть ничего не изменилось зачем же нам элемент форма подумаете вы до. Для чего же он нам нужен вернем его назад и я вам объясню он нужен для того чтобы объединить все эти элементы Input которые польза вводят какую-то информацию в одну группу и далее мы можем указать ещё один Input Element кнопку которая мы будем отправлять все эти данные её можно указать при помощи Input элемента с типом сабмит. Что значит отправить по-английски и здесь. Давайте напишем сабмит Data или дата данные вот эта кнопочка она по умолчанию отображается с отправить надписи и при нажатии вы видите обновляется страница то есть данные отправляются все данные которые мы вводим польза у которой пользователь вводит или мы в данный момент затем отправляются куда же. Они питаются и каким образом мы узнаем в следующей лекции.

0 комментариев
0

Читайте также