Содержание

Формы – React

В React HTML-элементы формы ведут себя немного иначе по сравнению с DOM-элементами, так как у элементов формы изначально есть внутреннее состояние. К примеру, в эту HTML-форму можно ввести имя:

<form>
  <label>
    Имя:
    <input type="text" name="name" />
  </label>
  <input type="submit" value="Отправить" />
</form>

По умолчанию браузер переходит на другую страницу при отправке HTML-форм, в том числе и этой. Если вас это устраивает, то не надо ничего менять, в React формы работают как обычно. Однако, чаще всего форму удобнее обрабатывать с помощью JavaScript-функции, у которой есть доступ к введённым данным. Стандартный способ реализации такого поведения называется «управляемые компоненты».

Управляемые компоненты

В HTML элементы формы, такие как <input>, <textarea> и <select>, обычно сами управляют своим состоянием и обновляют его когда пользователь вводит данные. В React мутабельное состояние обычно содержится в свойстве компонентов

state и обновляется только через вызов setState()

Мы можем скомбинировать оба подхода и сделать состояние React-компонента «единственным источником правды». Тогда React-компонент будет рендерить форму и контролировать её поведение в ответ на пользовательский ввод. Значение элемента формы input в этом случае будет контролировать React, а сам элемент будет называться «управляемый компонент».

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

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {    this.setState({value: event.target.value});  }
  handleSubmit(event) {
    alert('Отправленное имя: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>        <label>
          Имя:
          <input type="text" value={this.state.value} onChange={this.handleChange} />        </label>
        <input type="submit" value="Отправить" />
      </form>
    );
  }
}

Посмотреть на CodePen

Мы установили атрибут value для поля ввода, и теперь в нём всегда будет отображаться значение this.state.value. Состояние React-компонента стало «источником истины». А так как каждое нажатие клавиши вызывает handleChange, который обновляет состояние React-компонента, значение в поле будет обновляться по мере того, как пользователь печатает.

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

Тег textarea

HTML-элемент

<textarea> в качестве текста отображает дочерний элемент:

<textarea>
  Привет! Тут просто немного текста внутри тега textarea
</textarea>

В React <textarea> использует атрибут value. Таким образом, форму с <textarea> можно написать почти тем же способом, что и форму с однострочным <input>:

class EssayForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {      value: 'Будьте любезны, напишите сочинение о вашем любимом DOM-элементе.'    };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {    this.setState({value: event.target.value});  }
  handleSubmit(event) {
    alert('Сочинение отправлено: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Сочинение:
          <textarea value={this.state.value} onChange={this.handleChange} />        </label>
        <input type="submit" value="Отправить" />
      </form>
    );
  }
}

Обратите внимание, что мы инициализировали this.state.value в конструкторе, так что в текстовой области изначально есть текст.

Тег select

В HTML <select>

создаёт выпадающий список. HTML-код в этом примере создаёт выпадающий список вкусов:

<select>
  <option value="grapefruit">Грейпфрут</option>
  <option value="lime">Лайм</option>
  <option selected value="coconut">Кокос</option>
  <option value="mango">Манго</option>
</select>

Пункт списка «Кокос» выбран по умолчанию из-за установленного атрибута selected. React вместо этого атрибута использует value в корневом теге select. В управляемом компоненте так удобнее, потому что обновлять значение нужно только в одном месте (state). Пример:

class FlavorForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: 'coconut'};
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {    this.setState({value: event.target.value});  }
  handleSubmit(event) {
    alert('Ваш любимый вкус: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Выберите ваш любимый вкус:
          <select value={this.state.value} onChange={this.handleChange}>            <option value="grapefruit">Грейпфрут</option>
            <option value="lime">Лайм</option>
            <option value="coconut">Кокос</option>
            <option value="mango">Манго</option>
          </select>
        </label>
        <input type="submit" value="Отправить" />
      </form>
    );
  }
}

Посмотреть на CodePen

Подводя итог, <input type="text">, <textarea>, и <select> работают очень похоже. Все они принимают атрибут value, который можно использовать, чтобы реализовать управляемый компонент.

Примечание

В атрибут value можно передать массив, что позволит выбрать несколько опций в теге

select:

<select multiple={true} value={['Б', 'В']}>

Загрузка файла

В HTML <input type="file"> позволяет пользователю выбрать один или несколько файлов для загрузки с устройства на сервер или управлять им через JavaScript с помощью File API.

Так как значение такого элемента доступно только для чтения, это неуправляемый React-компонент. Мы расскажем про этот и другие неуправляемые компоненты далее в документации.

Обработка нескольких элементов input

Если вам нужны несколько управляемых элементов input, вы можете назначить каждому из них атрибут name, что позволит функции-обработчику решать, что делать, основываясь на значении

event.target.name.

Пример:

class Reservation extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isGoing: true,
      numberOfGuests: 2
    };

    this.handleInputChange = this.handleInputChange.bind(this);
  }

  handleInputChange(event) {
    const target = event.target;
    const value = target.type === 'checkbox' ? target.checked : target.value;
    const name = target.name;
    this.setState({
      [name]: value    });
  }

  render() {
    return (
      <form>
        <label>
          Пойдут:
          <input
            name="isGoing"            type="checkbox"
            checked={this.state.isGoing}
            onChange={this.handleInputChange} />
        </label>
        <br />
        <label>
          Количество гостей:
          <input
            name="numberOfGuests"            type="number"
            value={this.state.numberOfGuests}
            onChange={this.handleInputChange} />
        </label>
      </form>
    );
  }
}

Посмотреть на CodePen

Обратите внимание, что мы используем вычисляемые имена свойств, чтобы обновить значение в state через ключ, который соответствует атрибуту name элемента input:

this.setState({
  [name]: value});

Идентичный ES5-код:

var partialState = {}; partialState[name] = value;this.setState(partialState);

Кроме того, setState() автоматически производит слияние части состояния с текущим состоянием, то есть нам нужно передать в него только ту часть state, которую хотим изменить.

Значение null управляемого компонента

Если установить управляемому компоненту проп value, то пользователь не сможет изменить его значение без вашего желания. Если вы установили value, а поле ввода по-прежнему можно редактировать, то, возможно, вы случайно задали value, равный undefined или null.

Код ниже это демонстрирует. (Изначально заблокированный input

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

ReactDOM.render(<input value="Привет" />, mountNode);

setTimeout(function() {
  ReactDOM.render(<input value={null} />, mountNode);
}, 1000);

Альтернативы управляемым компонентам

Использование управляемых компонентов иногда может быть утомительным. Приходится писать обработчик события для каждого варианта изменения ваших данных и проводить всё состояние формы через компонент React. Это может особенно раздражать, если вы переносите существующую кодовую базу в React, или когда работаете над интеграцией React-приложения с другой библиотекой. В такой ситуации могут пригодиться неуправляемые компоненты — альтернативная техника реализации ввода данных в форму.

Полноценные решения

Если вы ищете полноценное решение, которое может валидировать ввод, запомнить посещённые поля формы и обработать её отправку, присмотритесь к Formik. Эта библиотека построена на принципах управляемых компонентов и управления состоянием, так что не пренебрегайте их изучением.

Формы HTML уроки для начинающих академия



Пример HTML-формы


Элемент <form>

Элемент HTML <form> определяет форму, которая используется для сбора данных пользователя:

<form>
.
form elements
.
</form>

HTML-форма содержит элементы формы.

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


Элемент < input >

Элемент <input> является наиболее важным элементом формы.

<input>элемент может отображаться несколькими способами в зависимости от атрибута Type .

Вот несколько примеров:

Тип Описание
<input type=»text»> Определяет однострочное текстовое поле ввода
<input type=»radio»> Определяет переключатель (для выбора одного из множества вариантов)
<input type=»submit»> Определяет кнопку отправки (для отправки формы)

Далее в этом учебнике вы узнаете намного больше о типах ввода.



Ввод текста

<input type="text"> Определяет однострочное поле ввода для text input:

Пример

<form>
  First name:<br>
  <input type=»text» name=»firstname»><br>
  Last name:<br>
  <input type=»text» name=»lastname»>
</form>

Так будет выглядеть в браузере:

Имя:

Фамилия:

Примечание: Сама форма не видна. Также обратите внимание, что ширина текстового поля по умолчанию составляет 20 символов.


Входной сигнал переключателя

<input type="radio"> Определяет переключатель.

Переключатели позволяют пользователю выбрать одно из ограниченного числа вариантов:

Пример

<form>
  <input type=»radio» name=»gender» value=»male» checked> Male<br>
  <input type=»radio» name=»gender» value=»female»> Female<br>
  <input type=»radio» name=»gender» value=»other»> Other
</form>

Таким образом, HTML-код выше будет отображаться в браузере:

Male
Female
Other

Кнопка «Отправить»

<input type="submit">Определяет кнопку для Отправка данных формы в обработчик форм.

Обработчик форм обычно является серверной страницей со сценарием для обработки входных данных.

Обработчик форм задается в атрибуте Action формы:

Пример

<form action=»/action_page.php»>
  First name:<br>
  <input type=»text» name=»firstname» value=»Mickey»><br>
  Last name:<br>
  <input type=»text» name=»lastname» value=»Mouse»><br><br>
  <input type=»submit» value=»Submit»>
</form>

Таким образом, HTML-код выше будет отображаться в браузере:


Атрибут Action

Атрибут action определяет действие, выполняемое при отправке формы.

Обычно данные формы отправляются на веб-страницу на сервере, когда пользователь щелкает кнопку Submit.

В приведенном выше примере данные формы отправляются на страницу на сервере под названием «/action_page.php». Эта страница содержит сценарий на стороне сервера, обрабатывающий данные формы:

<form action=»/action_page.php«>

Если атрибут action опущен, действие устанавливается на текущую страницу.


Целевой атрибут

Атрибут target указывает, будет ли отправленный результат открыт в новой вкладке обозревателя, фрейме или в текущем окне.

По умолчанию используется значение «_self«, означающее, что форма будет отправлена в текущем окне.

Чтобы сделать результат формы открытым в новой вкладке обозревателя, используйте значение «_blank«:

Пример

<form action=»/action_page.php» target=»_blank»>

Другими юридическими значениями являются «_parent«, «_top» или имя, представляющее имя IFRAME.


Атрибут метода

method атрибут указывает метод HTTP (Get или POST) для использования при отправке данных формы:

Пример

<form action=»/action_page.php» method=»get»>

Или:

Пример

<form action=»/action_page.php» method=»post»>


Когда использовать Get?

Метод по умолчанию при отправке данных формы GET.

Однако при использовании Get, отправленные данные формы будут видны в поле адрес страницы:

/action_page.php?firstname=Mickey&lastname=Mouse

Заметки о Get:

  • Добавление данных формы в URL-адрес в парах «имя/значение»
  • Длина URL ограничена (около 3000 символов)
  • Никогда не используйте Get для отправки конфиденциальных данных! (будет отображаться в URL)
  • Полезно для представлений форм, где пользователь хочет закладка результат
  • Get лучше для незащищенных данных, таких как строки запроса в Google

Когда использовать POST?

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

Примечания на столбе:

  • POST не имеет ограничений по размеру и может использоваться для отправки больших объемов данных.
  • Форма представлений с POST не может быть Закладка

Атрибут Name

Каждое поле ввода должно иметь атрибут name для отправки.

Если атрибут name опущен, данные этого поля ввода не будут отправлены вообще.

В этом примере будет передаваться только поле ввода «Фамилия»:

Пример

<form action=»/action_page.php»>
  First name:<br>
  <input type=»text» value=»Mickey»><br>
  Last name:<br>
  <input type=»text» name=»lastname» value=»Mouse»><br><br>
  <input type=»submit» value=»Submit»>
</form>


Группирование данных формы с помощью <fieldset>

Элемент <fieldset> используется для группирования связанных данных в форме.

Элемент <legend> определяет заголовок для <fieldset> Элемент.

Пример

<form action=»/action_page.php»>
  <fieldset>
    <legend>Personal information:</legend>
    First name:<br>
    <input type=»text» name=»firstname» value=»Mickey»><br>
    Last name:<br>
    <input type=»text» name=»lastname» value=»Mouse»><br><br>
    <input type=»submit» value=»Submit»>
  </fieldset>
</form>

Таким образом, HTML-код выше будет отображаться в браузере:


Вот список атрибутов <form>:

Атрибут Описание
accept-charset Задает кодировку, используемую в отправленной форме (по умолчанию: кодировка страницы).
action Указывает адрес (URL) для отправки формы (по умолчанию: страница отправки).
autocomplete Указывает, должен ли обозреватель Автозаполнение формы (по умолчанию: on).
enctype Задает кодировку отправленных данных (по умолчанию: URL-кодировка).
method Указывает метод HTTP, используемый при отправке формы (по умолчанию: Get).
name Задает имя, используемое для идентификации формы (для использования DOM: Document.Forms.Name).
novalidate Указывает, что обозреватель не должен проверять форму.
target Указывает целевой объект адреса в атрибуте Action (по умолчанию: _self).

Вы узнаете больше о атрибутах формы в следующих главах.


улучшенные возможности, новые типы полей и атрибуты

HTML-формы являются элементами управления, которые применяются для сбора информации от посетителей веб-сайта.

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

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

До появления HTML5 веб-формы представляли собой набор нескольких элементов <input type="text">, <input type="password">, завершающихся кнопкой <input type="submit">. Для стилизации форм в разных браузерах приходилось прилагать немало усилий. Кроме того, формы требовали применения JavaScript для проверки введенных данных, а также были лишены специфических типов полей ввода для указания повседневной информации типа дат, адресов электронной почты и URL-адресов.

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

Рис. 1. Улучшенные веб-формы с помощью HTML5

Создание HTML5-формы

1. Элемент <form>

Основу любой формы составляет элемент <form>...</form>. Он не предусматривает ввод данных, так как является контейнером, удерживая вместе все элементы управления формы – поля. Атрибуты этого элемента содержат информацию, общую для всех полей формы, поэтому в одну форму нужно включать поля, объединенные логически.

Таблица 1. Атрибуты элемента <form>
Атрибут Значение / описание
accept-charset Значение атрибута представляет собой разделенный пробелами список кодировок символов, которые будут использоваться для отправки формы, например, <form accept-charset="ISO-8859-1">.
action Обязательный атрибут, который указывает url обработчика формы на сервере, которому передаются данные. Представляет из себя файл (например, action.php), в котором описано, что нужно делать с данными формы. Если значение атрибута не будет указано, то после перезагрузки страницы элементы формы примут значения по умолчанию.
В случае, если вся работа будет выполняться на стороне клиента сценариями JavaScript, то для атрибута action можно указать значение #.
Также можно сделать так, чтобы заполненная посетителем форма приходила вам на почту. Для этого нужно внести следующую запись:
<form action="mailto:адрес вашей электронной почты" enctype="text/plain"></form>
autocomplete Отвечает за запоминание введенных в текстовое поле значений и автоподстановку их при последующем вводе:
on — означает, что поле не защищено, и его значение можно сохранять и извлекать,
off — отключает автозаполнение для полей форм.
enctype Используется для указания MIME-типа данных, отправляемых вместе с формой, например, enctype="multipart/form-data". Указывается только в случае method="post".
application/x-www-form-urlencoded — тип содержимого по умолчанию, указывает на то, что передаваемые данные представляют список URL-кодированных переменных формы. Символы пробела (ASCII 32) будут закодированы как +, а специальный символ, например, такой как ! будет закодирован шестнадцатиричной форме как %21.
multipart/form-data — используется для отправки форм, содержащих файлы, не-ASCII данные и бинарные данные, состоит из нескольких частей, каждая из которых представляет содержимое отдельного элемента формы.
text/plain — указывает на то, что передается обычный (не html) текст.
method Задает способ передачи данных формы.
Метод get передает данные на сервер через адресную строку браузера. При формировании запроса к серверу все переменные и их значения формируют последовательность вида www.anysite.ru/form.php?var1=1&var2=2. Имена и значения переменных присоединяются к адресу сервера после знака ? и разделяются между собой знаком &. Все специальные символы и буквы, отличные от латинских, кодируются в формате %nn, пробел заменяется на +. Этот метод нужно использовать, если вы не передаете больших объемов информации. Если вместе с формой предполагается отправка какого-либо файла, этот метод не подойдет.
Метод post применяется для пересылки данных больших объемов, а также конфиденциальной информации и паролей. Данные, отправляемые с помощью этого метода, не видны в заголовке URL, так как они содержатся в теле сообщения.
<form action="action.php" enctype="multipart/form-data" method="post"></form>
name Задает имя формы, которое будет использоваться для доступа к элементам формы через сценарии, например, name="opros".
novalidate Отключает проверку в кнопке для отправки формы. Атрибут используется без указания значения
target Указывает окно, в которое будет направлена информация:
_blank — новое окно
_self — тот же фрейм
_parent — родительский фрейм (если он существует, если нет — то в текущий)
_top — окно верхнего уровня по отношению к данному фрейму. Если вызов происходит не из дочернего фрейма, то в тот же фрейм.

2. Группировка элементов формы

Элемент <fieldset>...</fieldset> предназначен для группировки элементов, связанных друг с другом, разделяя таким образом форму на логические фрагменты.

Каждой группе элементов можно присвоить название с помощью элемента <legend>, который идет сразу за открывающим тегом элемента <fieldset>. Название группы проявляется слева в верхней границе <fieldset>. Например, если в элементе <fieldset> хранится контактная информация:

<form>
  <fieldset>
    <legend>Контактная информация</legend>
    <p><label for="name">Имя <em>*</em></label><input type="text"></p>
    <p><label for="email">E-mail</label><input type="email"></p>
  </fieldset>
<p><input type="submit" value="Отправить"></p>
</form>
Рис. 2. Группировка элементов формы с помощью <fieldset>
Таблица 2. Атрибуты элемента <fieldset>
Атрибут Значение / описание
disabled Если атрибут присутствует, то группа связанных элементов формы, находящихся внутри контейнера <fieldset>, отключены для заполнения и редактирования. Используется для ограничения доступа к некоторым полям формы, содержащих ранее введенные данные. Атрибут используется без указания значения — <fieldset disabled>.
form Значение атрибута должно быть равно атрибуту id элемента <form> в этом же документе. Указывает на одну или несколько форм, к которым принадлежит данная группа элементов. На данный момент атрибут не поддерживается ни одним браузером.
name Определяет имя, которое будет использоваться для ссылки на элементы в JavaScript, или для ссылки на данные формы после заполнения и отправки формы. Является аналогом атрибута id.

3. Создание полей формы

Элемент <input> создает большинство полей формы. Атрибуты элемента отличаются в зависимости от типа поля, для создания которого используется этот элемент.

С помощью css-стилей можно изменить размер шрифта, тип шрифта, цвет и другие свойства текста, а также добавить границы, цвет фона и фоновое изображение. Ширина поля задается свойством width.

Таблица 3. Атрибуты элемента <input>
Атрибут Значение / описание
accept Определяет тип файла, разрешенных для отправки на сервер. Указывается только для <input type="file">. Возможные значения:
file_extension — разрешает загрузку файлов с указанным расширением, например, accept=".gif", accept=".pdf", accept=".doc"
audio/* — разрешает загрузку аудиофайлов
video/* — разрешает загрузку видеофайлов
image/* — разрешает загрузку изображений
media_type — указывает на медиа-тип загружаемых файлов.
alt Определяет альтернативный текст для изображений, указывается только для <input type="image">.
autocomplete Отвечает за запоминание введенных в текстовое поле значений и автоподстановку их при последующем вводе:
on — означает, что поле не защищено, и его значение можно сохранять и извлекать,
off — отключает автозаполнение для полей форм.
autofocus Позволяет сделать так, чтобы в загружаемой форме то или иное поле ввода уже имело фокус (было выбрано), являясь готовым к вводу значения.
checked Атрибут проверяет, установлен ли флажок по умолчанию при загрузке страницы для полей типа type="checkbox" и type="radio".
disabled Отключает возможность редактирования и копирования содержимого поля.
form Значение атрибута должно быть равно атрибуту id элемента <form> в этом же документе. Определяет одну или несколько форм, которым принадлежит данное поле формы.
formaction Задает url файла, который будет обрабатывать введенные в поля данные при отправке формы. Задается только для полей типа type="submit" и type="image". Атрибут переопределяет значение атрибута action самой формы.
formenctype Определяет, как будут кодироваться данные полей формы при отправке на сервер. Переопределяет значение атрибута enctype формы. Задается только для полей типа type="submit" и type="image". Варианты:
application/­x-www-form-urlencoded — значение по умолчанию. Все символы кодируются перед отправкой (пробелы заменяются на символ +, специальные символы преобразуются в значения ASCII HEX)
multipart/form-data — символы не кодируются
text/plain — пробелы заменяются на символ +, а специальные символы не кодируются.
formmethod Атрибут определяет метод, который браузер будет использовать для отправки данных формы на сервер. Задается только для полей типа type="submit" и type="image". Переопределяет значение атрибута method формы. Варианты:
get — значение по умолчанию. Данные из формы (пара имя/значение) добавляются в url-адрес и отправляются на сервер: URL?имя=значение&имя=значение
post — данные формы отправляются в виде http-запроса.
formnovalidate Определяет, что данные полей формы не должны проверяться при отправке формы. Переопределяет значение атрибута novalidate формы. Можно использовать без указания значения атрибута.
formtarget Определяет, где выводить ответ, полученный после отправки формы. Задается только для полей типа type="submit" и type="image". Переопределяет значение атрибута target формы.
_blank — загружает ответ в новое окно/вкладку
_self — загружает ответ в то же окно (значение по умолчанию)
_parent – загружает ответ в родительский фрейм
_top – загружает ответ во весь экран
framename – загружает ответ во фрейм с указанным именем.
height Значение атрибута содержит количество пикселей без указания единицы измерения. Устанавливает высоту поля формы типа type="image", например, <input type="image" src="img_submit.gif">. Рекомендуется одновременно устанавливать как высоту, так и ширину поля.
list Является ссылкой на элемент <datalist>, содержит его id.Позволяет предоставить пользователю несколько вариантов на выбор, когда он начинает вводить значение в соответствующем поле.
max Позволяет ограничить допустимый ввод числовых данных максимальным значением, значение атрибута может содержать целое или дробное число. Рекомендуется использовать этот атрибут вместе с атрибутом min. Работает со следующими типами полей: number, range, date, datetime, datetime-local, month, time и week.
maxlength Атрибут задает максимальное количество символов, вводимых в поле. Значение по умолчанию 524288 символов.
min Позволяет ограничить допустимый ввод числовых данных минимальным значением.
multiple Позволяет пользователю ввести несколько значений атрибутов, разделяя их запятой. Применяется в отношении файлов и адресов электронной почты. Указывается без значения атрибута.
name Определяет имя, которое будет использоваться для доступа к элементу <form>, к примеру, в таблицах стилей css. Является аналогом атрибута id.
pattern Позволяет определять с помощью регулярного выражения синтаксис данных, ввод которых должен быть разрешен в определенном поле. Например, pattern="[a-z]{3}-[0-9]{3}" — квадратные скобки устанавливают диапазон допустимых символов, в данном случае — любые строчные буквы, число в фигурных скобках указывает, что нужны три строчные буквы, после которых следует тире, далее — три цифры в диапазоне от 0 до 9.
placeholder Содержит текст, который отображается в поле ввода до заполнения (чаще всего это подсказка).
readonly Не позволяет пользователю изменять значения элементов формы, выделение и копирование текста при этом доступно. Указывается без значения атрибута.
required Выводит сообщение о том, что данное поле является обязательным для заполнения. Если пользователь попытается отправить форму, не введя в это поле требуемое значение, то на экране отобразится предупреждающее сообщение. Указывается без значения атрибута.
size Задает видимую ширину поля в символах. Значение по умолчанию — 20. Работает со следующими типами полей: text, search, tel, url, email и password.
src Задает url изображения, используемого в качестве кнопки отправки данных формы. Указывается только для поля <input type="image">.
step Используется для элементов, предполагающих ввод числовых значений, указывает величину увеличения или уменьшения значений в процессе регулировки диапазона (шаг).
type button — создает кнопку.
checkbox — превращает поле ввода во флажок, который можно установить или очистить, например,
У меня есть автомобиль
color — генерирует палитры цветов в поддерживающих браузерах, давая пользователям возможность выбирать значения цветов в шестнадцатеричном формате.
date — позволяет вводить дату в формате дд.мм.гггг.
День рождения:
datetime-local — позволяет вводить дату и время, разделенные прописной английской буквой Т по шаблону дд.мм.гггг чч:мм.
День рождения — день и время:
email — браузеры, поддерживающие данный атрибут, будут ожидать, что пользователь введет данные, соответствующие синтаксису адресов электронной почты.
E-mail:
file — позволяет загружать файлы с компьютера пользователя.
Выберите файл:
hidden — скрывает элемент управления, который не отображается браузером и не дает пользователю изменять значения по умолчанию.
image — создает кнопку, позволяя вместо текста на кнопке вставить изображение.
month — позволяет пользователю вводить год и номер месяца по шаблону гггг-мм.
number — предназначено для ввода целочисленных значений. Его атрибуты min, max и step задают верхний, нижний пределы и шаг между значениями соответственно. Эти атрибуты предполагаются у всех элементов, имеющих численные показатели. Их значения по умолчанию зависят от типа элемента.
Укажите количество (от 1 до 5):
password — создает текстовые поля в форме, при этом вводимые пользователем символы заменяются на звездочки, маркеры, либо другие, установленные браузером значки.
Введите пароль:
radio — создает переключатель — элемент управления в виде небольшого кружка, который можно включить или выключить.
Вегетарианец:
range — позволит создать такой элемент интерфейса, как ползунок, min / max — позволят установить диапазон выбора
reset — создает кнопку, которая очищает поля формы от введенных пользователем данных.
search — обозначает поле поиска, по умолчанию поле ввода имеет прямоугольную форму.
Поиск:
submit — создает стандартную кнопку, активизируемую щелчком мыши. Кнопка собирает информацию с формы и отправляет ее для обработки.
text — создает текстовые поля в форме, выводя однострочное текстовое поле для ввода текста.
time — позволяет вводить время в 24-часовом формате по шаблону чч:мм. В поддерживающих браузерах оно отображается как элемент управления в виде числового поля ввода со значением, изменяемым с помощью мыши, и допускает ввод только значений времени.
Укажите время:
url — поле предназначено для указания URL-адресов.
Главная страница:
week — соответствующий инструмент-указатель позволяет пользователю выбрать одну неделю в году, после чего обеспечит ввод данных в формате нн-гггг. В зависимости от года число недель может быть 52 или 53.
Укажите неделю:
value Определяет текст, отображаемый на кнопке, в поле или связанный текст. Не указывается для полей типа file.
width Значение атрибута содержит количество пикселей. Позволяет задать ширину полей формы.

4. Текстовые поля ввода

Элемент <textarea>...</textarea> используется вместо элемента <input type="text">, когда нужно создать большие текстовые поля. Текст, отображаемый как исходное значение, помещается внутрь.

Размеры поля устанавливаются при помощи атрибутов cols – размеры по горизонтали, rows – размеры по вертикали. Высоту поля можно задать свойством height. Все размеры считаются исходя из размера одного символа моноширинного шрифта.

Таблица 4. Атрибуты элемента <textarea>
Атрибут Значение / описание
autofocus Устанавливает фокус на нужном начальном текстовом поле автоматически.
cols Устанавливает ширину через количество символов. Если пользователь вводит больше текста, появляется полоса прокрутки.
disabled Отключает возможность редактирования и копирования содержимого поля.
form Значение атрибута должно быть равно значению атрибута id элемента <form> в этом же документе. Определяет одну или несколько форм, которым принадлежит данное текстовое поле.
maxlength Значение атрибута задает максимальное число символов для ввода в поле.
name Задает имя текстового поля.
placeholder Определяет короткую текстовую подсказку, которая описывает ожидаемое вводимое значение.
readonly Отключает возможность редактирования содержимого поля.
required Выводит сообщение о том, что данное поле является обязательным для заполнения.
rows Указывает число, которое означает, сколько строк должно отображаться в текстовой области.
wrap Определяет, должен ли текст сохранять переносы строк при отправке формы. Значение hard сохраняет перенос, а значение soft не сохраняет. Если используется значение hard, то должно указываться значение атрибута cols.

5. Раскрывающийся список

Списки дают возможность расположить большое количество пунктов компактно. Раскрывающиеся списки создаются при помощи элемента <select>...</select>. Они позволяют выбрать одно или несколько значений из предложенного множества. По умолчанию в поле списка отображается его первый элемент.

Для добавления в список пунктов используются элементы <option>...</option>, которые располагаются внутри <select>.

Для систематизации списков применяется элемент <optgroup>...</optgroup>, который создает заголовки в списках.

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

Таблица 5. Атрибуты элемента <select>
Атрибут Значение / описание
autofocus Устанавливает автоматический фокус на элементе при загрузке страницы.
disabled Отключает раскрывающийся список.
form Определяет форму, которой принадлежит данный список. В качестве значения атрибута указывается идентификатор формы.
multiple Дает возможность выбора одного или нескольких пунктов, для этого при выборе нужно нажать и удерживать нажатой клавишу Ctrl.
name Определяет имя для выпадающего списка. Значение атрибута содержит название, отражающее тематику списка.
required Выводит сообщение о том, что пользователь должен выбрать значение из раскрывающегося списка перед отправкой формы.
size Задает количество одновременно видимых на экране элементов списка. Если количество элементов списка превышает установленное количество, появляется полоса прокрутки. Значение атрибута задается целым положительным числом.
Таблица 6. Атрибуты элемента <option>
Атрибут Значение / описание
disabled Делает недоступным для выбора элемент списка.
label Задает укороченную версию для элемента, которая будет отражаться в выпадающем списке. Значение атрибута содержит текст, описывающий соответствующий пункт выпадающего списка.
selected Отображает выбранный элемент списка по умолчанию при загрузке страницы браузером.
value Указывает значение, которое будет отправлено на сервер при отправке формы.
Таблица 7. Атрибуты элемента <optgroup>
Атрибут Значение / описание
disabled Отключает данную группу элементов списка для выбора.
label Задает заголовок для группы элементов выпадающего списка. Значение атрибута содержит текст, недоступный для выбора, который будет располагаться над соответствующими пунктами списка. Текст выделяется в браузере жирным начертанием.

6. Надписи к полям формы

Надписи к элементам формы создаются с помощью элемента <label>...</label>. Существует два способа группировки надписи и поля. Если поле находится внутри элемента <label>, то атрибут for указывать не нужно.

<!-- с указанием атрибута for -->
<label for="comments">Когда вы последний раз летали на самолете?</label>
<textarea></textarea>

<!-- без атрибута for -->
<p><label>Кошка<input type="checkbox"></label></p>
Таблица 8. Атрибуты элемента <label>
Атрибут Значение / описание
for Определяет, к какому полю формы привязан данный элемент. Можно создавать поясняющие надписи к следующим элементам формы: <input>, <textarea>, <select>. Значение атрибута содержит идентификатор поля формы.

7. Кнопки

Элемент <button>...</button> создает кликабельные кнопки. В отличие от кнопок, созданных <input> (<input type="submit"></input>, <input type="image">, <input type="reset">, <input type="button">), внутрь элемента <button> можно поместить контент — текст или изображение.

Для корректного отображения элемента <button> разными браузерами нужно указывать атрибут type, например, <button type="submit"></button>.

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

Таблица 9. Атрибуты элемента <button>
Атрибут Значение / описание
autofocus Устанавливает фокус на кнопке при загрузке страницы.
disabled Отключает кнопку, делая ее некликабельной.
form Указывает на одну или несколько форм, которым принадлежит данная кнопка. Значение атрибута — идентификатор соответствующей формы.
formaction Значение атрибута содержит url-адрес обработчика данных формы, отправляемых при нажатии на кнопку. Только для кнопки типа type="submit". Переопределяет значение атрибута action, указанного для элемента <form>.
formenctype Задает тип кодировки данных формы перед отправкой на сервер при нажатии на кнопки типа type="submit". Переопределяет значение атрибута enctype, указанного для элемента <form>. Возможные значения:
application/x-www-form-urlencoded — значение по умолчанию. Все символы перед отправкой будут закодированы.
multipart/form-data — символы не кодируются. Используется в случае, когда с помощью формы загружаются файлы.
text/plain — символы не кодируются, а пробелы заменяются на символ +.
formmethod Атрибут определяет метод, который браузер будет использовать для отправки формы. Переопределяет значение атрибута method, указанного для элемента <form>. Указывается только для кнопок типа type="submit". Возможные значения:
get — данные из формы (пара имя/значение) добавляются в url-адрес и отправляются на сервер. Данный способ имеет ограничения по размеру отправляемых данных и не подходит для отправки паролей и конфиденциальной информации.
post — данные из формы добавляются в виде http-запроса. Метод является более надежным и безопасным, чем get и не имеет ограничений по размеру.
formnovalidate Атрибут задает, что данные формы не должны проверяться при отправке. Указывается только для кнопок типа type="submit".
formtarget Атрибут задает, в каком окне выводить результат после отправки формы. Указывается только для кнопок типа type="submit". Переопределяет значение атрибута target, указанного для элемента <form>.
_blank — загружает ответ в новое окно/вкладку
_self — загружает ответ в то же окно (значение по умолчанию)
_parent — загружает ответ в родительский фрейм
_top — загружает ответ во весь экран
framename — загружает ответ во фрейм с указанным именем.
name Задает имя кнопки, значение атрибута — текст. Используется для ссылки на данные формы, после того как форма была отправлена, или для ссылки на данную кнопку (кнопки) в JavaScript.
type Определяет тип кнопки. Возможные значения:
button — кликабельная кнопка
reset — кнопка сброса, возвращает первоначальное значение
submit — кнопка для отправки данных формы.
value Задает значение по умолчанию, отправляемое при нажатии на кнопку.

8. Флажки и переключатели в формах

Флажки в формах задаются с помощью конструкции <input type="checkbox">, а переключатель — при помощи <input type="radio">.

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

Элемент <label> применяется при реализации выбора с помощью переключателей и флажков. Можно выбрать нужный пункт, просто щелкая кнопкой мыши на тексте, связанном с ним. Для этого нужно поместить <input> внутрь элемента <label>.

HTML формы

Элементы формы такие как: текстовые поля, флажки, переключатели, кнопки и т.д., прописываются в контейнере <form>...</form>. Чаще всего элементы формы создаются при помощи тега <input>. При помощи атрибута type указывается тип элемента.

Рассмотрим следующий код:

<form>
    <p><label>Введите логин:</label> <input type="text"></p>
    <p><label>Введите пароль:</label> <input type="password"></p>
    <p><button>Войти</button></p>
</form>

В браузере получим примерно такую форму:

Здесь:

  • тег <form> – является контейнером для элементов формы, в нем также можно использовать теги для разметки страницы;
  • тег <label>– создает метку для элемента формы;
  • тег <input> – создает элемент формы, при помощи атрибута type указывается какой именно элемент нужно отобразить:
    • <input type="text"> – создает текстовое поле;
    • <input type="password"> – создает поле для ввода пароля. Данный тег не требует закрывающего тега;
  • тег <button> – создает кнопку.

Текстовая область

При помощи тега <textarea> мы можем создать текстовую область, в которой пользователь сможет вводить длинные сообщения:

<form>
    <p><label>Введите ваше сообщение:</label></p>
    <p><textarea></textarea></p>
    <p><button>Отправить</button></p>
</form>

В браузере получим:

Выпадающий список

Тег <select> создает на странице список, каждое значение из списка прописывается между тегами <option>...<option>:

<select>
    <option>Значение 1</option>
    <option>Значение 2</option>
    <option>Значение 3</option>
</select>

В данном примере вы можете выбрать только одно значение из списка:

Чтобы была возможность выбрать несколько значений из списка, то используйте атрибут multiple с таким же значением: <select multiple="multiple">:

Флажки и переключатели

Чтобы создать на странице флажки, необходимо создать поле с типом checkbox: <input type="checkbox">:

<form>
    <p><label><input type="checkbox">Значение один</label></p>
    <p><label><input type="checkbox">Значение два</label></p>
    <p><label><input type="checkbox">Значение три</label></p>
</form>

Необязательно эти поля прописывать между тегами <label>...</label>.

Чтобы создать на странице переключатели, необходимо создать поле с типом radio, и указать атрибут name с каким-нибудь значением: <input type="radio" name="rad">.

<form>
    <p><label><input type="radio" name="rad">Значение один</label></p>
    <p><label><input type="radio" name="rad">Значение два</label></p>
    <p><label><input type="radio" name="rad">Значение три</label></p>
</form>

Обратите внимание, что значение атрибута nameв группе переключателей должно быть одинаковым, иначе переключатели будут работать как флажки, т.е. можно будет выбрать сразу все.

Если вы хотите по умолчанию сделать выбранным один из пунктов, то используйте атрибут checked с таким же значением: <input type="radio" name="rad" checked="checked">. Для флажков соответственно можно указать этот атрибут у нескольких пунктов сразу.

Поле для выбора файла

Используйте тип поля file, для возможности выбора файла с компьютера: <input type="file">:

<form>
    <p><input type="file"></p>
    <p><button>Отправить</button></p>
</form>

Вид в окне браузера:

Другие варианты кнопок

  • <input type="button" value="Название для кнопки"> – обычная кнопка.
  • <input type="image" src="Путь к картинке"> – кнопка в виде картинки. Через атрибут src указываем путь к картинке.
  • <input type="submit" value="Название для кнопки"> – кнопка для отправки данных формы.
  • <input type="reset" value="Название для кнопки"> – кнопка для очистки формы от введенный в нее данных.

Эти же значения атрибута type, кроме значения image, можно применить к кнопке, созданной при помощи тега <button></button>. В отличие от кнопок, созданных через тег <input>, эту кнопку можно размещать вне контейнера <form>...</form>, это не будет считаться ошибкой. Также внутри этой кнопки можно размещать другие строчные теги.


Видео к уроку

Введение в формы HTML5 и новые атрибуты.

От автора: несомненно, вы каждый день взаимодействуете в Сети по меньшей мере с одной формой. Занимаетесь ли вы поиском контента, или входите в свой аккаунт на странице Facebook’а – в вебе применение онлайн-форм является одной из самых обычных задач. Для дизайнеров и разработчиков создание форм отличается некоторым однообразием, особенно написание для них скриптов валидации данных. HTML5 представляет множество новых атрибутов, типов input и прочих элементов инструментария разметки.

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

Станет видно, что новые свойства значительно облегчат нам жизнь при произведении впечатления на пользователей. Что тут самое привлекательное? Применять их можно уже сейчас. Мы начнем с очень краткой истории форм HTML5.

Эта статья – отрывок из Главы 6 книги Начинаем изучать HTML5 и CSS3: Эволюция Сети (Beginning HTML5 and CSS3: The Web Evolved) Кристофера Мерфи, Оли Стадхольма, Ричарда Кларка и Дивья Маньяна (Christopher Murphy, Oli Studholme, Richard Clark и Divya Manian), опубликованной издательством Apress.

Примечание: Так как эта статья является отрывком из книги, с момента создания скриншотов выполнение браузером атрибутов и типов ввода данных могло измениться. К тому же с момента публикации могла расшириться браузерная поддержка, поэтому по вопросу ее текущего состояния, пожалуйста, обратитесь к приведенным в конце статьи ссылкам.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

История форм HTML5

Раздел форм в HTML5 изначально был спецификацией под названием Web Forms 2.0, где добавлялись новые типы инструментов управления формами. Начатая в Opera и редактировавшаяся тогдашним сотрудником Opera Айэном Хиксоном (Ian Hickson), она была утверждена W3C в начале 2005г. Работа изначально проводилась W3C. Затем ее объединили со спецификацией Web Applications 1.0 с целью создания основы спецификации HTML5 отколовшейся рабочей группы Web Hypertext Application Technology Working Group (WHATWG).

Применение принципов дизайна HTML5

Одна из лучших характеристик форм HTML5 – то, что сразу же можно применять почти все новые типы ввода данных и атрибуты. Им не требуются никаких дополнительных фишек, хаков и прочих заплаток. Не то, чтобы они все уже «поддерживались», но в современных браузерах, которые по-настоящему их поддерживают, они способны проделывать классные вещи – и красиво деградировать в тех браузерах, которые их не понимают. Все это – благодаря дизайнерским принципам HTML5. В данном случае мы особо ссылаемся на принцип красивой деградации. В целом, непростительно не начать сразу применять эти функции. Фактически это будет значить, что вы находитесь впереди планеты всей.

Атрибуты форм HTML5

В этой статье мы рассмотрим 14 следующих новых атрибутов.

placeholder

Первым идет атрибут placeholder, который позволяет нам установить текст-заполнитель, что до последнего времени делалось в HTML4 с помощью атрибута value. Его можно применять только для коротких описаний. Для более длинных применяйте атрибут title. Различие с HTML4 состоит в том, что текст показывается, только когда поле пустое и не в фокусе. Как только поле попадает в фокус (например, при щелчке мышью или указании на поле), и вы начинаете печатать, текст просто исчезает. Очень похоже на поле поиска в Safari.

Давайте разберемся, как выполнять атрибут placeholder.

<input type=»text» name=»user-name» placeholder=»at least 3 characters»>

<input type=»text» name=»user-name» placeholder=»at least 3 characters»>

Вот так! Я слышу, как вы думаете: «Что такого в нем примечательного? Я всю жизнь делал это в JavaScript’е». Да, верно. Однако с HTML5 он становится частью браузера, означая, что требуется писать меньше скрипта для достижения более доступного кроссбраузерного решения (даже при отключенном JavaScript’е). На рисунке показана работа атрибута текста-заполнителя в Chrome’е.

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

Примечание: Для назначения стилей тексту-заполнителю не существует официального псевдокласса, но и Mozilla (создатели Firefox), и WebKit предлагают для свойств стилей вендорные префиксы (-mozplaceholder и –webkit-input-placeholder). Можно с уверенностью предполагать, что псевдокласс станет стандартом стилей текста-заполнителя. Подробности можно узнать из тематической дискуссии по этому вопросу в списке рассылки WHATWG.

autofocus

Автофокус делает в точности то, что означает. Добавлении его к input автоматически фокусирует поле при отображении страницы. Как и в случае с placeholder’ом, в прошлом для autofocus’а мы применяли JavaScript.

Однако у традиционных методов JavaScript’а имеются серьезные проблемы юзабилити. Например, если пользователь начинает заполнять форму до полной загрузки скрипта, он будет (неприятно) возвращен после загрузки к первому полю формы. Атрибут autofocus в HTML5 обходит эту проблему, фокусируясь по мере загрузки документа, при этом не нужно ждать загрузки JavaScript’а. Однако мы рекомендуем применять его для предотвращения проблем с юзабилити только для тех страниц, чья единственная цель – форма (типа Google’а).

Это – булев атрибут (за исключением случаев, когда вы пишете XHTML5; смотрите примечание) и выполняется как здесь:

<input type=»text» name=»first-name» autofocus>

<input type=»text» name=»first-name» autofocus>

Его поддерживают все современные браузеры и, как placeholder, не выполняющие autofocus браузеры просто игнорируют его.

Примечание: Некоторые новые атрибуты формы HTML5 –булевы. Это просто означает, что они устанавливаются, если имеются, и не устанавливаются, если отсутствуют. В HTML5 их можно записать несколькими различными способами.

autofocus autofocus=»» autofocus=»autofocus»

autofocus

autofocus=»»

autofocus=»autofocus»

Однако при написании XHTML5 вам следует применять стиль autofocus=»autofocus».

autocomplete

Атрибут autocomplete помогает пользователям заполнять формы на основе предыдущего введения данных. Атрибут употребляется со времен IE5.5, но окончательно был стандартизирован как часть HTML5. По умолчанию он активен. Это значит, что в основном нам не придется его применять. Однако, если хотите настоять на введении в поле формы каждый раз после ее заполнении (в противоположность автозаполнения поля браузером), то выполните его следующим образом:

<input type=»text» name=»tracking-code» autocomplete=»off»>

<input type=»text» name=»tracking-code» autocomplete=»off»>

Состояние автозаполнения поля отменяет любое состояние autocomplete, установленное на содержащем элементе формы.

required

Атрибут required не требует представления; как и autofocus, он делает именно то, что вы от него ожидаете. При добавлении его в поле формы браузер требует от пользователя ввести данные в это поле до отправки формы. Он заменяет базовую валидацию формы, в данное время выполняемую с помощью JavaScript’а, делая все более удобным и экономя нам еще немножко времени разработки. required – это булев атрибут, как autofocus. Давайте посмотрим его в действии.

<input type=»text» name=»given-name» required>

<input type=»text» name=»given-name» required>

В настоящее время required реализован только в Opera 9.5+, Firefox 4+, Safari 5+, Internet Explorer 10 и Chrome 5+, так что до поры до времени вам придется продолжить писать скрипты проверки заполнения полей на клиентской стороне прочих браузеров (*кхе-кхе* IE!). Opera, Chrome и Firefox показывают пользователю при отправке формы сообщение об ошибке. В большинстве браузеров ошибки затем локализуются на основе задекларированного языка. Safari не показывает сообщение об ошибке при отправке, а вместо этого помещает это поле в фокус.

Отображение по умолчанию сообщения об ошибке «required» зависит от отдельного браузера; в настоящее время «пузырю» с сообщением об ошибке во всех браузерах нельзя назначать стили CSS. У Chrome’а, тем не менее, имеется собственное свойство, которое можно применять для назначения стилей сообщению об ошибке. Питер Гастон (Peter Gasston) написал статью о синтаксисе. Также можно назначить стили вводу данных с помощью псевдокласса :required. Альтернатива состоит в отмене формулировки и стилей в JavaScript’е с помощью метода setCustomValidity(). Также очень важно не забывать, что такая браузерная валидация не заменяет валидацию серверную.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

pattern

Атрибут pattern обычно сильно волнует многих разработчиков (ну, настолько волнует, как любой атрибут формы). Он определяет JavaScript регулярное выражение для поля, значение которого нужно проверить. Pattern облегчает нам применение отдельной проверки кодов, номеров счетов и так далее. Возможности pattern обширны, и вот всего лишь один простой пример с использованием номера продукта.

<label>Product Number: <input pattern=»[0-9][A-Z]{3}» name=»product» type=»text» title=»Single digit followed by three uppercase letters.»/> </label>

<label>Product Number:

<input pattern=»[0-9][A-Z]{3}» name=»product» type=»text» title=»Single digit followed by three uppercase letters.»/>

</label>

Этот шаблон предписывает, что номер продукта должен быть одной цифрой [0-9], за которой следуют три заглавные буквы [A-Z]{3}. Посмотреть еще шаблоны можно на вебсайте шаблонов HTML5, где имеется перечень обычных регулярных выражений шаблонов стиля для того, чтобы помочь вам начать с ними работать.

Как и в случае с required, Opera 9.5+, Firefox 4+, Safari 5+, Internet Explorer 10 и Chrome 5+ — единственные браузеры, поддерживающие в настоящее время шаблоны. Однако остальные скоро их нагонят по причине быстрого продвижения рынка браузеров.

Элементы list и datalist

Атрибут list дает пользователю возможность ассоциировать список опций с отдельным полем. Значение атрибута списка list должно быть таким же, как ID элемента datalist, находящегося в том же документе. Элемент datalist для HTML5 является новым и представляет предопределенный список опций элементов управления формы. Он работает аналогично внутрибраузерным полям поиска, автоматически дополняющим слова при введении текста.

Следующий пример показывает, как сочетаются list и datalist.

<label>Your favorite fruit: <datalist> <option value=»Blackberry»>Blackberry</option> <option value=»Blackcurrant»>Blackcurrant</option> <option value=»Blueberry»>Blueberry</option> <!— … —> </datalist> If other, please specify: <input type=»text» name=»fruit» list=»fruits»> </label>

<label>Your favorite fruit:

<datalist>

<option value=»Blackberry»>Blackberry</option>

<option value=»Blackcurrant»>Blackcurrant</option>

<option value=»Blueberry»>Blueberry</option>

<!— … —>

</datalist>

If other, please specify:

<input type=»text» name=»fruit» list=»fruits»>

</label>

Добавив элемент select в datalist, можно обеспечить отличную деградацию, просто применив элемент option. Вот шаблон элегантной разметки, созданной Джереми Кейтом (Jeremy Keith), идеально подходящий принципам постепенной деградации HTML5.

<label>Your favorite fruit: <datalist> <select name=»fruits»> <option value=»Blackberry»>Blackberry</option> <option value=»Blackcurrant»>Blackcurrant</option> <option value=»Blueberry»>Blueberry</option> <!— … —> </select> If other, please specify: </datalist> <input type=»text» name=»fruit» list=»fruits»> </label>

<label>Your favorite fruit:

<datalist>

<select name=»fruits»>

<option value=»Blackberry»>Blackberry</option>

<option value=»Blackcurrant»>Blackcurrant</option>

<option value=»Blueberry»>Blueberry</option>

<!— … —>

</select>

If other, please specify:

</datalist>

<input type=»text» name=»fruit» list=»fruits»>

</label>

Браузерная поддержка list и datalist в настоящее время ограничена Opera 9.5+, Chrome 20+, Internet Explorer 10 и Firefox 4+.

multiple

На шаг вперед можно продвинуть свои list и datalist, применив булев атрибут multiple, чтобы можно было ввести из перечня данных более одного значения. Вот пример.

<label>Your favorite fruit: <datalist> <select name=»fruits»> <option value=»Blackberry»>Blackberry</option> <option value=»Blackcurrant»>Blackcurrant</option> <option value=»Blueberry»>Blueberry</option> <!— … —> </select> If other, please specify: </datalist> <input type=»text» name=»fruit» list=»fruits» multiple> </label>

<label>Your favorite fruit:

<datalist>

<select name=»fruits»>

<option value=»Blackberry»>Blackberry</option>

<option value=»Blackcurrant»>Blackcurrant</option>

<option value=»Blueberry»>Blueberry</option>

<!— … —>

</select>

If other, please specify:

</datalist>

<input type=»text» name=»fruit» list=»fruits» multiple>

</label>

Однако multiple не применяется исключительно с datalist. Дальнейшим примером употребления multiple могут быть адреса электронной почты при пересылке элементов другу или вложении файлов, как показано здесь:

<label>Upload files: <input type=»file» multiple name=»upload»></label>

<label>Upload files:

<input type=»file» multiple name=»upload»></label>

multiple поддерживается в Firefox 3.6+, Safari 4+, Opera 11.5+, Internet Explorer 10 и Chrome 4+.

novalidate и formnovalidate

Атрибуты novalidate и formnovalidate обозначают, что при отправке формы не нужно проводить проверку правильности данных. Они оба – булевы атрибуты. formnovalidate может быть применен к input-ам с типом submit или image. Атрибут novalidate можно установить только к элементу form.

Пример использования атрибута formnovalidate может быть приведен на кнопке «сохранить черновик», где у формы есть поля, нужные для отправки черновика, но не требующиеся для сохранения черновика. novalidate будет применяться в тех случаях, когда вам не нужно делать валидацию формы, но требуется добиться преимуществ более удобного пользовательского интерфейса, предлагаемых новыми типами ввода данных.

Применение formnovalidate видно на следующем примере:

<form action=»process.php»> <label for=»email»>Email:</label> <input type=»text» name=»email» value=»[email protected]»> <input type=»submit» formnovalidate value=»Submit»> </form>

<form action=»process.php»>

<label for=»email»>Email:</label>

<input type=»text» name=»email» value=»[email protected]»>

<input type=»submit» formnovalidate value=»Submit»>

</form>

А этот пример показывает применение novalidate:

<form action=»process.php» novalidate> <label for=»email»>Email:</label> <input type=»text» name=»email» value=»[email protected]»> <input type=»submit» value=»Submit»> </form>

<form action=»process.php» novalidate>

<label for=»email»>Email:</label>

<input type=»text» name=»email» value=»[email protected]»>

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

</form>

form

Атрибут form используется для соединения элементов input, select или textarea с формой (известных как владельцы формы). Применение form означает, что элементу не нужно быть дочерним по отношению к связанной форме и его можно оттуда убрать в исходниках. Основной случай его применения состоит в том, что кнопки, размещенные в таблицах, теперь можно привязать к форме.

<input type=»button» name=»sort-l-h» form=»sort»>

<input type=»button» name=»sort-l-h» form=»sort»>

formaction, formenctype, formmethod и formtarget

Каждый из атрибутов formaction, formenctype, formmethod и formtarget имеет соответствующий атрибут к элементу form, с чем вы познакомитесь в HTML4, так что давайте пройдемся по ним вкратце. Эти новые атрибуты были представлены главным образом потому, что вам могут потребоваться альтернативные действия для различных кнопок отправки, в противоположность нескольким формам в документе.

formaction

formaction определяет файл или приложение, которое будет отправлять форма. Он действует так же, как атрибут action на элемент form, и может применяться только с кнопкой отправки или изображения (type=»submit» или type=»image»). При отправке формы браузер сначала проверяет наличие атрибута formaction; если тот отсутствует, он продолжает искать в форме атрибут action.

<input type=»submit» value=»Submit» formaction=»process.php»>

<input type=»submit» value=»Submit» formaction=»process.php»>

formenctype

formenctype подробно описывает, как данные формы кодируются методом POST. Он действует так же, как атрибут enctype на элемент формы, и может применяться с кнопкой отправки или изображения (type=»submit»или type=»image»). Значение по умолчанию, если не включено – application/x-www-formurlencoded.

<input type=»submit» value=»Submit» formenctype=»application/x-www-form-urlencoded»>

<input type=»submit» value=»Submit» formenctype=»application/x-www-form-urlencoded»>

formmethod

formmethod определяет, который из методов HTTP (GET, POST, PUT, DELETE) будет применяться для отправки данных формы. Действует так же, как атрибут метода на элемент формы, и используется только с кнопкой отправки или изображения (type=»submit» или type=»image»).

<input type=»submit» value=»Submit» formmethod=»POST»>

<input type=»submit» value=»Submit» formmethod=»POST»>

formtarget

formtarget определяет target window для результатов формы. Действует так же, как атрибут target на элемент form, и может применяться только с кнопкой отправки или изображения (type=»submit» or type=»image»).

<input type=»submit» value=»Submit» formtarget=»_self»>

<input type=»submit» value=»Submit» formtarget=»_self»>

Резюме атрибутов формы

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

Форму-модель, в которой применяются некоторые из приведенных в этой статье примеров, можно найти на демо-странице форм HTML5.

В статье мы дали понять, которые из браузеров имеют поддержку типов ввода данных и атрибутов форм HTML5. При условии постоянного выхода новых версий браузеров может быть сложно уследить за тем, что поддерживается, а что нет. Если хотите быть в курсе текущего прогресса, мы предлагаем посещать canius или FindMeByIP или изучение форм HTML5 с Wufoo.

Автор: Richard Clark

Источник: //html5doctor.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Верстка. Быстрый старт

Практический курс по верстке адаптивного сайта с нуля!

Смотреть

Ввод формы | Компоненты | BootstrapVue

Создайте входы различных типов, такие как: text , password , number , url , email , search , range

 <шаблон>
  <дел>
    
    
Значение: {{ text }}
<скрипт> экспорт по умолчанию { данные() { возвращение { текст: '' } } }

Тип ввода

по умолчанию используется ввод text , но вы можете установить свойство type на один из поддерживаемых типов браузера HTML5: text , password , Email , номер , URL , TEL , поиск , , , , дата , dateTime , dateTime-local , месяц , неделя , Time , Диапазон , или цвет .

 <шаблон>
  
    
      
        
      
      
        
      
    
  


<скрипт>
  экспорт по умолчанию {
    данные() {
      возвращение {
        типы: [
          'текст',
          'номер',
          'электронное письмо',
          'пароль',
          'поиск',
          'адрес',
          'тел',
          'Дата',
          'время',
          'диапазон',
          'цвет'
        ]
      }
    }
  }


 

Если для свойства type задан неподдерживаемый тип ввода (см. выше), будет отображен текст и будет выдано предупреждение консоли.

Предостережения относительно типов ввода:

  • Не все браузеры поддерживают все типы ввода, и некоторые типы не отображаются в одном и том же формате в разных типах/версиях браузеров. См. Могу ли я использовать.
  • Браузеры, которые не поддерживают определенный тип, будут возвращаться к типу ввода text (даже если визуализированная разметка атрибута type показывает запрошенный тип).
  • Не выполняется проверка того, поддерживается ли запрошенный тип ввода браузером.
  • Chrome потерял поддержку datetime в версии 26, Opera в версии 15 и Safari в iOS 7. Вместо использования datetime , поскольку поддержка должна быть объявлена ​​устаревшей, используйте date и time как два отдельных входа.
  • дата и время входные данные являются собственными типами браузера и не являются настраиваемым средством выбора даты/времени.
  • Для входных данных стиля даты и времени, если они поддерживаются, отображаемое значение в графическом интерфейсе может отличаться от того, что возвращается его значением (т.е. порядок год-месяц-число).
  • Независимо от типа ввода значение всегда возвращается как строковое представление.
  • v-model.lazy не поддерживается (ни каким-либо пользовательским компонентом Vue). Вместо этого используйте ленивую опору .
  • Модификаторы v-model .number и .trim могут вызвать неожиданные скачки курсора, когда пользователь печатает (это проблема Vue с v-model на пользовательских компонентах). Избегайте использования этих модификаторов . Вместо этого используйте номер или отделку .
  • Старая версия Firefox может не поддерживать только для чтения для диапазона ввода .
  • типов ввода, которые не поддерживают мин , MAX и этап (т.е. 50003 Text , пароль , TEL , Email , URL и т. Д.) Будут личным образом игнорировать эти значения ( хотя они все равно будут отображаться во входной разметке), если указаны значения.

Предостережения по вводу предиктивного текста и вводу композиции IME:

  • При использовании автоматически предлагаемых слов с предиктивным вводом текста модель v-model не будет обновляться до тех пор, пока не будет выбрано автоматически предлагаемое слово (или не будет введен пробел). ). Если автоматически предложенное слово не выбрано, v-модель будет обновляться текущим отображаемым текстом ввода, когда ввод размыт.
  • При использовании состава IME (например, китайского, японского и т. д.) модель v-model не будет обновляться, пока состав IME не будет завершен.

Ввод типа диапазона

Вводы с типом range визуализируются с использованием класса Bootstrap v4 .custom-range . Трек (фон) и миниатюра (значение) имеют одинаковый стиль в разных браузерах.

Входные значения диапазона имеют неявные значения для мин. и макс. из 0 и 100 соответственно. Вы можете указать новые значения для тех, кто использует пропсы min и max .

 <шаблон>
  <дел>
    
    
    
Значение: {{ значение }}
<скрипт> экспорт по умолчанию { данные() { возвращение { значение: «2» } } }

По умолчанию входные данные диапазона «привязываются» к целочисленным значениям.Чтобы изменить это, вы можете указать значение шага . В приведенном ниже примере мы удваиваем количество шагов, используя step=»0.5″.

 <шаблон>
  <дел>
    
    
    
Значение: {{ значение }}