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

Автор Denis Lisitsin
Программирование с нуля   с чего начать? Web разработка  Урок 18 Html5  Формы

html5 добавил многофункциональности в Element форум форма конкретно элементы формы Input давайте рассмотрим.

Некоторые из них создадим простой Element форум который можно создавали и в нём Element input степом текст пример для начала и разместим здесь атрибут placeholder мы его уже с вами использовали Input Text к примеру напишем в placeholder значение видите какой-то текст здесь сохраним обновим страницу и этот placeholder появляется здесь если начинать вводить какой-то текст внутри Input, а то этот placeholder исчезает мы уже с вами — это изучали, но я хочу обратить. Ваше внимание, что — это фича — это возможность появилась именно в html5. Давайте поместим этот Input Element параграф.

И следующий элемент.

Мы тоже будем помещать в параграф чтобы они размещались. С новой строки с копируем ставим следующий наберём Holder исследующая атрибут который появился в 405 это. Автофокус и если вы используете более строгую версия html5 — это HTML. Тут нужно указывать значение автофокус равен автофокус если мы сохраним вы видите фокусируется сразу на этом элементе то есть мы можем начинать вводить здесь текст в простом же html5 можно использовать автофокус просто без значения если сохраним обновим вы видите он также автофокусировка происходит также. Давайте с копируем и создадим ещё один Input Element убираем атрибут автофокус и запишем атрибуты. Реклама в которой мы с вами уже изучали и он означает, что если мы перед отправкой формы незаполненным этот элемент Tor Browser на, что мы должны заполнить этот Input Element давайте для этого создадим Element форум то есть с одним простите и значение сабмит пусть будет на этой кнопки и теперь если мы попробуем отправить браузер подсказывать. Заполните — это поле так как у него установлен атрибут рекламы также мы уже с вами изучали элемент имейл он тоже появился в html5 если мы начнём вводить какой-то текст и попробуем отправить его во-первых надо заполнить — это поле. А во-вторых нам подсказывает браузер, что адрес должен держать собачку давайте я подписываю элементы все инпуты чтобы было ясно, что к чему относится да сохраним обновим страницу следующие атрибуты Input. А это. Пётр он указывается вот таким образом пишется патрон из значение мы пишем. Например если мы хотим использовать только одну — это делается так вот указывается квадратные скобки и 0.9. Давайте обновим если мы ведем одну цифру то будет всё в порядке если же вводим второе. Давайте запомним эти поля то у нас тут в адресе всё правильно написано, но тут надо убрать емейл поставить текст чтобы она ещё не подсказывала нам, что нужно собачку поставить выведите введите данные в указанном формате этот формат не подходит подходит формат с одной цифрой, а мы можем перейти на сайт html5 питерс html5 pattern types. Простите он есть вот тут отдельный сайт на котором описаны самые разнообразные которые можно использовать в HTML I без Java скрипта валидировать вашей инпута ещё одна крутая фича которую мы можем использовать в html5 без использования языка Java Script — это autocomplete автозаполнение пользуется — это следующим образом. Давайте запишем параграф запишем тут autocomplete едалия нам надо записать следующее HTML Element Data list список данных далее мы указываем этого Data листа списка данных к примеру если мы хотим здесь расположить цвета можно назвать дадим. Дайте Мой ID Color Colors и внутри этого списка нужно указать опции то есть сами цвета. Давайте Скопируй этот элемент и вставлю ещё несколько пусть будет 4 4 достаточно красный оранжевый жёлтый зелёный пусть будет и. Дали здесь в параграфе в этом мы можем указать элемент Input типа текст и далее указать атрибут лист и значение пишем — это нашего листа Colors данном случае если мы сохраним и обновить страницу. Появляется такой input нажимать внутри инпута выдаётся подсказка. Какие элементы присутствуют в этом списке и если начинать набирать то вы видите подсказывать нужный цвет и также связывание Input элемента который находится в не формы мы с вами — это уже рассматривали тоже появилась в 5. То есть если мы в форме. Давайте нашей дадим. Аида пусть будет майфон моя форма. И если мы разместим какой-то Input Element вне формы снаружи неё. То есть если мы укажем здесь атрибут форма и — это наши формы то при нажатии сабмит при отправке данных будут отправлены и данные из этого Input элемента которые находятся внутри, а снаружи.

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

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