Формы HTML5

HTML5 приносит много новых возможностей и совершенствований в технологию веб-форм. С целью повышения удобства просмотра веб-страниц были разработаны и добавлены новые атрибуты и способы ввода данных.

Синтаксис:

  <form>
    <label>Ваше имя:</label>
    <input id="user" name="username" type="text"/>
  </form>
                    

Атрибут novalidate, позволяет избежать проверки формы при отправке.

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

Placeholder

В HTML5 появился новый атрибут заполнителя placeholder. В таких элементах, как <input> и <textarea> этот атрибут содержит подсказку для пользователя о том, какая информация может быть введена в данное поле.

Синтаксис:

  <form>
     <label for="email">Ваш электронный адрес:</label>
     </input type="text" name="email"
        placeholder="email@example.com" />
  </form>
                    

Результат выполнения:

Autofocus

Ставит курсор в нужное поле ввода, когда форма загрузится.

Синтаксис:

  <form>
     <label for="email">Ваш электронный адрес:</label>
     </input type="text" name="email"
        autofocus />
  </form>
                    

Результат выполнения:

Required

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

Синтаксис:

  <form>
     <label for="e-mail">Ваш электронный адрес: </label>
     <input name="Email" type="text" required />
     <input type="submit" value="Submit"/>
  </form>
                    

Результат выполнения: