Input type html submit: HTML input type=»submit»

Элементы типа submit отображаются как кнопки.

<input> Элементы <input> типа submit отображаются как кнопки. Когдапроисходит событие click (обычно из-за того, что пользователь нажал кнопку), пользовательский агент пытается отправить форму на сервер.

Value	Строка,используемая в качестве метки кнопки
Events	click
Поддерживаемые общие атрибуты	type и value
IDL attributes	value
DOM interface	HTMLInputElement
Methods	None

Value

Атрибут value элемента <input type="submit"> содержит строку, которая отображается как метка кнопки. В противном случае кнопки не имеют истинного значения. value

Установка атрибута значения

<input type="submit" value="Send Request">

Опуская атрибут значения

Если вы не укажете value , кнопка будет иметь метку по умолчанию, выбранную пользовательским агентом. Этот ярлык, вероятно, будет чем-то вроде «Отправить» или «Отправить запрос». Вот пример кнопки отправки с меткой по умолчанию в вашем браузере:

<input type="submit">

Additional attributes

Помимо атрибутов, общих для всех элементов <input> , входные данные кнопки submit поддерживают следующие атрибуты.

formaction

Строка, указывающая URL-адрес для отправки данных. Это имеет приоритет над атрибутом action в элементе <form> , которому принадлежит <input> .

Этот атрибут также доступен для элементов <input type="image"> и <button> .

formenctype

Строка,определяющая метод кодирования при отправке данных формы на сервер.Существует три допустимых значения:

application/x-www-form-urlencoded

Это значение по умолчанию отправляет данные формы в виде строки после URL-кодирования текста с использованием такого алгоритма, как encodeURI() .

multipart/form-data

Использует FormData API для управления данными, что позволяет отправлять файлы на сервер. Вы должны использовать этот тип кодировки, если ваша форма включает какие -либо элементы <input> type file ( <input type="file"> ).

text/plain

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

Если указано, значение formenctype атрибута переопределяет форму , владеющей в action атрибут.

Этот атрибут также доступен для элементов <input type="image"> и <button> .

formmethod

Строка, указывающая метод HTTP для использования при отправке данных формы; это значение переопределяет любой атрибут method указанный в форме-владельце. Допустимые значения:

get

URL-адрес создается, начиная с URL-адреса, заданного formaction или action , добавляя знак вопроса («?»), А затем добавляя данные формы, закодированные, как описано с помощью formenctype или атрибута enctype формы . Затем этот URL-адрес отправляется на сервер с помощью HTTP- запроса на get . Этот метод хорошо работает для простых форм, содержащих только символы ASCII и не имеющих побочных эффектов. Это значение по умолчанию.

post

Данные формы включаются в тело запроса, который отправляется на URL-адрес, указанный в formaction или action , с использованием метода HTTP post . Этот метод поддерживает сложные данные и вложения файлов.

dialog

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

Этот атрибут также доступен для элементов <input type="image"> и <button> .

formnovalidate

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

Этот атрибут также доступен для элементов <input type="image"> и <button> .

formtarget

Строка, указывающая имя или ключевое слово, указывающее, где отображать ответ, полученный после отправки формы. Строка должна быть именем контекста просмотра (то есть вкладки, окна или <iframe> . Указанное здесь значение переопределяет любую цель, заданную target атрибутом в <form> , которая владеет этим вводом.

В дополнение к реальным названиям вкладок,окон или встроенных рамок,есть несколько специальных ключевых слов,которые могут быть использованы:

_self

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

_blank

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

_parent

Загружает ответ в родительский контекст просмотра текущего. Если родительский контекст отсутствует, он ведет себя так же, как _self .

_top

Загружает ответ в контекст просмотра верхнего уровня; это контекст просмотра, который является самым верхним предком текущего контекста. Если текущий контекст является самым верхним контекстом, он ведет себя так же, как _self .

Этот атрибут также доступен для элементов <input type="image"> и <button> .

Использование кнопок отправки

<input type="submit"> Кнопки <input type = «submit»> используются для отправки форм. Если вы хотите создать пользовательскую кнопку, а затем настроить ее поведение с помощью JavaScript, вам необходимо использовать <input type="button"> или, что еще лучше, элемент <button> .

Если вы решите использовать элементы <button> для создания кнопок в вашей форме, имейте это в виду: если внутри <form> есть только один <button> > , эта кнопка будет рассматриваться как кнопка «отправить». Таким образом, вы должны иметь привычку явно указывать, какая кнопка является кнопкой отправки.

Простая кнопка отправки

Начнем с создания формы с простой кнопкой отправки:

<form>
  <div>
    <label for="example">Let's submit some text</label>
    <input type="text" name="text">
  </div>
  <div>
    <input type="submit" value="Send">
  </div>
</form>

Это выглядит так:

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

После отправки пара имя / значение данных отправляется на сервер. В этом случае строка будет иметь вид

text=usertext , где «usertext» — это текст, введенный пользователем, закодированный для сохранения специальных символов. Куда и как будут отправлены данные, зависит от конфигурации <form> ; см. « Отправка данных формы» для получения более подробной информации.

Добавление сочетания клавиш отправки

Сочетания клавиш, также известные как клавиши доступа и их эквиваленты, позволяют пользователю активировать кнопку с помощью клавиши или комбинации клавиш на клавиатуре. Чтобы добавить сочетание клавиш к кнопке отправки — так же, как и к любому <input> , для которого это имеет смысл, — вы используете глобальный атрибут accesskey .

В этом примере,sуказывается в качестве клавиши доступа (необходимо нажать кнопкуsплюс специальные клавиши-модификаторы для комбинации браузера/ОС. Чтобы избежать конфликтов с собственными сочетаниями клавиш пользовательского агента, для клавиш доступа используются разные клавиши-модификаторы, чем для других сочетаний клавиш на главном компьютере.

См. accesskey для получения дополнительной информации.

Вот предыдущий пример сsдобавлен ключ доступа:

<form>
  <div>
    <label for="example">Let's submit some text</label>
    <input type="text" name="text">
  </div>
  <div>
    <input type="submit" value="Send"
     accesskey="s">
  </div>
</form>

Например,в Firefox для Mac,нажав кнопкуControl—Option—Sзапускает кнопку Отправить,в то время как Chrome на Windows используетAlt+S.

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

Добавление всплывающей подсказки к кнопке (используя атрибут title ) также может помочь, хотя это не полное решение для целей доступности.

Отключение и включение кнопки отправки

Чтобы отключить кнопку отправки, укажите для нее атрибут disabled ,например:

<input type="submit" value="Send" disabled>

Вы можете включать и отключать кнопки во время выполнения, установив для disabled значение true или false ; в JavaScript это выглядит как btn.disabled = true или btn.disabled = false .

Примечание. Дополнительные сведения о включении и отключении кнопок см. На странице

<input type="button"> .

Validation

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

Examples

Мы включили простые примеры выше.Больше нечего сказать о кнопках отправки. Есть причина,по которой такой вид управления иногда называют «простой кнопкой».

Specifications

Specification
Стандарт HTML # submit-button-state-(type=submit)

Browser compatibility

	Desktop	Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	WebView Android	Chrome Android	Firefox для Android	Opera Android	Safari на IOS	Samsung Internet
submit	1	12	1 В отличии от других браузеров, Firefox по умолчанию сохраняется динамическое отключенное состояние в виде <button> по загрузке страницы. Используйте атрибут autocomplete для управления этой функцией.	Yes	Yes	1	Yes	Yes	4 В отличии от других браузеров, Firefox по умолчанию сохраняется динамическое отключенное состояние в виде <button> по загрузке страницы. Используйте атрибут autocomplete для управления этой функцией.	Yes	Yes	Yes

See also

• <input> иинтерфейс HTMLInputElement , который его реализует.
• Формы и кнопки
• Forms (accessibility)
• HTML forms
• <button> элемент
• Совместимость свойств CSS

---

HTML

• <input type=»search»>

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

• Размер элемента физического ввода

  Физический размер поля ввода можно контролировать с помощью атрибута.

• <input type=»tel»>

  Элементы типа <input> позволяют пользователю вводить и редактировать телефонный номер.

• Validation

  Как мы уже упоминали ранее, довольно сложно предоставить универсальные телефонные номера решения для проверки на стороне клиента.

• 1
• …
• 119
• 120
• 121
• 122
• 123
• …
• 258
• Next

Работа с формами — JavaScript — Дока

Кратко

Скопировано

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

Трюки для работы с формами в JS проще всего показать на примере. В этой статье мы соберём форму заявки на участие в миссии по колонизации Марса. В этой форме мы немножко приправим стандартные HTML-атрибуты динамикой на JS.

Разметка и требования

Скопировано

Наша форма заявки на участие в миссии «Mars Once» будет состоять из шести полей. В форме мы собираем следующие данные:

• Имя, чтобы знать, как обращаться в ответном письме.
• Почту, чтобы знать, куда это письмо слать.
• Возраст — нужны только молодые 🤷‍♂️
• Специализацию — инженеры и учёные пригодятся для основной работы, а психологи нужны, чтобы команда друг друга не перегрызла за десятилетнюю колонизаторскую миссию.
• Работал ли человек в NASA — это большой плюс.
• Фотография, чтобы использовать в печатных материалах.

<form action="/apply/" method="POST">  <label>    Ваше имя:    <input type="text" name="name" placeholder="Илон Маск" required autofocus>  </label>  <label>    Почта:    <input type="email" name="email" placeholder="elon@musk.
  com" required>  </label>  <label>    Возраст:    <input type="number" name="age" required>  </label>  <label>    Профессия:    <select name="specialization" required>      <option value="engineer" selected>Инженер</option>      <option value="scientist">Учёный</option>      <option value="psychologist">Психолог</option>      <option value="other">Другая</option>    </select>  </label>  <label>    Я работал в NASA    <input type="checkbox" name="nasa-experience" value="1">  </label>  <label>    Фото:    <input type="file" accept="image/jpeg" name="photo" required>  </label>  <button type="submit">Отправить заявку</button></form>
          <form action="/apply/" method="POST">
  <label>
    Ваше имя:
    <input type="text" name="name" placeholder="Илон Маск" required autofocus>
  </label>
  <label>
    Почта:
    <input type="email" name="email" placeholder="elon@musk.  com" required>
  </label>
  <label>
    Возраст:
    <input type="number" name="age" required>
  </label>
  <label>
    Профессия:
    <select name="specialization" required>
      <option value="engineer" selected>Инженер</option>
      <option value="scientist">Учёный</option>
      <option value="psychologist">Психолог</option>
      <option value="other">Другая</option>
    </select>
  </label>
  <label>
    Я работал в NASA
    <input type="checkbox" name="nasa-experience" value="1">
  </label>
  <label>
    Фото:
    <input type="file" accept="image/jpeg" name="photo" required>
  </label>
  <button type="submit">Отправить заявку</button>
</form>

Открыть демо в новой вкладке

В целом форма рабочая: обязательные поля не пропустят пустые значения, атрибут type проследит, чтобы вместо почты нам не прислали номер телефона, а по нажатию на кнопку валидная форма отправит все данные.

Но нам кроме всего этого хочется:

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

Приступим.

Отправка без перезагрузки

Скопировано

Первым делом настроим отправку формы без перезагрузки страницы.

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

Предотвращаем отправку данных

Скопировано

Для «предотвращения» срабатывания событий мы можем использовать метод preventDefault() на объекте события. В нашем случае событием будет отправка формы — submit.

Если наше событие находится в переменной event, то для предотвращения поведения по умолчанию мы можем вызвать event.preventDefault().

Чтобы «соединить» форму с нашей будущей собственной отправкой данных, мы напишем функцию, которая будет «слушать» событие отправки и реагировать на него.

Найдём форму на странице, с помощью getElementById и подпишемся на событие submit с помощью addEventListener. Пока мы не будем отправлять форму, а просто напечатаем в консоль строку «Отправка!» и убедимся, что механизм работает:

function handleFormSubmit(event) {  // Просим форму не отправлять данные самостоятельно  event.preventDefault()  console.log('Отправка!')}const applicantForm = document.getElementById('mars-once')applicantForm.addEventListener('submit', handleFormSubmit)
          function handleFormSubmit(event) {
  // Просим форму не отправлять данные самостоятельно
  event. preventDefault()
  console.log('Отправка!')
}
const applicantForm = document.getElementById('mars-once')
applicantForm.addEventListener('submit', handleFormSubmit)

Мы можем просто передать функцию handleFormSubmit() как второй аргумент в addEventListener(), так как он автоматически передаст событие в качестве аргумента для handleFormSubmit().

Получится, что при отправке формы сработает событие submit, которое запустит наш обработчик handleFormSubmit().

В этот обработчик как аргумент event будет передано событие отправки. Мы вызовем event.preventDefault(), и форма не отправится самостоятельно.

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

Скопировано

Следующий шаг — собрать всё, что необходимо отправить.

Нам не хочется собирать каждое значение отдельно.

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

Вместо этого мы будем использовать возможности языка, чтобы достать все поля и элементы управления из формы. Напишем функцию serializeForm:

function serializeForm(formNode) {  console.log(formNode.elements)}function handleFormSubmit(event) {  event.preventDefault()  serializeForm(applicantForm)}const applicantForm = document.getElementById('mars-once')applicantForm.addEventListener('submit', handleFormSubmit)
          function serializeForm(formNode) {
  console.log(formNode.elements)
}
function handleFormSubmit(event) {
  event. preventDefault()
  serializeForm(applicantForm)
}
const applicantForm = document.getElementById('mars-once')
applicantForm.addEventListener('submit', handleFormSubmit)

Аргумент функции serializeForm — это элемент формы. Именно элемент — не селектор, а конкретный узел в DOM-дереве.

У форм есть свойство elements, которое содержит в себе все элементы управления и поля этой формы. Именно этим свойством мы воспользуемся, чтобы получить все данные из формы.

Если сейчас мы вызовем эту функцию, передав туда нашу форму как аргумент, то в консоли появится список всех элементов:

HTMLFormControlsCollection
  0 <input type="text" name="name" placeholder="Илон Маск" autofocus>
  1 <input type="email" name="email" placeholder="[email protected]">
  2 <input type="number" name="age">
  3 <select name="specialization">
  4 <input type="checkbox" name="nasa-experience" value="1">
  5 <input type="file" accept="image/jpeg" name="photo">
  6 <button type="submit">Отправить заявку</button>

Обратите внимание, что тип этого набора элементов — HTMLFormControlsCollection. Это не массив и, чтобы пройтись циклом по списку элементов, нужно превратить его в массив с помощью вызова Array.from().

Нам останется собрать имя и значение каждого из полей. Для начала, выведем имя и значение каждого элемента в консоль:

function serializeForm(formNode) {  const { elements } = formNode  Array.from(elements)    .forEach((element) => {      const { name, value } = element      console.log({ name, value })    })}
          function serializeForm(formNode) {
  const { elements } = formNode
  Array.from(elements)
    .forEach((element) => {
      const { name, value } = element
      console.log({ name, value })
    })
}

Мы получили список элементов, преобразовали его в массив и прошлись по каждому элементу. У каждого элемента получили поля name и value и вывели их в консоль.

В консоли после запуска получим вывод по каждому из полей:

1 {name: 'name', value: 'Alex'}
2 {name: 'email', value: 'some@mail. com'}
3 {name: 'age', value: '24'}
4 {name: 'specialization', value: 'engineer'}
5 {name: 'nasa-experience', value: '1'}
6 {name: 'photo', value: 'C:\\fakepath\\image.jpg'}
7 {name: '', value: ''}

Заметим, что последняя строчка не имеет ни названия, ни значения. Это потому, что последний элемент, который мы проверяли — это кнопка.

Чтобы элементы без названия нам не мешались, мы отфильтруем наш набор. Воспользуемся методом filter, чтобы отбросить элементы с пустым именем. Также заменим метод forEach на map — он соберёт нам массив, который хранит объект с именем и значением каждого отфильтрованного элемента.

function serializeForm(formNode) {  const { elements } = formNode  const data = Array.from(elements)    .filter((item) => !!item.name)    .map((element) => {      const { name, value } = element      return { name, value }    })  console.log(data)}
          function serializeForm(formNode) {
  const { elements } = formNode
  const data = Array. from(elements)
    .filter((item) => !!item.name)
    .map((element) => {
      const { name, value } = element
      return { name, value }
    })
  console.log(data)
}

На выходе в консоли получится массив из объектов с name и value:

[  {name: 'name', value: 'Alex'},  {name: 'email', value: '[email protected]'},  {name: 'age', value: '24'},  {name: 'specialization', value: 'engineer'},  {name: 'nasa-experience', value: '1'},  {name: 'photo', value: 'C:\\fakepath\\image.jpg'}]
          [
  {name: 'name', value: 'Alex'},
  {name: 'email', value: '[email protected]'},
  {name: 'age', value: '24'},
  {name: 'specialization', value: 'engineer'},
  {name: 'nasa-experience', value: '1'},
  {name: 'photo', value: 'C:\\fakepath\\image.jpg'}
]

Значения чекбоксов

Скопировано

Сейчас можно заметить, что nasa-experience имеет значение "1". Это неправильно:

• мы не отмечали чекбокс, а значение почему-то "1";
• в целом хотелось бы, чтобы значение этого поля было булевым.

Для этого мы можем использовать особое свойство checked, которое есть у чекбоксов.

const isOn = someCheckboxInput.checked
          const isOn = someCheckboxInput.checked

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

Но это свойство мы хотим использовать только на чекбоксе, а не на остальных полях. Это тоже можно сделать. Прочитаем тип элемента и, если он "checkbox", то возьмём в качестве значения поле checked:

function serializeForm(formNode) {  const { elements } = formNode  const data = Array.from(elements)    .map((element) => {      const { name, type } = element      const value = type === 'checkbox' ? element.checked : element.value      return { name, value }    })    . filter((item) => !!item.name)  console.log(data)}
          function serializeForm(formNode) {
  const { elements } = formNode
  const data = Array.from(elements)
    .map((element) => {
      const { name, type } = element
      const value = type === 'checkbox' ? element.checked : element.value
      return { name, value }
    })
    .filter((item) => !!item.name)
  console.log(data)
}

Теперь значение поля nasa-experience будет true, если чекбокс отмечен, и false, если пропущен. Увидим такой вывод:

[  {name: 'name', value: 'Alex'},  {name: 'email', value: '[email protected]'},  {name: 'age', value: '24'},  {name: 'specialization', value: 'engineer'},  {name: 'nasa-experience', value: false},  {name: 'photo', value: 'C:\\fakepath\\image.jpg'}]
          [
  {name: 'name', value: 'Alex'},
  {name: 'email', value: '[email protected]'},
  {name: 'age', value: '24'},
  {name: 'specialization', value: 'engineer'},
  {name: 'nasa-experience', value: false},
  {name: 'photo', value: 'C:\\fakepath\\image. jpg'}
]

Формат данных

Скопировано

В целом, нынешний формат данных в виде массива объектов нам может и подойти, но мы с вами используем кое-что лучше — FormData.

FormData — это особый тип данных, который можно использовать для отправки данных формы на сервер.

Мы воспользуемся им, чтобы сохранить данные из формы. Создадим экземпляр с помощью new FormData(), откажемся от массива со значениями и будем добавлять имена полей и их значения в FormData с помощью вызова функции append:

function serializeForm(formNode) {  const { elements } = formNode  const data = new FormData()  Array.from(elements)    .filter((item) => !!item.name)    .forEach((element) => {      const { name, type } = element      const value = type === 'checkbox' ? element.checked : element. value      data.append(name, value)    })  return data}
          function serializeForm(formNode) {
  const { elements } = formNode
  const data = new FormData()
  Array.from(elements)
    .filter((item) => !!item.name)
    .forEach((element) => {
      const { name, type } = element
      const value = type === 'checkbox' ? element.checked : element.value
      data.append(name, value)
    })
  return data
}

Но так как тип FormData специально создан для работы с формами, можно сделать гораздо проще 🙂

function serializeForm(formNode) {  return new FormData(formNode)}
          function serializeForm(formNode) {
  return new FormData(formNode)
}

Стоит отметить, что nasa-experience в таком случае попадёт в финальные данные, только если чекбокс отметили. Если его не отметить, то в финальных данных он не окажется.

Когда чекбокс nasa-experience выделен, получим такой вывод:

[  ['name', 'Alex'],  ['email', 'example@test. com'],  ['age', '24'],  ['specialization', 'engineer'],  ['nasa-experience', '1'],  ['photo', File],]
          [
  ['name', 'Alex'],
  ['email', '[email protected]'],
  ['age', '24'],
  ['specialization', 'engineer'],
  ['nasa-experience', '1'],
  ['photo', File],
]

Когда чекбокс не выделен — такой:

[  ['name', 'Alex'],  ['email', '[email protected]'],  ['age', '24'],  ['specialization', 'engineer'],  ['photo', File],]
          [
  ['name', 'Alex'],
  ['email', '[email protected]'],
  ['age', '24'],
  ['specialization', 'engineer'],
  ['photo', File],
]

В первом случае чекбокс был отмечен, поэтому в списке есть элемент nasa-experience, во втором случае чекбокс был пропущен, поэтому такого элемента в списке данных нет.

Чтобы проверить, какие данные в себе содержит переменная типа FormData, можно использовать метод .entries(), он выведет список с данными, как в примере выше.

console.log(Array.from(data.entries()))
          console.log(Array.from(data.entries()))

Отправка на сервер

Скопировано

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

Функция будет асинхронной, потому что работает с сетевыми запросами. В качестве аргумента она принимает FormData и отправляет запрос с помощью вызова fetch. Нам нужно указать правильный заголовок Content-Type у запроса, для формы он 'multipart/form-data':

async function sendData(data) {  return await fetch('/api/apply/', {    method: 'POST',    headers: { 'Content-Type': 'multipart/form-data' },    body: data,  })}
          async function sendData(data) {
  return await fetch('/api/apply/', {
    method: 'POST',
    headers: { 'Content-Type': 'multipart/form-data' },
    body: data,
  })
}

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

Теперь используем эту функцию в обработчике события отправки. Сериализуем форму и передадим её в функцию отправки. Вместо обращения напрямую к форме, будем читать её из объекта события. Форма в объекте события submit будет храниться в свойстве target:

async function handleFormSubmit(event) {  event.preventDefault()  const data = serializeForm(event.target)  const response = await sendData(data)}
          async function handleFormSubmit(event) {
  event.preventDefault()
  const data = serializeForm(event.target)
  const response = await sendData(data)
}

Обратите внимание, что функция handleFromSubmit() стала асинхронной, так как она вызывает другую асинхронную функцию и дожидается её результата. Внутри response будет поле status, по которому мы сможем определить, успешно ли прошёл запрос и вывести соответствующее сообщение пользователю.

Обработка загрузки и вывод сообщения о результате

Скопировано

Теперь немножко улучшим UX нашей формы. Сейчас она просто отправляет данные и ничего не сообщает пользователям. Это не круто, потому что отправителю будет непонятно, получилось ли записаться в «Mars Once» или нет.

Мы хотим:

• при отправке формы показывать лоадер, пока идёт запрос;
• при успешной отправке показать сообщение, что форма отправлена, и спрятать форму;
• при ошибке указать пользователю, где именно была ошибка.

Начнём с лоадера.

Показываем лоадер во время отправки

Скопировано

У нас вместо лоадера будет просто показываться строка «Sending…»

Добавим его после кнопки и спрячем:

<style>  .hidden {    display:none;  }</style><form action="/apply/" method="POST">  <!-- Код остальной формы -->  <button type="submit">Отправить заявку</button>  <div>Отправляем. ..</div></form>
          <style>
  .hidden {
    display:none;
  }
</style>
<form action="/apply/" method="POST">
  <!-- Код остальной формы -->
  <button type="submit">Отправить заявку</button>
  <div>Отправляем...</div>
</form>

Прячем мы его, потому что хотим показать только во время запроса. Для этого напишем функцию, которые будут управлять его состоянием — делать лоадер видимым, если он не виден сейчас, и скрывать, если он виден. Так как технически это добавление и удаление класса hidden, то можно воспользоваться функцией toggle из classList API:

function toggleLoader() {  const loader = document.getElementById('loader')  loader.classList.toggle('hidden')}
          function toggleLoader() {
  const loader = document.getElementById('loader')
  loader.classList.toggle('hidden')
}

Вызовем эту функцию до отправки запроса, чтобы показать лоадер, и после запроса, чтобы скрыть. Лоадер будет виден до тех пор, пока запрос не завершится:

async function handleFormSubmit(event) {  event.preventDefault()  const data = serializeForm(event.target)  toggleLoader()  const response = await sendData(data)  toggleLoader()}
          async function handleFormSubmit(event) {
  event.preventDefault()
  const data = serializeForm(event.target)
  toggleLoader()
  const response = await sendData(data)
  toggleLoader()
}

Обрабатываем успешную отправку

Скопировано

Давайте теперь проверять ответ сервера. Допустим, нам хочется, чтобы при успешной отправке мы показывали alert() с сообщением об успешной отправке и прятали форму:

function onSuccess(formNode) {  alert('Ваша заявка отправлена!')  formNode.classList.toggle('hidden')}
          function onSuccess(formNode) {
  alert('Ваша заявка отправлена!')
  formNode.classList.toggle('hidden')
}

Мы должны вызвать onSuccess, только если форма была отправлена успешна. Для этого добавим проверку на статус ответа сервера — он должен быть 200 в случае успеха (статусы ответа разобраны в статье про HTTP протокол):

// Вызовем её вот так:async function handleFormSubmit(event) {  event.preventDefault()  const data = serializeForm(event.target)  toggleLoader()  const { status } = await sendData(data)  toggleLoader()  if (status === 200) {    onSuccess(event.target)  }}
          // Вызовем её вот так:
async function handleFormSubmit(event) {
  event.preventDefault()
  const data = serializeForm(event.target)
  toggleLoader()
  const { status } = await sendData(data)
  toggleLoader()
  if (status === 200) {
    onSuccess(event.target)
  }
}

При успешной отправке покажется это сообщение, а форма пропадёт.

Обрабатываем ошибки

Скопировано

Если что-то пошло не так, то мы хотим сказать пользователям об этом. Напишем функцию, которая будет вызывать alert() с сообщением, которое пришлёт сервер в случае ошибки:

function onError(error) {  alert(error. message)}
          function onError(error) {
  alert(error.message)
}

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

Вместе со статусом будем получать информацию об ошибке из поля error. Если запрос был успешным, то error будет пустым, но в случае ошибки там будет лежать сообщение:

async function handleFormSubmit(event) {  event.preventDefault()  const data = serializeForm(event.target)  toggleLoader()  const { status, error } = await sendData(data)  toggleLoader()  if (status === 200) {    onSuccess(event.target)  } else {    onError(error)  }}
          async function handleFormSubmit(event) {
  event.preventDefault()
  const data = serializeForm(event.target)
  toggleLoader()
  const { status, error } = await sendData(data)
  toggleLoader()
  if (status === 200) {
    onSuccess(event. target)
  } else {
    onError(error)
  }
}

Если что-то пошло не так, мы увидим причину. Форма останется на месте.

Блокируем кнопку отправки на невалидной форме

Скопировано

Сейчас кнопку отправки можно нажать в любой момент, даже если форма невалидна. И хоть пользователь не сможет отправить форму из-за HTML-валидации, было бы неплохо предупредить, что кнопку нажимать пока рано.

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

Напишем функцию, которая будет проверять валидность формы и блокировать кнопку, если требуется. Аргументом она будет принимать событие ввода с клавиатуры на полях ввода.

Так как событие ввода будет происходить на полях, а не на самой форме, то значение event.target — это поле. Чтобы получить форму, воспользуемся свойством form, значением которого является ссылка на родительскую форму.

Проверять валидность формы будем с помощью метода checkValidity() формы. Он запускает стандартные проверки. Результат проверки будем использовать, для того чтобы установить свойство disabled кнопки в значение true, если нужно заблокировать, и false, если кнопка должна быть доступна.

function checkValidity(event) {  const formNode = event.target.form  const isValid = formNode.checkValidity()  formNode.querySelector('button').disabled = !isValid}applicantForm.addEventListener('input', checkValidity)
          function checkValidity(event) {
  const formNode = event.target.form
  const isValid = formNode.checkValidity()
  formNode.querySelector('button').disabled = !isValid
}
applicantForm.addEventListener('input', checkValidity)

Теперь, пока форма не будет заполнена, кнопка будет заблокирована.

Что у нас получилось

Скопировано

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

Для всего этого мы использовали методы HTML-элементов и элементов форм, которые нам предоставляет браузер и веб-платформа.

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

Но для первой формы, с которой мы работали в JS, этого достаточно 🙂

Как тип ввода «Отправить» создает кнопки отправки формы в HTML »

Раскрытие информации: Ваша поддержка помогает сайту работать! Мы зарабатываем комиссионные за некоторые услуги, которые мы рекомендуем на этой странице. Узнайте больше

Значение

Как определить тип ввода в HTML (все значения и атрибуты)

Что делает Как тип ввода «Отправить» создает кнопки отправки формы в HTML ?

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

Содержание

• 1 Пример кода
• 2 Поддержка браузера для отправки
• 3 Все значения типа
• 4 Все атрибуты ввода

Пример кода 9003 1

 <форма action="myform. cgi">

 Введите здесь поддельный пароль


 

Введите здесь поддельный пароль

Значение submit input отображает кнопку Submit в форме. При нажатии на эту кнопку данные формы будут отправлены.

Если вы хотите использовать изображение вместо кнопки «Отправить», используйте тип ввода image .

Клэр Бродли

Клэр — опытный технический писатель, редактор и энтузиаст HTML. Она пишет для HTML.com и руководит контент-агентством Red Robot Media.

Поддержка браузера для отправки

Все	Все	Все	Все 9005 5	Все	Все

Все значения типа

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

Все атрибуты ввода

Имя атрибута	Значения	Примечания
шаг		Указывает интервал между допустимыми значениями в числовом вводе.
обязательно		Указывает, что поле ввода является обязательным; запрещает отправку формы и предупреждает пользователя, если обязательное поле пусто.
только для чтения		Запрещает пользователю редактировать значение ввода.
заполнитель		Задает текст-заполнитель в текстовом вводе.
шаблон		Указывает регулярное выражение, по которому проверяется значение ввода.
несколько		Позволяет пользователю вводить несколько значений при загрузке файла или вводе по электронной почте.
мин.		Задает минимальное значение для полей ввода чисел и дат.
max		Задает максимальное значение для полей ввода чисел и дат.
список		Указывает идентификатор элемента
высота		Определяет высоту входного изображения.
formtarget		Указывает контекст просмотра, в котором следует открыть ответ сервера после отправки формы. Для использования только с типами ввода «отправить» или «изображение».
formmethod		Указывает метод HTTP (GET или POST), который будет использоваться при отправке данных формы на сервер. Только для использования с типами ввода «отправить» или «изображение».
formenctype		Указывает способ отправки данных формы на сервер. Только для использования с типами ввода «отправить» и «изображение».
formaction		Указывает URL-адрес для отправки формы. Может использоваться только для type=»submit» и type=»image».
форма		Указывает форму, которой принадлежит поле ввода.
autofocus		Указывает, что поле ввода должно быть в фокусе сразу после загрузки страницы.
тип	текст флажок радио пароль скрытый отправка сброс кнопка файл изображение	Определяет тип ввода.
имя		Указывает имя элемента ввода. Имя и значение каждого элемента ввода включаются в HTTP-запрос при отправке формы.
значение		Определяет начальное значение или выбор по умолчанию для поля ввода.
размер		Определяет ширину ввода в символах.
maxlength		Определяет максимальное количество символов, которые можно ввести в текстовый ввод.
Checked		Указывает, должен ли ввод флажка или переключателя быть отмечен по умолчанию.
граница		Используется для указания границы ввода. Устарело. Вместо этого используйте CSS.
src		Определяет URL-адрес источника для входного изображения.
отключено		Отключает поле ввода.
ключ доступа		Определяет сочетание клавиш для элемента.
язык		Используется для указания языка сценариев, используемого для событий, инициируемых вводом.
autocomplete		Указывает, должен ли браузер пытаться автоматически завершать ввод на основе данных, введенных пользователем в аналогичные поля.

элемент ввода (тип=отправить)

Если вы не знаете, что такое элемент или как вы должны его использовать, я рекомендую вам прочитать руководство « Теги и атрибуты HTML », которое вы можете найти в разделе руководств HTML .

Содержание

• 01Описание
• 02Примеры
• 03Атрибуты
  • Специальные атрибуты
  • Глобальные атрибуты
• 04События
  • Глобальные события

Описание

Элемент input , имеющий значение «submit» в атрибуте type , представляет кнопку, которая при нажатии отправляет форму , которой она принадлежит.

С появлением HTML 5 к этому элементу было добавлено несколько новых атрибутов ( formaction , formenctype , formmethod , formnovalidate и formtarget ), которые определяют и переопределяют определенные параметры, относящиеся к тому, как должна быть отправлена ​​форма . Эти новые атрибуты можно использовать, например, для предоставления более одной кнопки отправки в одной форме и заставить каждую из них выполнять другой тип отправки.

Атрибут value имеет особое значение для этого элемента: он представляет собой метку кнопки, которая обычно отображается браузерами внутри нее.

Примеры

В нашем первом примере мы создадим базовую форму с парой полей и кнопкой отправки. Здесь вы сможете увидеть и протестировать функциональность кнопки отправки: при ее нажатии автоматически отправляется форма . [a-zA-Z][a-zA-Z0-9-_\.]{3,15}$» title=»Правильное имя пользователя должно начинаться с буквы, содержать буквы, цифры, баллы и стопы, а также иметь длину от 3 до 15 символов» (требуется)>

Пароль:

Имя пользователя:

Пароль:

Атрибуты

Особые атрибуты

автофокус

Логическое значение, указывающее браузеру установить фокус на этот элемент управления после завершения загрузки документа или при отображении диалогового окна , в котором находится элемент управления. Если атрибут имеет значение «автофокус» или пустую строку («»), или если он просто присутствует, элемент управления должен получить фокус как можно скорее, после страницы или диалог загружен.

Пример

отключен

Логическое значение, указывающее, отключен элемент управления или нет. Если атрибут принимает значение «отключено» или пустую строку («»), или если он просто присутствует, элемент управления будет отключен.

Отключенные элементы управления отображаются серым цветом (если они видны), блокируются для взаимодействия с пользователем и, что более важно, их значения (если есть) не отправляются, когда 9Представлена ​​форма 0012 .

Пример

 

  

    Ключевое слово: 
    
  

 

Ключевое слово:

форма

Значение атрибута id формы, с которой связан данный элемент управления.

Этот атрибут является новым в HTML 5 и помогает определить релевантность элементов управления во вложенных или удаленных формах.

Пример

 
  
Фамилия: 



 

Фамилия:

формация

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

Этот атрибут является новым в HTML 5 и, если он присутствует, переопределяет атрибут action элемента формы . Это позволяет авторам предоставлять одну форму с двумя или более кнопками, которые выполняют различные типы отправки.

Пример

 <метод формы="сообщение" цель="_blank">
  

    Имя: 
    
  

 

Номер:

формаcтип

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

• application/x-www-form-urlencoded : пробелы заменяются знаками плюс («+»), а специальные символы преобразуются в значения HEX . Это значение по умолчанию.
• multipart/form-data : кодирование не выполняется. Это значение необходимо для загрузки файлов.
• text/plain : знаками плюс («+») заменяются только пробелы.

Помните, что вы должны использовать значение «multipart/form-data» всякий раз, когда файл будет загружен в форму. Без этой конфигурации загрузка файлов невозможна.

Этот атрибут является новым в HTML 5 и, если он присутствует, переопределяет атрибут action элемента формы . Это позволяет авторам предоставлять одну форму с двумя или более кнопками, которые выполняют различные типы отправки.

Пример

 
  
Полное имя: 
  
Изображение: 
  

    
    
  

 

Полное имя:

Изображение:

формметод

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

• получить : данные прикрепляются к URL-адресу запроса (тот, который указан в атрибуте действия ). Пары имя-значение организованы в виде «имя=значение» и разделены знаком амперсанда («&»). Вся эта строка добавляется к запросу URL с предшествующим знаком вопроса («?»). Например, строка GET может выглядеть так: «form-result.php?user=john&pass=123456»
.
• сообщение : данные прикрепляются к телу запроса.
• диалоговое окно : специально для форм внутри элемента диалогового окна . Указывает браузеру закрывать диалоговое окно после отправки формы. Результаты формы должны обрабатываться скриптами.

Этот атрибут является новым в HTML 5 и, если он присутствует, переопределяет атрибут action элемента формы . Это позволяет авторам предоставлять одну форму с двумя или более кнопками, которые выполняют различные типы отправки.

Пример

 
  

    Город: 
    
    
  

 

цель формы

Значение, указывающее, куда должны быть загружены результаты скрипта, отвечающего за обработку данных. Это значение может быть именем контекста просмотра (например, значение атрибута name iframe ) или любым из следующих значений (без учета регистра):

• _blank : в новом окне/вкладке.
• _parent : в непосредственном родительском контексте.
• _self : в том же контексте, что и форма.
• _top : в самом верхнем контексте (самый большой родительский контекст, содержащий форму).

Этот атрибут является новым в HTML 5 и, если он присутствует, переопределяет атрибут action элемента формы . Это позволяет авторам предоставлять одну форму с двумя или более кнопками, которые выполняют различные типы отправки.

Пример

 
  

    Группа: 
    
  

 

Группа:

формановация

Логическое значение, указывающее браузеру не проверять данные формы при отправке. Если этот атрибут принимает значение «formnovalidate» или пустую строку («»), или если он просто присутствует, браузер должен пропустить проверку формы во время отправки.

Этот атрибут является новым в HTML 5 и, если он присутствует, переопределяет атрибут action элемента формы . Это позволяет авторам предоставлять одну форму с двумя или более кнопками, которые выполняют различные типы отправки.

Этот атрибут является частью Constraint Validation API , новой функции, которая позволяет авторам обеспечивать проверку формы с минимальным вмешательством в программирование. 9[a-zA-Z][a-zA-Z0-9-_\.]{3,15}$» title=»Правильное имя пользователя должно начинаться с буквы, содержать буквы, цифры, баллы и стопы, а также от 3 до 15 символов» требуется>

Имя пользователя:

имя

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

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

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

Пример

 
  

    Имя партнера: 
    
  

 

Имя партнера:

тип

Значение, указывающее тип поля, которое представляет этот элемент. Есть двадцать два возможных значения (без учета регистра):

• скрытый: скрытый элемент управления, используемый для отправки информации на сервер, обычно управляемый сценариями.
• текст: элемент управления, используемый для ввода однострочного фрагмента текста.
• поиск: то же, что и текст, но для целей поиска.
• тел: элемент управления, используемый для предоставления номера телефона.
URL-адрес
• : текстовое поле, используемое для ввода единственного и абсолютного URL-адреса .
Электронная почта
• : элемент управления, предназначенный для редактирования одного или нескольких адресов электронной почты.
• пароль: текстовое поле для редактирования паролей, где символы представлены точками.
• дата: элемент управления для ввода конкретной даты.
• месяц: элемент управления для ввода определенного месяца.
• неделя: элемент управления для ввода конкретной недели.
• время: элемент управления для ввода определенного времени.
• datetime-local: элемент управления для ввода конкретной локальной даты и времени.
• число: элемент управления для ввода числа.
• диапазон: элемент управления для ввода одного или двух чисел внутри диапазона.
• цвет: элемент управления для ввода цвета.
• флажок: элемент управления для ввода логического значения (истина/ложь).
Радио
• : элемент управления, используемый для выбора одного варианта из многих.
• файл: элемент управления, используемый для загрузки файлов на сервер.
• submit: кнопка, используемая для отправки формы.
Изображение
• : то же, что и submit, но с возможностью отображения в виде изображения вместо использования внешнего вида кнопки по умолчанию.
• сброс: кнопка, используемая для сброса элементов управления формы к их значениям по умолчанию.
Кнопка
• : кнопка, не связанная с действием по умолчанию.

Когда этот атрибут отсутствует, элемент ведет себя так, как если бы он имел значение «текст».

Пример

значение

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

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

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

Агенты обработки не найдут применения в паре имя-значение, передаваемой кнопкой.