Ниже приводится выдержка из нашей книги « HTML5 и CSS3 для реального мира», 2-е издание , написанной Алексисом Гольдштейном, Луи Лазарисом и Эстель Вейль. Копии продаются в магазинах по всему миру, или вы можете купить их в электронном виде здесь .
Мы закодировали большую часть страницы, и теперь вы знаете почти все, что нужно знать о новых элементах HTML5 и их семантике. Но прежде чем мы начнем работать над внешним видом сайта, что мы и делаем в главе 7, мы немного отвлечемся от главной страницы HTML5 Herald, чтобы взглянуть на страницу регистрации. Это проиллюстрирует, что HTML5 может предложить с точки зрения веб-форм.
Веб-формы HTML5 представили новые элементы формы, типы ввода, атрибуты, встроенную проверку и другие функции формы. Многие из этих функций, которые мы использовали в наших интерфейсах в течение многих лет: проверка формы, поля со списком, текст заполнителя и тому подобное. Разница в том, что прежде чем нам пришлось прибегнуть к JavaScript, чтобы создать такое поведение; теперь они доступны прямо в браузере. Все, что вам нужно сделать, это включить атрибуты в разметку, чтобы сделать их доступными.
HTML5 не только облегчает разметку форм для разработчика, но и для пользователя. Благодаря тому, что проверка на стороне клиента обрабатывается непосредственно браузером, обеспечивается более высокая согласованность между различными сайтами, и многие страницы будут загружаться быстрее без всего этого избыточного JavaScript.
Давайте погрузимся в!
Надежные инструменты в нашем наборе инструментов
Часто формы — это последнее, что разработчики включают в свои страницы — многие разработчики считают формы просто скучными. Хорошей новостью является то, что HTML5 привносит немного больше радости в формы кодирования. Мы надеемся, что к концу этой главы вы с нетерпением ожидаете использования элементов формы в разметке.
Давайте начнем с нашей регистрационной формы с простого старомодного HTML:
<form id="register" method="post">
<header>
<h1>Sign Me Up!</h1>
<p>I would like to receive your fine publication.</p>
</header>
<ul>
<li>
<label for="register-name">My name is:</label>
<input type="text" id="register-name" name="name">
</li>
<li>
<label for="address">My email address is:</label>
<input type="text" id="address" name="address">
</li>
<li>
<label for="url">My website is located at:</label>
<input type="text" id="url" name="url">
</li>
<li>
<label for="password">I would like my password to be:</label>
<p>(at least 6 characters, no spaces)</p>
<input type="password" id="password" name="password">
</li>
<li>
<label for="rating">On a scale of 1 to 10, my knowledge of HTML5 is:</label>
<input type="text" name="rating" id="rating">
</li>
<li>
<label for="startdate">Please start my subscription on:</label>
<input type="text" id="startdate" name="startdate">
</li>
<li>
<label for="quantity">I would like to receive <input type="text" name="quantity" id="quantity"> copies of <cite> The HTML5 Herald</cite>.</label>
</li>
<li>
<label for="upsell">Also sign me up for <cite>The CSS3 Chronicle</cite></label>
<input type="checkbox" id="upsell" name="upsell" value="CSS Chronicle">
</li>
<li>
<input type="submit" id="register-submit" value="Send Post Haste">
</li>
</ul>
</form> В этом образце регистрационной формы используются элементы формы, которые были доступны с самых ранних версий HTML. Эта форма предоставляет пользователям подсказки о том, какой тип данных ожидается в каждом поле через labelp Это работает, но это, безусловно, может быть улучшено.
В этой главе мы собираемся улучшить эту форму, включив в нее функции формы HTML5. HTML5 предоставляет новые типы ввода, специфичные для адресов электронной почты, URL-адресов, чисел, дат и т. Д. В дополнение к этому HTML5 вводит атрибуты, которые можно использовать как с новыми, так и с существующими типами ввода. Это позволяет вам предоставлять заполнитель текста, помечать поля как обязательные и объявлять, какой тип данных является приемлемым — все без JavaScript.
Мы рассмотрим все недавно добавленные типы ввода позже в этой главе. Прежде чем мы это сделаем, давайте посмотрим на новые атрибуты формы, которые предоставляет HTML5.