Как создавать HTML-формы: руководство

HTML-формы собирают данные от пользователей с помощью текстовых полей, раскрывающихся списков, флажков и т.д. Формы в HTML заключаются в <form>теги и используют <input>тег для создания элементов.

HTML-формы предоставляют пользователям возможность взаимодействовать с веб-сайтом или веб-приложением. Веб-формы позволяют пользователям отправлять данные, которые затем веб-сайт или сервер может обрабатывать и хранить.

Как создать форму в HTML? На этот вопрос мы ответим в этом уроке.

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

HTML-формы

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

• однострочные текстовые поля;
• текстовые поля;
• выпадающие списки;
• флажки;
• кнопки;
• радиокнопки.

Эти элементы, помимо кнопок и текстовых полей, используют <input>тег в коде HTML.

После того, как пользователь отправит форму, её содержимое может:

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

Прежде чем создавать форму в HTML, вы должны подумать о том, как вы будете создавать свою форму. Какие данные вам нужно собрать? Как вы сохраните простоту своей формы? Чем больше ваша форма, тем меньше вероятность, что пользователи её заполнят.

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

Перед нами стоит задача создать форму, которая принимает четыре части информации. Эти:

• Имя пользователя.
• Абонентский адрес электронной почты.
• Может ли пользователь, когда-либо посещал кофейню.
• Сообщение пользователь хочет отправить в кофейне.

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

ЧИТАЙТЕ ТАКЖЕ: Что такое заголовки в HTML.

HTML- <form>тег

Формы в HTML заключаются в <form>теги. Вот пример формы в HTML:

<form>
// Elements
</form>

<form>Тег используется для определения формы в HTML. После определения <form>тег может включать в себя элементы формы, такие как флажки и однострочные текстовые поля.

Элемент формы принимает два атрибута: actionи method. Мы обсудим эти атрибуты позже в этом руководстве.

<input> Элементы для HTML-форм

Большинство элементов управления HTML-формы включают элементы ввода. Они используются для сбора различных типов данных от пользователя. Элементы ввода определяются с помощью <input>тега.

Способ отображения <input>элемента на веб-сайте зависит от указанного атрибута типа. Например, если поле ввода является текстовым полем, оно будет выглядеть иначе, чем если бы оно было переключателем.

Синтаксис <input>элемента следующий:

<input type=»type» id=»elementId»>

В этом примере <input>принимает два атрибута. Первый вызываемый атрибут — type- это тип ввода, который будет принимать поле формы. typeАтрибут может иметь много значений, но некоторые из наиболее распространённых являются:

• Button;
• Checkbox;
• Email;
• Text;
• Number;
• Radio.

Второй атрибут в нашем примере — это id. Этот атрибут используется для уникальной идентификации элемента ввода и будет использоваться для доступа к данным, которые пользователь отправил с помощью сценария, который мы используем для обработки входных данных формы пользователя.

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

Мы можем собрать эту информацию с помощью двух <input>тегов:

<form>
<label for=»name»>Name:</label><br/>
<input type=»text» id=»name» name=»name»><br /><br />
<label for=»email»>Email:</label><br/>
<input type=»email» id=»email» name=»email»>
</form>

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

name Атрибут в HTML — форм

Каждый элемент формы в форме HTML должен иметь nameатрибут. Этот атрибут используется для отправки содержимого формы. Если вы не укажете nameатрибут в элементе формы, содержимое этого элемента не будет отправлено на сервер.

В приведённом выше примере у нашего поля «Имя» есть nameатрибут со значением name, а у нашего поля «Электронная почта» есть nameатрибут со значением email.

HTML- <label>элемент

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

<label>Тег позволяет определить текст, что компьютер будет читать для пользователей, которые используют экранные ридер. Это связано с тем, что программа чтения с экрана прочитает метку, когда встретит поле ввода на веб-странице.

Вот синтаксис HTML-метки:

<form>
<label for=»name»>Name:</label><br/>
<input type=»text» id=»name» name=»name»>
</form>

В приведённом выше примере мы создали форму, которая собирает имя пользователя. Мы использовали <label>тег, чтобы добавить метку Name:к форме. Обратите внимание, что мы также указали атрибут, называемый forв нашем <label>элементе. Этот атрибут должен быть равен idатрибуту, используемому inputэлементом, с которым связана метка, поскольку он связывает форму с соответствующей меткой.

ЧИТАЙТЕ ТАКЖЕ: Основные теги HTML.

Элементы HTML-формы

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

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

Радиокнопки

Радиокнопки — это распространённый тип ввода, используемый в формах HTML. Радиокнопка позволяет пользователю выбрать одно значение из ограниченного числа вариантов. Часто радиокнопки используются для форм, которые собирают информацию о поле, возрасте или ответах да / нет.

Ниже приводится синтаксис переключателя:

<input type=»radio» name=»radio_button»>

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

<form>
<p>Are you a customer of the Three Brothers Coffee House?</p>
<input type=»radio» id=»yes» name=»customer» value=»yes»>
<label for=»yes»>Yes</label><br />
<input type=»radio» id=»no» name=»customer» value=»no»>
<label for=»no»>No</label><br />
</form>

Затем наш пользователь может отправить одно из двух значений: yesили no.

Давайте разберём наш код. Сначала мы определяем a <form>. Затем мы используем <p>тег, чтобы добавить пояснительный текст для пользователя.

В следующей строке мы создаём радиокнопку со значением yes. Затем мы создаём метку для этой кнопки, на которой отображается текст «Да». Затем мы создаём переключатель со значением noи создаём метку для этой кнопки, которая отображает текст «Нет».

Обратите внимание, что в нашем коде для наших радиокнопок valueуказан атрибут. Это значение — данные, которые будут отправлены на сервер, когда пользователь отправит форму. Таким образом, если пользователь щёлкнет переключатель «Да», значение yes будет отправлено на сервер.

HTML- <textarea>элемент

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

Мы можем сделать это с помощью <textarea> элемента, например:

<form>
<label for=»message»>Message:</label><br />
<textarea id=»message» name=»message»>
What message do you want to send to the Three Brothers Coffee House?
</textarea>
</form>

В нашем коде мы начинаем с определения, labelкоторый отображает значение «Сообщение:».

Затем мы определяем текстовую область с помощью <textarea>тега. Мы указываем два атрибута для этой текстовой области:

1. id. Это используется для ссылки на содержимое нашей формы после того, как пользователь отправит свой ответ.
2.  name. Это необходимо для отправки содержимого нашей формы.

Наконец, мы добавляем сообщение Какое сообщение вы хотите послать кофеен «Три брата»   Дом?

между открывающим и закрывающим <textarea>тегами. Это сообщение по умолчанию, которое увидит пользователь.

Результат нашего кода выглядит следующим образом:

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

submit Кнопка HTML

Теперь, когда мы определили содержимое нашей формы, мы готовы добавить submitкнопку. Вот синтаксис submit кнопки:

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

Submitкнопки используются для отправки содержимого формы в обработчик формы. (Обработчик формы обычно представляет собой страницу на веб-сервере, которая может обрабатывать содержимое формы.) submit кнопка ссылается на обработчика формы. Вам нужно указать обработчик формы, используя атрибут <form>тега action.

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

<form action=»/post.php»>
<label for=»name»>Name:</label>
<br/>
<input type=»text» id=»name» name=»name»>
<br />
<br />
<label for=»email»>Email:</label>
<br />
<input type=»email» id=»email» name=»email»>
<br />

<p>Are you a customer of the Three Brothers Coffee House?</p>
<input type=»radio» id=»yes» name=»customer» value=»yes»>
<label for=»yes»>Yes</label>
<br />
<input type=»radio» id=»no» name=»customer» value=»no»>
<label for=»no»>No</label>
<br /><br />

<label for=»message»>Message:</label><br />
<textarea id=»message» name=»message»>
What message do you want to send to the Three Brothers Coffee House?
</textarea>

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

Как видите, мы добавили кнопку отправки в нашу форму. Мы также указали action параметр в <form> теге. Этот параметр связывает форму с файлом, который будет обрабатывать её содержимое.

ЧИТАЙТЕ ТАКЖЕ: Основы программирования HTML.

Отправка веб-формы

После того, как вы создали HTML-форму, вам необходимо создать обработчик, который будет обрабатывать данные, которые пользователи отправляют через вашу форму. <form> Элемент имеет два атрибута, которые используются для передачи данных формы на сервер: actionа method.

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

actionАтрибут определяет местоположение кода формы обработчика. Когда ваша форма отправлена ​​- когда пользователь нажимает submitкнопку — собранные данные будут отправлены обработчику формы.

В нашем примере выше, когда форма отправляется, данные из формы отправляются на страницу post.php, которая включает в себя наш код обработчика формы. Вот пример формы с actionопределенным атрибутом:

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

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

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

methodАтрибут указывается метод HTTP, который должен использоваться при отправке формы. По умолчанию формы используют этот GETметод, но вы также можете использовать любой другой метод HTTP, например, POST.

Вот пример действия methodатрибута формы:

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

При отправке этой формы собранные данные будут отправлены на сервер с использованием POSTметода HTTP. (В качестве альтернативы, если бы мы хотели отправить GETзапрос, мы могли бы указать его «GET»или просто оставить GETполе пустым, потому что это метод по умолчанию.)

В большинстве случаев POSTдля отправки данных следует использовать метод HTTP. Это связано с тем, что GETметод делает данные формы видимыми в поле адреса страницы. Итак, если бы мы отправили форму в post.php с полем с именем «name», содержащим значение «Pauline», на веб-сайт было бы отправлено следующее:

/post.php?name=Pauline

Это небезопасный метод отправки данных. Этот GET метод никогда не следует использовать, если вы работаете с конфиденциальной информацией.

Заключение

Формы — важная функция HTML, позволяющая собирать и обрабатывать пользовательские данные.

В этом руководстве мы обсудили на примере основы форм в HTML и то, как вы можете создать свою первую веб-форму. Теперь вы готовы приступить к проектированию и разработке собственных HTML-форм, как эксперт!

ЧИТАЙТЕ ТАКЖЕ: Раскрывающийся список HTML.