Новые элементы html5

EMAIL

Определяет поле для ввода email. Поле не отличается от элемента input.

Хорошо реализовано на iPhone/iPad.

URL

Определяет поле для ввода url. Поле не отличается от элемента input.

Хорошо реализовано на iPhone/iPad.

TEL

Определяет поле для ввода телефона. Поле не отличается от элемента input.

Хорошо реализовано на iPhone/iPad.

SEARCH

Определяет поле для поиска

<input type="search"/>

DATE

Служит для ввода даты

<input type="date" min max/>

TIME

Служит для ввода времени

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

DATETIME

Служит для ввода даты и времени

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

NUMBER

Служит для ввода числовых данных

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

RANGE

Служит для ввода значения из диапазона

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

MONTH

Служит для ввода месяца

<input type="month" min max />

WEEK

Служит для ввода недели

<input type="week" min max />

COLOR

Служит для ввода цвета

<input type="color" />

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

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

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

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

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

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

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

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

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

formtarget - атрибут для главной целевой атрибут

REQURED

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

<input type="text" name="name" 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>

<script>

document.querySelector('input[name="pass2"]')

.addEventListener("input", function(e){

if ( this.value != document.querySelector('input[name="pass1"]')

.value )this.setCustomValidity("The two passwords must match.");

else

this.setCustomValidity("");

}, true);

</script>

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

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

Если атрибут required присутствует, то поле должно содержать значение при отправке формы. Вот пример строки ввода адреса электронной почты. гарантирует, что поле имеет значение и что значение действительный адрес электронной почты, как определено здесь. <input type="email" id="email_addr" name="email_addr" required />

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

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

title="Part numbers consist of 3 uppercase letters followed by 4 digits."/>

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

:invalid {

border: 2px solid #ff0000;

}

novalidate – атрибут используется для отключения проверки данных формы. Formnovalidate атрибут может применяться для input or button элементов. Если оно есть, то проверка данных формы отключено. Вот пример, где отправке формы с помощью кнопки Отправить требует допустимых входных данных, но и представления с помощью кнопки

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

title="Part numbers consist of 3 uppercase letters followed by 4 digits."/>

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

<input type="submit" value="Submit">

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

<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>

Собираем все вместе. Вот пример формы заявки

Полное имя:

Адрес электронной почты:

Повторите адрес электронной почты:

Дата заезда:

Количество ночей (номера $ 99,00 за ночь):

Количество гостей (каждый дополнительный гость добавляет $ 10,00 за ночь):

Предполагаемая общая сумма: $ 99.00 Промо-код: Это HTML и JavaScript для формы:

Конец формы

This is the HTML and JavaScript for the form:

<form oninput="total.value = (nights.valueAsNumber * 99) +

((guests.valueAsNumber - 1) * 10)">

<label>Full name:</label>

<input type="text" id="full_name" name="full_name" placeholder="Jane Doe" required>

<label>Email address:</label>

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

<label>Repeat email address:</label>

<input type="email" id="email_addr_repeat" name="email_addr_repeat" required

oninput="check(this)">

<label>Arrival date:</label>

<input type="date" id="arrival_dt" name="arrival_dt" required>

<label>Number of nights (rooms are $99.00 per night):</label>

<input type="number" id="nights" name="nights" value="1" min="1" max="30" required>

<label>Number of guests (each additional guest adds $10.00 per night):</label>

<input type="number" id="guests" name="guests" value="1" min="1" max="4" required>

<label>Estimated total:</label>

$<output id="total" name="total">99</output>.00

<br><br>

<label>Promo code:</label>

<input type="text" id="promo" name="promo" pattern="[A-Za-z0-9]{6}"

title="Promo codes consist of 6 alphanumeric characters.">

<input type="submit" value="Request Reservation" />

</form>

<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>

This is the CSS that goes with the form code:

:invalid {

border-color: #e88;

-webkit-box-shadow: 0 0 5px rgba(255, 0, 0, .8);

-moz-box-shadow: 0 0 5px rbba(255, 0, 0, .8);

-o-box-shadow: 0 0 5px rbba(255, 0, 0, .8);

-ms-box-shadow: 0 0 5px rbba(255, 0, 0, .8);

box-shadow:0 0 5px rgba(255, 0, 0, .8);

}

:required {

border-color: #88a;

-webkit-box-shadow: 0 0 5px rgba(0, 0, 255, .5);

-moz-box-shadow: 0 0 5px rgba(0, 0, 255, .5);

-o-box-shadow: 0 0 5px rgba(0, 0, 255, .5);

-ms-box-shadow: 0 0 5px rgba(0, 0, 255, .5);

box-shadow: 0 0 5px rgba(0, 0, 255, .5);

}

form {

width:300px;

margin: 20px auto;

}

input {

font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

border:1px solid #ccc;

font-size:20px;

width:300px;

min-height:30px;

display:block;

margin-bottom:15px;

margin-top:5px;

outline: none;

-webkit-border-radius:5px;

-moz-border-radius:5px;

-o-border-radius:5px;

-ms-border-radius:5px;

border-radius:5px;

}

input[type=submit] {

background:none;

padding:10px;

}