Новый тип input – range служит для ввода значения из диапазона

<input type="range" min max step />

Пример создания бегунков с range input.

<form method="post">

<h1> Total Recall Awesomness Gauge </h1>

<input type="range" name="range" min="0" max="10" step="1" value="">

<output name="result">  </output>

</form>

Если step установлен как 1, будет 10 значений для выбора. Мы также используем в своих интересах новый элемент output

Новые атрибуты ввода HTML5

Атрибут AUTOFOCUS -при загрузке страницы автоматически передает фокус элементу. Например:

<input type="text" autofocus />

Атрибут FORM связывает элемент с формой.

<form action="" id="form">

<div><input type="text" name="login" /></div>

<div><button type="submit"></button></div>

</form>

<input type="email" name="email" form="form" />

Атрибут PLACEHOLDER - устанавливает подсказывающий текст в поле ввода. Например:

<input type="password" placeholder="enter your password"/>

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

<input type="text" autocomplete="off"/>

Атрибуты formaction, formenctype, formmethod, formtarget добавляются к элементам, отвечающим за отправку форм, и переопределяют соответствующие им атрибуты форм Эти атрибуты поддерживаются элементами ввода и кнопками

<input type="submit" formmethod ="post" />

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

formenctype атрибут Для переопределения enctype элемента формы.

formmethod - атрибут для переопределения метода элемента формы.

formnovalidate атрибут для переопределения NOVALIDATE элемента формы. formtarget - главный целевой атрибут.

Атрибут required устанавливает , что поле не пройдет валидацию, если его значение пусто, либо не выбрано для checkbox, radio. Например

<input type="text" name="Bob" placeholder="Enter your name" required>

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

Атрибут SET CUSTOM VALIDITY Позволяет задать собственно сообщение валидации.

<form action="">

<div><input type="email" name="email" required/></div>

<div><input type="password" name="pass1" required/></div>

<div><input type="password" name="pass2" required/></div>

<div><input type="submit" value="Register"/></div>

</form>

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

Валидация формы

Традиционно валидация формы использует код JavaScript , чтобы сделать проверку входных данных или обеспечить заполнение необходимых полей перед отправкой формы. В HTML введен атрибут required. Если атрибут required присутствует, то поле непустое при отправке формы. Следующий пример ввода гарантирует, что поле имеет значение и что это значение есть адрес электронной почты.

<input type="email" id="email_addr" name="email_addr" required />

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

<input type="text" id="part" name="part" required pattern="[A-Z]{3}[0-9]{4}" />

Атрибут Formnovalidate может применяться для input or button эле­ментов. Если оно есть, то проверка данных формы отключено. Вот пример:

<input type="submit" formnovalidate value="Save">

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

<label>Email:</label>

<input type="email" id="email_addr" name="email_addr">

<label>Repeat Email Address:</label>

<input type="email" id="email_addr_repeat" name="email_addr_repeat" oninput="check(this)">

<script>

function check(input) {

if (input.value != document. getElementById('email_addr').value) {

input.setCustomValidity('The two email addresses must match.');

} else {

// input is valid -- reset the error message

input.setCustomValidity('');

}

}

</script>

Атрибут Placeholders позволяет создать указатели заполнения полей (подсказки, отображаемые внутри текстовых полей)

<input name="email" type="email" placeholder ="doug@givethesepeopleair.com" />

Атрибут required определяет, обязательно ли заполнение данного поля и назначается двумя способами:

<input type="text" name="someInput" required>

<input type="text" name="someInput" required="required">

Форма не может быть подтверждена, если поле "someInput" пусто.

<form method="post" action="">

<label for="someInput"> Your Name: </label>

<input type="text" id="someInput" name="someInput" place­holder="Douglas Quaid" required>

<button type="submit">Go</button>

</form>

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

Атрибут Autofocus используется, если определённое поле должно быть "выбрано" или сфокусировано, по умолчанию

<input type="text" name="someInput" placeholder="gogo" required autofocus>

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

<form action="" method="post">

<label for="username">Create a Username: </label>

<input type="text" name="username" id="username" placeholder="4 <> 10"

pattern="[A-Za-z]{4,10}" autofocus required>

<button type="submit">Go </button>

</form>

Шаблон [A-Za-z]{4,10} вводит только заглавные и строчные буквы. Каждая строка должна содержать не менее 4 и не более 10 символов.

Для определения поддержки атрибутов cоздадим элемент input и определим, распознан ли браузером атрибут pattern. Если так, браузер поддерживает атрибуты HTML5, иначе – нет.

<script>

if (!'pattern' in document.createElement('input') ) {

// …

}

</script>