HTML5 — веб-формы 2.0

Web Forms 2.0 — это расширение возможностей форм, присутствующих в HTML4. Элементы и атрибуты форм в HTML5 обеспечивают большую степень семантической разметки, чем HTML4, и освобождают нас от множества утомительных скриптов и стилей, которые требовались в HTML4.

Элемент <input> в HTML4

Элементы ввода HTML4 используют атрибут type для указания типа данных. HTML4 предоставляет следующие типы:

текст

Текстовое поле произвольной формы, номинально без разрывов строк.

пароль

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

флажок

Набор из нуля или более значений из предварительно определенного списка.

радио

Перечисляемое значение.

Отправить

Свободная форма кнопки инициирует отправку формы.

файл

Произвольный файл с типом MIME и, необязательно, именем файла.

образ

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

скрытый

Произвольная строка, которая обычно не отображается пользователю.

Выбрать

Перечисляемое значение, очень похожее на тип радио.

TextArea

Текстовое поле произвольной формы, номинально без ограничений на разрыв строки.

кнопка

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

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

... 
<form action = "http://example.com/cgiscript.pl" method = "post">  
   <p> 
      <label for = "firstname">first name: </label> 
      <input type = "text" id = "firstname"><br /> 
   
      <label for = "lastname">last name: </label> 
      <input type = "text" id = "lastname"><br /> 
   
      <label for = "email">email: </label> 
      <input type = "text" id = "email"><br> 
   
      <input type = "radio" name = "sex" value = "male"> Male<br> 
      <input type = "radio" name = "sex" value = "female"> Female<br> 
      <input type = "submit" value = "send"> <input type = "reset"> 
   </p> 
</form> 
 ... 

Элемент <input> в HTML5

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

ПРИМЕЧАНИЕ. — Попробуйте все следующие примеры, используя последнюю версию браузера Opera .

Дата и время (год, месяц, день, час, минута, секунда, доли секунды), закодированные в соответствии с ISO 8601 с часовым поясом, установленным на UTC.

Дата и время (год, месяц, день, час, минута, секунда, доли секунды), закодированные в соответствии с ISO 8601, без информации о часовом поясе.

Дата (год, месяц, день), закодированная в соответствии с ISO 8601.

Дата, состоящая из года и месяца, закодированных в соответствии с ISO 8601.

Дата, состоящая из года и номера недели, закодированных в соответствии с ISO 8601.

Время (часы, минуты, секунды, доли секунды), закодированное в соответствии с ISO 8601.

Он принимает только числовое значение. Атрибут step указывает точность, по умолчанию 1.

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

Он принимает только значение электронной почты. Этот тип используется для полей ввода, которые должны содержать адрес электронной почты. Если вы попытаетесь отправить простой текст, вам будет необходимо ввести только адрес электронной почты в формате email@example.com.

Он принимает только значение URL. Этот тип используется для полей ввода, которые должны содержать URL-адрес. Если вы попытаетесь отправить простой текст, вам будет необходимо ввести только URL-адрес в формате http://www.example.com или в формате http://example.com.

Элемент <output>

HTML5 представил новый элемент <output>, который используется для представления результатов различных типов вывода, таких как вывод, написанный скриптом.

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

Live Demo

<!DOCTYPE HTML>

<html>
   <head>
      <script type = "text/javascript">
         
         function showResult() {
            x = document.forms["myform"]["newinput"].value;
            document.forms["myform"]["result"].value = x;
         }
      </script>
   </head>
   
   <body>

      <form action = "/cgi-bin/html5.cgi" method = "get" name = "myform">
         Enter a value : <input type = "text" name = "newinput" />
         <input type = "button" value = "Result"  onclick = "showResult();" />
         <output name = "result"></output>
      </form>
		
   </body>
</html>

<input type = "text" name = "search" placeholder = "search the web"/>

<!DOCTYPE HTML>

<html>
   <body>

      <form action = "/cgi-bin/html5.cgi" method = "get">
         Enter email : <input type = "email" name = "newinput" 
            placeholder = "email@example.com"/>
         <input type = "submit" value = "submit" />
      </form>

   </body>
</html>

<input type = "text" name = "search" autofocus/>

<!DOCTYPE HTML>

<html>
   <body>
   
      <form action = "/cgi-bin/html5.cgi" method = "get">
         Enter email : <input type = "text" name = "newinput" autofocus/>
         <p>Try to submit using Submit button</p>
         <input type = "submit" value = "submit" />
      </form>
      
   </body>
</html>

<input type = "text" name = "search" required/>

<!DOCTYPE HTML>

<html>
   <body>
   
      <form action = "/cgi-bin/html5.cgi" method = "get">
         Enter email : <input type = "text" name = "newinput" required/>
         <p>Try to submit using Submit button</p>
         <input type = "submit" value = "submit" />
      </form>
      
   </body>
</html>