Новые элементы форм html5
HTML5 добавляет 5 новых элементов форм. Форма progress показывает процесс загрузки. Например <progress max="100" value="25">25%</progress>
Форма meter показывает шкалу измерения. Например: <meter value="50" min="0" low="20" optimum="50" high="80" max="100"></meter> Форма keygen используется для создания пары ключей, один из которых передается через форму на сервер. <keygen name="key" keytype="rsa" challenge="challenge" /> Форма datalist используется для ввода элемента с возможными значениями в datalist описанными c помощью элементов option. Элемент input связывается с элементом datalist c помощью атрибута list. <input list="company" /> <datalist id="company"> <option value="BMW"> <option value="Ford"> <option value="Volvo"> </datalist> Элемент output определяет область в которую выводится информация с помощью скриптов. Рассмотрим пример <!-<DOCTYPE html> <--пример pr17: форма --> <html> <head><title>Новые формы</title></head> <body> <hr> <h1>PROGRESS</h1> <form> <progress max="100" value="75">75%</progress> </form> <hr> <h1>METER</h1> <form> <meter value="50" min="0" low="20" optimum="50" high="80" max="200"></meter> </form> <hr> <h1>KEYGEN</h1> <form> <keygen name="key" keytype="rsa" challenge="goodby" /> </form> <hr> <h1>DATALIST</h1> Элемент input со значениями в datalist c помощью атрибута list. <form> <input list="company" /> <datalist id="company"> <option value="BMW"> <option value="Ford"> <option value="Volvo"> </datalist> </form> <hr><h1>OUTPUT</h1> Определяет область в которую выводится информация. <form action="" oninput="out.value=range.value"> <div> <input type="range" name="range" min="0" max="100" value="25" /> </div> <div> <output name="out">20</output> </div> </form> </body></html>
Новые типы ввода элемента <input> HTML5 предоставляет 13 новых типов ввода, например type=email - текстовое поле для адресов электронной почты; type=number - числовое поле со счетчиком управления; type=range - управление числом с ползунком; type=search - текстовое поле для поиска; type=tel - текстовое поле для телефонных номеров; type=url -текстовое поле для URL-адресов; type=color - выбор цвета; type=date - поле даты (с управлением календарем) с указанием года, месяца и даты (без часового пояса); type=datetime -поле даты (с управлением календарем и временем); type=datetime-local - поле даты (с управлением календарем и временем (местное время); type=month - поле даты (с управлением календарем) с указанием месяца; type=week Определяет поле даты (с управлением календарем) с указанием недели; type=time Определяет поле даты (с управлением календарем) с указанием часа, минуты, секунды, и доли секунды (без часового пояса) |
|
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>untitled</title>
</head>
<body>
<form action="" method="get">
<label for="email">Email:</label>
<input id="email" name="email" type="email" />
<button type="submit"> Submit Form </button>
</form>
</body>
</html>
<input type="number" min max step />