Содержание

Формы в HTML5 | WebReference

Пока нам удалось создать несколько интересных версий сайта. Мы еще не охватили формы, в которых пользователи могут вводить данные. Формы широко используются по всему Интернету: поисковые системы вроде Google или Bing, поля статуса в Facebook, редактор писем в Gmail позволяют набирать или отправлять информацию.

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

Теперь выберем отдельные компоненты, которые составляют форму. Мы будем использовать выделение одинаковым цветом для элементов, выполняющих аналогичные функции.

Как видите, синий цвет указывает на имена или описание каждого поля. Зелёные элементы показывают места, где вы можете ввести однострочный текст. Оранжевая область позволяет вводить длинные куски текста, а фиолетовый цвет используется для кнопки отправки формы. Для каждой группы мы будем использовать один и тот же тег.

Для имен задействуем <label>. Для коротких полей — <input type=»text»>. Для больших текстов будем использовать <textarea>. Кнопки сделаны с помощью <input type=»submit»>. Они являются наиболее популярными элементами HTML, которые применяются для построения форм на сайтах. Как всегда, мы начинаем с чистого шаблона HTML, а затем добавляем больше элементов.

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Форма</title>
    <link rel="stylesheet" href="main.css">
  </head>
  <body>
  </body>
</html>

Мы должны включить соответствующий тег, который говорит браузеру: «Эй, форма начинается здесь!». Это очень похоже на тег <article> для указания, откуда начинать статью. В HTML мы используем тег <form> в качестве элемента формы.

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Форма</title>
    <link rel="stylesheet" href="main.css">
  </head>
  <body>
    <form>
    </form>
  </body>
</html>

Теперь мы хотим добавить первое описание: «Ваше имя». Начиная отсюда мы будем рассматривать фрагменты кода, которые содержатся в разделе <form>, потому что остальная часть HTML уже хорошо вам известна.

<form>
  <label for="nickname">Ваше имя:</label>
  <input type="text" name="nickname">
</form>

Здесь у нас есть элемент <label>, который описывает имя и элемент <input> для ввода текста. Тег <input> содержит три атрибута: type со значением text, name со значением nickname и id также со значением nickname. Значение атрибута type означает, что это короткое текстовое поле.

Ниже показано, как это поле выглядит для таких типов полей.

Вы будете использовать в коде <input type=»text»> для указания, что пользователь может набирать текст в этом поле. Обратите внимание, что текстовые поля могут быть оформлены с помощью CSS. Мы можем изменить рамку, ширину или расстояние между текстом и границей текстового поля. Грубый пример показан ниже.

Атрибут name используется для именования каждого поля. Это полезно, когда вы посылаете форму на сервер, помогает определить, какое значение из какого поля приходит.

Отметим также взаимосвязь между значением id и значением атрибута for атрибута в <label>.

<label for="nickname">Ваше имя:</label> <input type="text" name="nickname">

В атрибуте for вы должны использовать идентификатор поля, описание которого находится в <label>.

Давайте сделаем другую форму, теперь для поля email.

<form>
  <label for="nickname">Ваше имя:</label>
  <input type="text" name="nickname">
  <label for="user-email">Ваш e-mail:</label>
  <input type="email" name="user-email">
</form>

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

Следующим полем для добавления является место для комментария. Для длинных текстов мы используем тег <textarea>.

<form>
  <label for="nickname">Ваше имя:</label>
  <input type="text" name="nickname">
  <label for="user-email">Ваш e-mail:</label>
  <input type="email" name="user-email">
  <label for="content">Содержание:</label>
  <textarea rows="10" cols="50" name="content" ></textarea>
</form>

Обратите внимание, что мы использовали два новых атрибута: rows и cols. Атрибут rows применяется для установки количества строк текста, которые могут быть введены в поле, пока не появится полоса прокрутки. cols применяется для определения количества символов в каждой строке. Попробуйте самостоятельно изменить значения и посмотреть, как всё поле расширяется или сжимается соответственно.

Последнее, что нам нужно добавить, это кнопка для отправки формы.

<form>
  <label for="nickname">Ваше имя:</label>
  <input type="text" name="nickname">
  <label for="user-email">Ваш e-mail:</label>
  <input type="email" name="user-email">
  <label for="content">Содержание:</label>
  <textarea rows="10" cols="50"  name="content" ></textarea>
  <input type="submit" value="Добавить">
</form>

Элемент <input> содержит атрибут type равный submit. То что вы напишите в атрибуте value будет отображаться как текст на кнопке.

Наш код для формы теперь выглядит следующим образом:

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Форма</title>
    <link rel="stylesheet" href="main.css">
  </head>
  <body>
    <form>
      <label for="nickname">Ваше имя:</label>
      <input type="text" name="nickname">
      <label for="user-email">Ваш e-mail:</label>
      <input type="email" name="user-email">
      <label for="content">Содержание:</label>
      <textarea rows="10" cols="50" name="content"></textarea>
      <input type="submit" value="Добавить">
    </form>
  </body>
</html>

Наш браузер отображает это так.

Выглядит не очень хорошо. В следующей главе мы выясним, как это исправить.

Автор и редакторы

Автор: Дамиан Вельгошик

Последнее изменение: 11.08.2018

Редакторы: Влад Мержевич

HTML5 | Элементы форм

Элементы форм

Последнее обновление: 08.04.2016

Формы состоят из определенного количества элементов ввода. Все элементы ввода помещаются между тегами <form> и </form>

Наиболее распространенным элементом ввода является элемент input. Однако реальное действие этого элемента зависит от того, какое значение установлено у его атрибута type. А он может принимать следующие значения:

  • text: обычное текстовое поле

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

  • radio: радиокнопка или переключатель. Из группы радиокнопок можно выбрать только одну

  • checkbox: элемент флажок, который может находиться в отмеченном или неотмеченном состоянии

  • hidden: скрытое поле

  • submit: кнопка отправки формы

  • color: поле для ввода цвета

  • date: поле для ввода даты

  • datetime: поле для ввода даты и времени с учетом часового пояса

  • datetime-local: поле для ввода даты и времени без учета часового пояса

  • email: поле для ввода адреса электронной почты

  • month: поле для ввода года и месяца

  • number: поле для ввода чисел

  • range: ползунок для выбора числа из некоторого диапазона

  • tel: поле для ввода телефона

  • time: поле для ввода времени

  • week: поле для ввода года и недели

  • url: поле для ввода адреса url

  • file: поле для выбора отправляемого файла

  • image: создает кнопку в виде картинки

Кроме элемента input в различных модификациях есть еще небольшой набор элементов, которые также можно использовать на форме:

  • button: создает кнопку

  • select: выпадающий список

  • label: создает метку, которая отображается рядом с полем ввода

  • textarea: многострочное текстовое поле

Атрибуты name и value

У всех элементов ввода можно установить атрибуты name и value. Эти атрибуты имеют важное значение. По атрибуту name мы можем идентифицировать поле ввода, а атрибут value позволяет установить значение поля ввода. Например:


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Формы в HTML5</title>
	</head>
	<body>
		<form method="get" action="index.html">
			<input type="text" name="login" value="Tom"/>
			<input type="password" name="password"/>
			<input type="submit" value="Войти" />
		</form>
	</body>
</html>

Здесь текстовое поле имеет значение «Tom» (как указано в атрибуте value), поэтому при загрузке веб-страницы в этом поле мы увидим данный текст.

Поскольку методом отправки данных формы является метод «get», то данные будут отправляться через строку запроса. Так как нам в данном случае не важно, как данные будут приниматься, не важен сервер, который получает данные, поэтому в качестве адреса я установил ту же самую страницу — то есть файл index.html. И при отправке мы сможем увидеть введенные данные в строке запроса:

В строке запроса нас интересует следующий кусочек:

login=Tom&password=qwerty

При отправке формы браузер соединяет все данные в набор пар «ключ-значение». В нашем случае две таких пары: login=Tom и password=qwerty. Ключом в этих парах выступает название поля ввода, которое определяется атрибутом name, а значением — собственно то значение, которое введено в поле ввода (или значение атрибута value).

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

Формы в HTML5

 

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

Обратите внимание, что на текущий момент не все новые элементы поддерживаются современными браузерами. Рекомендуется смотреть примеры в браузере Google Chrome

Новые типы полей ввода

Color

<input name=»color» type=»color»/>

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

Date

<input name=»date» type=»date»/>

Поле Date позволит вам выбрать дату из раскрывающегося списка — думаю, Вы часто видели подобные элементы на страницах, когда, например, пытались заказать номер на сайте отеля.

Date-time

<input name=»departure-day-time» type=»date-time»/>

Если вы хотите, чтобы пользователь выбрал одновременно не только дату, но и время, например, для указания предпочитаемого рейса, то «date-time» это тот тип поля, который лучше всего подойдет.

Datetime-local

<input name=»arrival-time» type=»datetime-local»/>

Этот тип поля точно такой же как «date-time», но он предоставляет вам время в локальной временной зоне.

Email

<input type=»email» name=»email»/>

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

Month

<input name=»expiry» type=»month»/>

Это поле ввода позволит вам выбрать месяц года, это очень удобно, например, для ввода информации о кредитной карте в форме заказа.

Number

<input type=»number» min=»48″ max=»84″ step=»0.5″ value=»48″ name=»height-inches»/>

Поле Number, как вы могли догадаться, предназначено только для ввода чисел. Вы можете указать разрешенный диапозон для чисел, если вы укажете атрибуты min и max как в приведенном выше примере, а также указать шаг в этом диапазоне.

Range

<input type=»range» min=»1″ max=»100″ value=»0″/>

В поле Range браузер выводит ползунок, который пользователь может перетаскивать влево-вправо. Можно указать минимальное и максимальное значение, а также значение по умолчанию.

Tel

<input type=»tel» name=»tel»/>

Этот тип поля очень удобно использовать в смартфонах, так как оно вызывает цифровую клавиатуру телефона, чтобы можно было ввести номер телефона максимально просто. Оно, однако, не проверяет правильность ввода, в отличие от Email или URL.

Time

<input name=»start-time» type=»time»/>

Этот тип ввода позволит пользователям выбирать только определенное время, например, часы и минуты.

Url

<input type=»url» name=»url»/>

Это поле будет проверять на правильность ввода URL-адреса, а на смартфоне откроется URL-клавиатура.

Week

<input name=»conference » type=»week»/>

Это поле позволяет пользователю возможность выбрать определенную неделю.

Новые атрибуты форм

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

Autocomplete

<input type=»text» name=»fullname» autocomplete=»on»/>

Автозаполнение — этот атрибут помогает пользователям заполнить поле на основе предыдущих записей, он может либо сэкономить время, либо вызвать проблемы, так что аккуратнее с этим.

Autofocus

<input type=»text» name=»username» autofocus/>

Этот атрибут ставит курсор в нужное поле при загрузке страницы, так что пользователь может сразу начать печатать.

Form

<input type=»button» name=»filter» form=»filter/>

Form связывает поле с формой по идентификатору, поэтому элемент не обязательно должен быть в пределах соответствующей формы, чтобы быть её частью.

Formaction

<input type=»submit» value=»Send» formaction=»email.php»/>

Указывает обработчик формы.

Formenctype

<input type=»submit» value=»Send» formenctype=»application/x-www-form-urlencoded»/>

Устанавливает способ кодирования данных формы при их отправке на сервер.

Formnovalidate

<form action=»login.php»>
   <label for=»name»>Полное имя:</label>
   <input type=»text» name=»name» value=»Иванов Иван»/>
   <input type=»submit» formnovalidate value=»Send»/>
</form>

Этот атрибут указывает, что форму не нужно проверять при отправке данных. Атрибут может быть установлен для любого типа поля.

Formmethod

<input type=»submit» value=»Send» formmethod=»POST»/>

Определяет, какой метод HTTP использовать, чтобы отправить форму, например, POST или GET.

Formtarget

<input type=»submit» value=»Send» formtarget=»_self»/>

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

List & Multiple

<label>Мой любимый цвет:
<datalist>
   <select name=»colours»>
      <option value=»Красный»>Красный</option>
      <option value=»Желтый»>Желтый</option>
      <option value=»Зеленый»>Зеленый</option>
      <!— … —>
   </select>
Если другой, укажите:
</datalist>
   <input type=»text» name=»colour» list=»colours» multiple/>
</label>

Тег <datalist> определяет список предопределенных вариантов элемента <input>, которые можно выбирать при наборе в текстовом поле.

Novalidate

<form action=»login.php» novalidate>
   <label for=»name»>Full name:</label>
   <input type=»text» name=»name» value=»John Doe»/>
   <input type=»submit» value=»Send»/>
</form>

Указывает, что форма не должна быть провалидирована при её отправке на сервер, этот атрибут устанавливается только на элемент формы.

Pattern

<input pattern=»[0-9]{5}» name=»zip» type=»text» title=»Zipcode»/>

Pattern позволяет определить регулярное выражение в HTML-разметке поля, а не в JS.

Placeholder

<input type=» password » name=»password» placeholder=»Введите ваш пароль»/>

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

Required

<input type=»text» name=»username» required/>

Атрибут ‘required’ делает поле обязательным к заполнению и форма не может быть отправлена, пока требуемые данные не будут введены. И нет необходимости использовать JS.

Демонстрация

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


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

Формы в HTML5: CSS | HTML/xHTML

Содержание цикла статей «Формы в HTML 5»:

Часть 1 Формы в HTML5: Разметка
Часть 2 Формы в HTML5: CSS
Часть 3 Формы в HTML5: JavaScript и API для принудительной валидации форм

Это вторая статья из серии статей в трех частях «Формы в HTML5». В ней мы поговорим о стилизации, или дизайне, форм. А если говорить более точно, то о селекторах псевдо-классов, которые можно использовать для настройки полей ввода в различных состояниях.

Если же вы не читали часть первую, советую все — таки ее изучить, чтобы уяснить основные моменты концепции разметки.

Возможно, вы замечали моменты, когда браузеры применяют форматирование по-умолчанию. Например, большинство браузеров закругляют углы у поля search и добавляют небольшой фоновый градиент, который смотрится нелепо посреди «плоского» дизайна.

Для того чтобы этого не происходило, используйте CSS-свойство appearance: none; свойство, требующее использования некоторых префиксов.

Но, думаю, вы ожидаете этого совета, используйте его с осторожностью, так как можете поплатиться некоторыми элементами — checkbox и radio buttons в Google Chrome исчезают!

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

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  appearance: none;
  outline: 0;
  box-shadow: none;
}

Заметьте, я также обнулил свойства outline и box-shadow, чтобы убрать уродливую тень голубого цвета с окошка ввода и ошибку форматирования во всех браузерах.

Свойство appearance задокументировано на CSS-Tricks, но оно видоизменяется до сих пор.

Селектор :focus поддерживается с версии CSS 2.1 и устанавливает стилизацию поля ввода, используемого на данный момент. Для примера:

input:focus,
textarea:focus,
select:focus {
  background-color: #eef;
}
:checked

Селектор :checked применяется к отмеченным checkboxes и radio buttons, например:

<input type="checkbox" name="test" />
<label for="test">check me</label>
input:checked ~ label {
    font-weight: bold;
}

Здесь нет соответствия для ‘:unchecked’ переключателя, но он нам и не нужен. Просто создаём стиль по-умолчанию, а затем определяем стиль для состояния :checked. Или же можно использовать :not(:checked).

Технически, селектор :indeterminate еще не отражен в спецификации, однако уже упомянут там. Согласно ей, он представляет собой флажок или переключатель, который «ни отмечен, ни не-отмечен».

Необычен он тем, что работает только тогда, когда вы применяете :indeterminate к чекбоксу с помощью JavaScript, например:

document.getElementById("mycheckbox").indeterminate = true;

Эффекта на свойстве .checked это не возымеет, так как оно может быть только true или false.

Есть несколько ситуаций, когда селектор :indeterminate может оказаться полезен. В случае, когда есть группа флажков, можно сделать флажок — «отметить все», который ставит или снимает галочки сразу для всей группы.

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

:required применяет стиль к полям ввода, у которых есть атрибут required.

:optional применяет стиль к полям ввода, которые НЕ имеют атрибута required. Не знаю, зачем добавили этот селектор, когда :not(:required) делает тоже самое?!

:valid применяет стиль ко всем полям ввода, которые заполнены корректно на данный момент.

Соответственно, :invalid (или :not(:valid)) применяет стиль к полям, которые заполнены не корректно, к примеру:

input:invalid {
    border-color: #900;
}

Поля ввода типа number и range содержат корректные значения между атрибутами min и max, значения которых в свою очередь меняются с шагом, равным значению атрибута step.

Очевидно, что довольно трудно сделать так, чтобы значение слайдера оказалось вне его допустимого диапазона, но…

:out-of-range предназначается для полей, содержащих недопустимые значения диапазонов.

К полям ввода с атрибутом disabled можно обратится с помощью псевдо-класса :disabled, к примеру так:

input:disabled {
    color: #ccc;
    background-color: #eee;
}

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

Стили к псевдо-классам :required и :invalid будут применяться.

Аналогично, не отключенные поля могут быть выбраны с помощью селектора :enabled (или :not(:disabled)). На практике он вам вряд ли понадобится, так как к не отключенным полям применяется стиль по умолчанию.

К полям с атрибутом readonly можно обратится с селектором :read-only . Помните, что readonly поля будут проверяться и отправляться на сервер, но пользователь изменить значения не сможет.

Стандартные read-write поля могут быть выбраны с помощью :read-write (или :not(:read-only)). Опять же, это не тот селектор, которым вы будете часто пользоваться.

И, наконец, мы подобрались к селектору :default, который применяет стиль к кнопке «Отправить».

К атрибуту placeholder можно применить стиль, используя псевдо-элемент ::placeholder с префиксами разработчика, к примеру:

input::-webkit-input-placeholder { color: #ccc; }
input::-moz-placeholder { color: #ccc; }
input:-ms-input-placeholder { color: #ccc; }
input::placeholder { color: #ccc; }

Селекторы, описанные выше, имеют одинаковую специфику, потому при определении двух или более стилей, применяемых к одному и тому же полю, будьте внимательны.

К примеру:

input:invalid { color: red; }
input:enabled { color: black; }

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

Используйте простые варианты селекторов и минимум кода. Для примера, пустое :required поле будет являться :invalid, потому вряд ли понадобится применять к нему стили.

При подтверждении формы, первое неверное значение выделяется ошибкой-пузырьком:

Возможность дизайна пузырька зависит от устройства и от браузера. Браузеры Webkit / Blink позволяют использовать нестандартную настройку CSS:

:
::-webkit-validation-bubble { ... }
::-webkit-validation-bubble-arrow { ... }
::-webkit-validation-bubble-message { ... }
::-webkit-validation-bubble-arrow-clipper { ... }

Моя рекомендация: не утруждайте себя попытками. Если вам нужно пользовательское форматирование сообщений об ошибках — вы наверняка захотите использовать пользовательские сообщения. А для этого вам понадобится JavaScript.

Как правило, важные стили и селекторы поддерживаются всеми современными браузерами от IE10 и выше. Некоторые менее полезные, например, in-range, на данный момент поддерживаются только Webkit/Blink.

Старые браузеры будут, к примеру, поддерживать :focus , но стоит позаботиться о JavaScript фол-бэках для более сложных свойств.

Вышеуказанные стили применяются немедленно. Например:

input:invalid {
    border-color: #900;
}

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

Лично я предпочитаю осуществлять проверку на ошибку в поле либо при отправке формы целиком, либо же при смене фокуса. Браузеры не предлагают способа делать это, основываясь только лишь на их возможностях. Вы уже догадались — нужен JavaScript.

К счастью, API в HTML5 предоставляет инструменты, которые позволяют:

  • приостанавливать проверку, пока форма заполняется;
  • использовать пользовательские сообщения об ошибках;
  • обеспечить fall-back дизайн и проверку для старых браузеров;
  • создавать более удобные формы.

Мы рассмотрим эти свойства подробнее в последней статье из этой серии.

РедакцияПеревод статьи «HTML5 Forms: CSS»

обязательные поля, валидация и т.д.

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

Нововведения

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

Новые поля ввода

Появилось очень много новых типов полей. Все они задаются с помощью элемента input с различным type. Некоторые из них:
Type = “email” – с виду это обычное текстовое поле, но на самом деле в него встроена автоматическая валидация. Если браузер не находит знак @, который является основным атрибутом любого email-адреса, то он просто не пропускает такую форму на отправку. Давайте проверим это в последней версии Chrome, где все это отлично поддерживается.

<form> <input type = «text» value = «Введите что-то»> <input type = «email» value = «Введите email»> <input type = «submit» value = «Готово»> </form>

<form>

<input type = «text» value = «Введите что-то»>

<input type = «email» value = «Введите email»>

<input type = «submit» value = «Готово»>

</form>

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

Вот так вот, и отныне никакой валидации с помощью javascript и не нужно. Это относится к тем браузерам, которые поддерживают html5 в должной мере.

Type = “tel” – для ввода номера телефона. В общем-то, в нем нет такой валидации, но интересно, что если заполнять такую форму с мобильных устройств, то при нажатии на нее может изменится раскладка клавиатуры (будут показываться цифры). То же самое происходит и в случае с type = email.

Type = “color” – сюда ничего вводить не нужно. Интересует нас по той причине, что тут можно выбрать цвет, причем сделать это в интуитивно понятной палитре, такой, как в paint. Вот так это выглядит:

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

Конечно, там, где оно не поддерживается, будет выведено обычное поле для текста. В таких браузерах нет смысла выводить его, не будет же пользователь вручную писать, какой он выбирает цвет (а может и будет).

Type = date. Поле для выбора календарной даты. Если оно поддерживается браузером, то появляются очень удобные инструменты, в которых вы можете определить дату, а при клике на треугольничек даже разворачивается календарь.

Собственно, есть такие же поля datetime и datetime-local. Они предназначены для того, чтобы определять в них время (и время с указанием явного часового пояса, соответственно).

Поддержка браузерами

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

В этом плане Google Chrome и Opera подают всем пример, потому что поддерживают абсолютно все новые значения. К сожалению, от них серьезно отстают Mozilla и IE. В Explorer только с десятой версии поддерживаются пару новых полей.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Выбор обязательных полей

Пожалуй, одна из главных возможностей для валидации формы еще на стороне пользователя. Чтобы пометить поле как обязательное к заполнению, ему нужно дописать пустой атрибут required.

В html5 обязательные поля формы достаточно отметить этим атрибутом, никаких скриптов применять не нужно. Если бы это поддерживалось во всех браузерах, то были бы вообще прекрасно.

<input type = «date» required>

<input type = «date» required>

Теперь, если не не выберем дату и попытаемся отправить нашу форму, браузер предупредит, что для начала нужно заполнить поле с датой, потому что оно является обязательным.

Подсказка

Раньше, если какой-то текст нужно было поместить в поле ввода по умолчанию, его туда вписывали с помощью атрибута value. Мы тоже сейчас так сделали. Но есть одна проблема – этот текст пользователю придется самостоятельно стирать, если он хочет написать что-то другое, а это не очень удобно.

Если вместо value написать атрибут placeholder, то текст будет сам исчезать, когда пользователь начнет вводить свое значение. Это более удобно.

Список возможных значений

С помощью тега datalist можно указать список возможных значений для текстового поля. Это реализовывается так:

<input type = «text» placeholder = «Имя» list = «names»> <datalist id = «names»> <option value = «Вася»> <option value = «Миша»> <option value = «Петя»> <option value = «Коля»> </datalist>

<input type = «text» placeholder = «Имя» list = «names»>

<datalist id = «names»>

<option value = «Вася»>

<option value = «Миша»>

<option value = «Петя»>

<option value = «Коля»>

</datalist>

Чтобы привязать поле к листу достаточно в нем записать атрибут list, значением которого будет имя идентификатора. Естественно, нужно не забыть задать сам идентификатор.

Проверяем все в работе. Теперь обладатели данных имен являются счастливчиками – им не придется вручную писать свое имя)))

Также просто осуществить в html5 валидацию формы. Для этого есть атрибут pattern, который можно добавить к любому полю ввода на странице. Он определяет, какие символы допустимо вводить в поле и если что-то нарушено, не пропускает ее отправку.

Описывать сейчас все значения атрибута pattern очень долго. Вы можете сами посмотреть их в справочнике.

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

Атрибуты max и min позволяет задать максимальное и минимальное числовое значение, которое допустимо определять в соответствующем для этого поле. Вот таких возможностей по мелочи очень много, и придуманы они в основном для работы с этими самыми новыми элементами.

Итог

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Верстка. Быстрый старт

Практический курс по верстке адаптивного сайта с нуля!

Смотреть

Формы HTML5 » Энциклопедия HTML5

Новые формы в языке HTML5

В HTML5 у элементов формы, появились дополнительные атрибуты и значения. Задача новых форм HTML5 состоит в том, чтобы облегчить создание скриптов или даже заменить собой некоторые функции, которые ранее использовались лишь при помощи языков программирования.

Тег <form>

Новые атрибуты и их значения в теге form:

  • autocomplete="on/off" — включает/отключает автозаполнение у форм, если в браузере автозаполнение отключено, то атрибут не работает
  • novalidate="novalidate" — отключает встроенную проверку данных, введённых пользователем в поля <input type=»email» /> и <input type=»url» />

Тег <input />

Рассмотрим новые атрибуты HTML5 и их значения в теге input:

autocomplete="on/off" — включает/отключает автозаполнение у тега input, если в браузере автозаполнение отключено, то атрибут работать не будет.

autofocus="autofocus" — установка фокуса на элемент.

form="idNameForm" — связывает тег input, с формой по его атрибуту id, при условии что тег input, находится вне формы.

formaction="URL" — указывает на адрес программы, которая будет обрабатывать данные введённые в тег input, аналогичен атрибуту action=" " у тега form

formenctype=" " — указывает на способ кодировния данных при их отправки на сервер, аналогичен атрибуту enctype=" ", у тега form, имеет следующие значения:
application/x-www-form-urlencoded — не латинские символы кодируются их шестнадцатеричными кодами, пробелы заменяются знаком +, является значением по умолчанию,
multipart/form-data — данные не кодируются,
text/plain — данные не кодируются, но пробелы заменяются знаком +

formmethod="get/post" — указывает каким методом отправить данные, post или get

formnovalidate="formnovalidate" — отключает встроенную проверку данных, аналогичен атрибуту novalidate="novalidate" у тега form

formtarget="имя окна/_blank/_self/_parent/_top" — указывет на окно в которое будет загружаться, результат обработки данных, аналогичен атрибуту target=" " у тега form

list="idName" — указывает на значение идентификатора id тега datalist, в котором находится список вариантов появляющиеся при вводе текста в поле.

max="число" — указывает на максимальное число, которое можно ввести в поле.

min="число" — указывает на минимальное число, которое можно ввести в поле.

multiple="multiple" — позволяет указать несколько e-mail адресов, в поле через запятую, или загрузить несколько файлов.

pattern="шаблон" — позволяет создавать шаблоны, исходя из которых принимается решение о верности или не верности введённых данных, атрибут предназначен для создания полей ввода, для различных типов данных.

placeholder="текст" — указывает на строку, которая находтся в текстовом поле, она исчезает когда пользователь начинает вводить данные.

readonly="readonly" — указывает на текстовое поле, в которое пользователь не может ввести данные.

required="required" — указывает на текстовое поле, которое обязательно должно быть заполненным, если пользователь попытается отправить данные не заполнив это поле, то браузер выдаст об этом сообщение ввиде всплывающей подсказки.

step=" " — указывает на шаг, при введении чисел.

Атрибут type=» «

У атрибута type=" " в языке HTML5, добавилось следующие значения:

type="color" — создаёт виджет выбора цвета.

type="date" — создаёт поле для ввода даты, при помощи виджета календаря (далее ВК).

type="datetime" — создаёт поле для ввода даты и времени, (ВК)

type="datetime-local" — создаёт поле для ввода даты и местного времени, (ВК)

type="email" — создаёт поле для ввода e-mail

type="month" — создаёт поле для ввода месяца, (ВК).

type="number" — создаёт поле для ввода числа.

type="range" — создаёт ползунок.

type="search" — создаёт поисковое поле.

type="tel" — создаёт поле для ввода телефонного номера.

type="time" — создаёт поле для ввода даты и времени, (ВК), без часового пояса.

type="url" — создаёт поле для ввода url.

type="week" — создаёт поле для ввода недели (ВК).

Тег <keygen>

Теги <keygen> </keygen> используются для шифровки и расшифровки данных.

Тег <output>

Теги <output> </output> создают область для вывода работы скрипта.

Читать далее: Новые технологии HTML5

Новые элементы форм | Учебник HTML5

Новые элементы форм.

Мы изучили появившиеся в HTML5 новые типы ввода, и нам осталось познакомиться с новыми элементами HTML, улучшающими и расширяющими функциональность форм.

Элемент <datalist>

Элемент <datalist> используется только в формах. Он позволяет заранее построить список пунктов, которые в дальнейшем будут предлагаться в качестве вариантов заполнения полей ввода (для этого нужно добавить атрибут list) (листинг 6.21).

Листинг 6.21.Построение списка

<datalist>

<option value=»123123123″ label=»Phone 1″>

<option value=»456456456″ label=»Phone 2″>

</datalist>

После того как вы объявили элемент <datalist>, остается лишь сослаться на этот список пунктов из элемента <input>, используя атрибут list.

Листинг 6.22. Список возможных значений предлагается с помощью атрибута list

<input type=»tel» name=»myphone» list=»mydata»>

В элементе из листинга 6.22 отображается список возможных значений, из которых пользователь может выбрать подходящее.

В настоящее время элемент <datalist> реализован только в браузерах Opera и Firefox Beta.

Элемент <progress>

Этот элемент не обязательно использовать только с формами, но поскольку он иллюстрирует прогресс выполнения задачи, а задачи чаще всего инициируются и обрабатываются с помощью форм, его можно включить в группу элементов форм.

Элемент <progress> принимает два атрибута, устанавливающие его статус и лимиты. Атрибут value указывает, какая доля задачи уже выполнена, а атрибут max содержит значение, достижение которого соответствует завершению задачи.

Элемент <meter>

Аналогично элементу <progress>, элемент <meter> используется для отображения шкалы, однако это не шкала выполнения задачи. Данный элемент предназначен для отображения известного диапазона, например, использования пропускной способности.

С элементом <meter> связаны несколько атрибутов: min и max устанавливают границы диапазона, value определяет измеряемое значение, а low, high и optimum используются для сегментирования диапазона и определения позиции, которая будет соответствовать оптимальному значению.

Элемент <output>

Этот элемент представляет собой результат вычисления. Обычно он используется для отображения результатов обработки каких-то значений элементами формы. Атрибут for позволяет связать элемент <output> с исходными элементами, участвующими в расчетах, однако чаще всего ссылки на элементы создаются и модифицируются в коде JavaScript. Синтаксис данного элемента таков: <output>значение</output>.

Вам также могут быть интересны следующие статьи:

HTMLFormElement — веб-API | MDN

Этот интерфейс также наследует свойства своего родителя, HTMLElement .

HTMLFormElement.elements Только чтение

A HTMLFormControlsCollection , содержащий все элементы управления формы, принадлежащие этому элементу формы.

HTMLFormElement.length Только чтение

Длинный , отражающий количество элементов управления в форме.

HTMLFormElement.name

A DOMString , отражающий значение HTML-атрибута формы name , содержащего имя формы.

HTMLFormElement.method

DOMString , отражающий значение HTML-атрибута формы method , указывающий метод HTTP, используемый для отправки формы. Можно установить только указанные значения.

HTMLFormElement.цель

DOMString , отражающий значение HTML-атрибута target формы, указывающий, где отображать результаты, полученные при отправке формы.

HTMLFormElement.action

DOMString , отражающий значение HTML-атрибута формы action , содержащий URI программы, которая обрабатывает информацию, отправленную формой.

HTMLFormElement.кодировка или HTMLFormElement.enctype

DOMString , отражающий значение HTML-атрибута enctype формы, указывающий тип содержимого, которое используется для передачи формы на сервер. Можно установить только указанные значения. Эти два свойства являются синонимами.

HTMLFormElement.acceptCharset

DOMString , отражающий значение HTML-атрибута формы accept-charset , представляющий кодировку символов, которую принимает сервер.

HTMLFormElement.autocomplete

A DOMString , отражающий значение HTML-атрибута формы autocomplete , указывающий, могут ли элементы управления в этой форме автоматически заполнять свои значения браузером.

HTMLFormElement.noValidate

Логическое значение, отражающее значение HTML-атрибута novalidate формы, указывающее, следует ли не проверять форму.

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

Этот интерфейс также наследует методы от своего родителя, HTMLElement .

проверитьдействительность()

Возвращает true , если дочерние элементы управления элемента подлежат проверке ограничений и удовлетворяют этим ограничениям; возвращает false , если некоторые элементы управления не удовлетворяют своим ограничениям.Запускает событие с именем invalid для любого элемента управления, который не удовлетворяет его ограничениям; такие элементы управления считаются недействительными, если событие не отменено. Программист сам решает, как реагировать на false .

достоверность отчета()

Возвращает true , если дочерние элементы управления элемента удовлетворяют их ограничениям проверки. Когда возвращается false , для каждого недопустимого дочернего элемента запускаются отменяемые недопустимые события , и пользователю сообщается о проблемах проверки.

запросОтправить()

Запрашивает, чтобы форма была отправлена ​​с использованием указанной кнопки отправки и ее соответствующей конфигурации.

сброс()

Сбрасывает форму в исходное состояние.

отправить()

Отправляет форму на сервер.

Устаревшие методы

Прослушивайте эти события с помощью addEventListener() или путем назначения прослушивателя событий свойству oneventname этого интерфейса.

данные формы

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

сброс

Событие reset срабатывает при сбросе формы. Также доступно через свойство onreset .

отправить

Событие submit срабатывает при отправке формы.Также доступно через свойство onsubmit .

Получение объекта элемента формы

Чтобы получить объект HTMLFormElement , вы можете использовать селектор CSS с querySelector() , или вы можете получить список всех форм в документе, используя его свойство forms .

Document.forms возвращает массив из объектов HTMLFormElement со списком всех форм на странице. Затем вы можете использовать любой из следующих синтаксисов, чтобы получить индивидуальную форму:

документ.формы[индекс]

Возвращает форму по указанному индексу в массив форм.

документ.формы[id]

Возвращает форму с идентификатором id .

документ.формы[имя]

Возвращает форму, у которой значение атрибута name равно name .

Доступ к элементам формы

Вы можете получить доступ к списку элементов формы, содержащих данные, изучив свойство формы elements .Это возвращает HTMLFormControlsCollection со списком всех элементов ввода пользовательских данных формы, как тех, которые являются потомками

, так и тех, которые стали членами формы, используя их атрибуты формы .

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

Проблемы с именованием элементов

Некоторые имена будут препятствовать доступу JavaScript к свойствам и элементам формы.

Например:

  • будет иметь приоритет над . Это означает, что form.id будет ссылаться не на id формы, а на элемент с именем « id «. Это относится и к любым другим свойствам формы, таким как или .
  • сделает коллекцию из элементов формы недоступной. Ссылка form.elements теперь будет относиться к отдельному элементу.

Во избежание таких проблем с именами элементов:

  • Всегда используйте коллекцию элементов , чтобы избежать неоднозначности между именем элемента и свойством формы.
  • Никогда не используйте « elements » в качестве имени элемента.

Если вы не используете JavaScript, это не вызовет проблем.

Элементы, которые считаются элементами управления формы

Элементы, включенные в HTMLFormElement.elements и HTMLFormElement.length , следующие:

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

Создание нового элемента формы, изменение его атрибутов и отправка:

  const f = документ.СоздатьЭлемент("Форма");
документ.тело.appendChild(f);
f.action = "/cgi-bin/some.cgi";
е.метод = "POST";
е.отправить();
  

Извлечение информации из элемента и установка некоторых его атрибутов:

  
 

Нажмите "Информация", чтобы узнать подробности формы, или "Установить", чтобы изменить эти данные.

<скрипт> функция getFormInfo () { var f = документ.формы["форма"]; var properties = ['элементы', 'длина', 'имя', 'кодировка', 'действие', 'acceptCharset', 'действие', 'энктайп', 'метод', 'цель' ]; var info = properties.map(function(property) { return property + ": " + f[property] }).join("\n"); document.forms["formA"].elements['form-info'].value = информация; } функция setFormInfo(f){ f.action = "другой-url.cgi"; f.name = "другое-имя"; }

Отправить в новое окно:

  

<голова>
<мета-кодировка="utf-8">
Пример отправки формы в новом окне

<тело>

<форма действие="тест.php" цель="_blank">
  

<набор полей> Предпочтения домашних животных

<набор полей> Собственные транспортные средства

Отправка форм и загрузка файлов с помощью XMLHttpRequest

Таблицы BCD загружаются только в браузере

  • Элемент HTML, реализующий этот интерфейс: .

HTMLFormElement.elements — веб-API | МДН

Свойство HTMLFormElement элемента возвращает HTMLFormControlsCollection со списком всех элементов управления формы, содержащихся в элемент .

Самостоятельно вы можете получить только количество элементов управления формы с использованием длины имущество.

Вы можете получить доступ к определенному элементу управления формы в возвращенной коллекции, используя либо индекс или имя элемента или идентификатор атрибуты.

До HTML 5 возвращаемый объект представлял собой HTMLCollection , на котором Основан HTMLFormControlsCollection .

Примечание: Точно так же вы можете получить список всех форм, содержащихся внутри данного документа с использованием форм документа имущество.

Коллекция HTMLFormControlsCollection , содержащая все элементы управления, не относящиеся к изображениям, в форма. Это живая коллекция; если элементы управления формы добавляются или удаляются из формы, эта коллекция будет обновлена, чтобы отразить изменение.

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

Элементы, включенные в HTMLFormElement.elements и HTMLFormElement.length , являются следующими: при обработке форм.

Пример быстрого синтаксиса

В этом примере мы видим, как получить список элементов управления формы, а также как получить доступ к своим членам по индексу и по имени или идентификатору.

  <форма>
  <тип ввода="текст" имя="имя пользователя">
  
  

  
  var inputs = document.getElementById("my-form").elements;
вар inputByIndex = inputs[0];
var inputByName = inputs["имя пользователя"];
  

Доступ к элементам управления формы

В этом примере получается список элементов формы, затем выполняется итерация по списку в поисках элементов типа "текст" так что некоторые форма обработки может быть выполнена на них.

  var inputs = document.getElementById("my-form").elements;


for (i = 0; i < inputs.length; i++) {
  if (inputs[i].nodeName === "INPUT" && inputs[i].type === "text") {
    
    inputs[i].value.toLocaleUpperCase();
  }
}
  

Отключение элементов управления формы

  var inputs = document.getElementById("my-form").elements;


for (i = 0; i < inputs.length; i++) {
  
  inputs[i].setAttribute("отключено", "");
}
  

Таблицы BCD загружаются только в браузере

Введение в формы HTML5 | HTMLПолезности.com

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

Что такое формы HTML5?

Формы существовали до HTML5, но процесс обработки ввода был немного громоздким.HTML5 привнес новые функции в формы и обеспечил единообразие для приема ввода во всех приложениях. Формы HTML5 также требуют меньше времени в процессе разработки. Теперь веб-разработчики могут не только создавать визуально привлекательные формы, но и собирать проверенные и ценные данные с помощью настраиваемых форм HTML5.

Новые типы ввода, представленные в HTML5

HTML5 предлагает несколько новых типов ввода, которые помогают пользователям, предоставляя собственный ввод и упрощая проверку данных без использования кода JavaScript.В следующей таблице перечислены новые типы ввода в HTML5:

.

Преимущества форм HTML5 по сравнению с простыми формами HTML

Встроенная проверка форм HTML5 выводит семантическую разметку на новый уровень. Он обеспечивает удобство написания сценариев и стилей, что было утомительной задачей в более ранних версиях HTML.

Вы по-прежнему можете использовать формы HTML5, даже если в браузере отключен Javascript.

Читать: 5 отличных инструментов для создания форм HTML5.

Как создать форму HTML5

Давайте поймем, как работают формы HTML5, рассмотрев практический пример создания формы регистрации пользователя в HTML5.

Мы собираемся научиться создавать простую регистрационную форму HTML5. Для начала давайте начнем с пустой страницы HTML-шаблона, как показано в следующем коде:

.
 



<голова>

<мета-кодировка="utf-8">

 Учебное пособие по формам HTML5 





<тело>



 

Нам нужно использовать тег , чтобы сообщить браузеру, что форма начинается здесь:

 



<голова>

<мета-кодировка="utf-8">

 Учебное пособие по формам HTML5 





<тело>

<форма>





 

С этого момента мы будем рассматривать только код, который находится внутри тега .

Имея это в виду, давайте создадим короткую и простую форму регистрации пользователя, используя тег form , и создадим поля ввода, такие как Name и Email . Чтобы сделать поле « name » обязательным, добавьте в это поле атрибут required .

Для адреса электронной почты вы можете проверить правильность адреса электронной почты, добавив атрибут электронной почты, который будет гарантировать, что введенный текст будет действительным адресом электронной почты, в противном случае будет выдано сообщение об ошибке. Также добавьте обязательный атрибут , чтобы сделать его обязательным полем:

 <форма действие="" метод="">



Регистрационные данные







….

 

Вы также можете использовать атрибут автофокуса для автоматической фокусировки на поле ввода « имя » при загрузке страницы формы:

  

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

 

 

Пользователи могут использовать ранее введенные данные, выбрав их в опции. Атрибут autocompete сохраняет данные в списке данных и позволяет пользователю выбирать введенные ранее входные значения. Таким образом, пользователь может просто выбрать значение и использовать его в поле ввода.Обратите внимание, что автозаполнение должно быть отключено в полях (например, пароль), чтобы избежать доступа без аутентификации.

Атрибут автозаполнения можно применить к определенному полю. Если вы хотите применить его ко всем дочерним элементам (вводу) формы, примените его непосредственно к элементу формы.

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

Обратите внимание, что мы использовали два новых атрибута: « строк » и « столбцов ».Атрибут ‘ rows ’ описывает количество строк текста, которые появляются в поле, пока не появится полоса прокрутки. С другой стороны, ‘ cols ’ определяет количество символов в каждой строке.

Вы можете попробовать и изменить значения строк и столбцов и посмотреть, как textarea сжимается и расширяется соответственно.

Теперь у нас есть окончательная форма. Полный код будет выглядеть следующим образом:

 



<голова>

<мета-кодировка="utf-8">

Учебник по формам HTML5





<тело>

<форма действие="" метод="">

Регистрационные данные

<дел>



<дел>
<дел>