Form и input — теги и их атрибуты для создания различных HTML форм для сайта

Здравствуйте, уважаемые читатели блога Goldbusinessnet.com. В продолжение изучения языка гипертекстовой разметки переходим к рассмотрению тегов form и input с их атрибутами (что представляют из себя эти составляющие HTML кода в общем случае), с помощью которых можно создавать самые разнообразные формы для сайта.

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

К слову, в одной из публикаций я уже повествовал об элементах, помогающих разнообразить формы с помощью тегов select, option, textarea, label, fieldset и legend.

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

HTML формы — как они создаются с помощью form и input

Как я уже сказал вначале, какая-нибудь вебформа, а то и сразу несколько, обязательно должны присутствовать на любом мало-мальски развитом вебсайте. Чтобы понять, насколько они важны в свете соответствия веб-ресурса современным требованиям, достаточно привести вам навскидку тройку объектов, где используются формы, основанные на тегах form и input, которые по одному названию не оставляют сомнений в своей необходимости проекту той или иной направленности:

• Форма обратной связи для сайта на Вордпресс
• Подписка по электронной почте на RSS ленту
• Поиск по сайту от Гугла

Если перейдете, к примеру, по ссылке на статью о создании обратной связи (позволяющей всем юзерам отправлять сообщения администрации сайта), то там как раз представлен код HTML с парным тегом form, который имеет открывающую (<form>) и закрывающую (</form>) часть:

Здесь form играет важнейшую роль, так как инициирует установку вебформы. Сам по себе он не выводит некую область на веб-странице, но служит контейнером, содержащим другие тэги.

В нашем случае (см.скриншот выше) в их число входит несколько input (этот ХТМЛ тэг является одиночным, иными словами, не имеет закрывающей составляющей), а также textarea, с разными наборами атрибутов. Каждый из них определяет свой элемент, входящий в форму.

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

Обратите внимание, что однострочные текстовые поля («Ваше имя», «Электронная почта», «Тема сообщения») выведены в том числе благодаря присутствию атрибутов name (c разными значениями «name», «email», «sub») и type («text») наиболее востребованного тега input.

Для многострочного поля применен тег textarea со своими параметрами. Кнопка «Отправить» реализована тем же input в совокупности с атрибутами value и type (со значением «submit»).

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

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

Для этого предназначена программа обработки форм (обработчик), выполняющая эту задачу. Она обычно реализуется в виде скрипта, написанного на языке PHP, содержание коего в каждом конкретном случае зависит от преследуемых целей. В предоставленном мною примере с обратной связью данную роль играет созданный для этого файл mail.php с таким содержимым:

Прежде чем продолжить текстовое изучение материала, посмотрите небольшой видеоролик:

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

Атрибуты тега form — action, method, name и другие

Как я уже отмечал выше, любая ХТМЛ форма заключается между открывающим и закрывающим тегами form, который является контейнером, содержащим другие теги. Form имеет ряд атрибутов, некоторые из которых могут принимать различные значения (параметры). Наиболее часто используемыми из них (смотрите третий скриншот вверх отсюда) являются следующие:

1. Action — путь до документа (URL), содержащего скрипт исполнения (обработчик веб-форм). Обязательный атрибут (в HTML5 таковым не является, поскольку пятая версия языка разметки предусматривает ситуации, когда данные для обработки отправляются на текущую страницу). В качестве значения используется абсолютный или относительный путь к файлу на сервере:

<form action="formdata.php">Содержание вебформы</form>

2. Method — c помощью этого атрибута обеспечивается способ передачи данных. Собственно, их всего два: get и post, которые и являются параметрами. Метод get (значение по умолчанию) используется для небольших сообщений посредством адресной строки браузера. Тогда как post предназначен для отправки большего объема данных закрытым способом.

<form action="formdata.php" method="post">Содержание вебформы</form>

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

<form action="formdata.php" method="post" name="form1">Содержание вебформы</form>

Далее представлю вам и остальные атрибуты тега form:

4. Accept-charset — определяет кодировку, в которой сервер должен обрабатывать полученные данные. В качестве значения (параметра) данного атрибута выступает название используемого стандарта (UTF-8, Windows-1251 и т.д.).

<form action="formdata.php" method="post" accept-charset="UTF-8">Содержание вебформы</form>

5. Autocomplete [HTML5] — активирует автозаполнение формы браузером, который в этом случае оставляет в памяти содержание впервые заполняемых полей (чаще логина и пароля), а при необходимости в дальнейшем ввода этих данных автоматически их вставляет в нужные места. Имеет всего два параметра: on — автоматическое заполнение включено, off — выключено.

<form autocomplete="on">Содержание вебформы</form>

Замечу, что функция автоматического заполнения может быть вообще отключена в браузере самого пользователя. Тогда присутствие атрибута autocomplete=»on» в коде веб-формы поможет только в случае, если данная опция активирована в настройках обозревателя конкретного юзера.

6. Enctype — задает метод кодирования введенных в форму данных перед отправкой их на сервер. Может быть применено одно из трех значений:

• application/x-www-form-urlencoded (параметр по умолчанию) — вместо пробелов применяется «+», кодируются все символы кроме букв латинского алфавита и цифр. Например, знаки кириллицы будут преобразованы в нечто, похожее на «%2F%3D%26%3F%2%3D%26%3D»;
• text/plain — только пробелы заменяются знаком «+», буквы и другие символы кодировке не подлежат;
• multipart/form-data — информация не кодируется. Данный параметр используется при отправлении файлов на сервер. При этом элемент загрузки файла в форме описывается тегом input с атрибутом type=»file» (подробнее о нем поговорим ниже).

Вот пример кода с применением атрибута enctype со значением «multipart/form-data»:

<form action="formdata.php" enctype="multipart/form-data" method="post">
  <p>Загрузите файл:</p>
  <p><input type="file" name="image-1"></p>
</form>

7. Novalidate [HTML5] — это логический атрибут (значения отсутствуют), который отменяет проверку на корректность введенной пользователем информации, отправляемой на сервер:

<form action="formdata.php" novalidate>Содержание вебформы</form>

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

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

8. Target. Результат обработки отправленных на сервер данных, внесенных юзером в форму, расположенную на странице, возвращается в форме HTML документа, который загружается в окно браузера, определяемое значением атрибута target:

• _blank — в новое окно;
• _self (параметр по умолчанию) — в то же окно;
• _parent — во фрейм-родитель. Если таковой отсутствует, то в текущее окно (_self);
• _top — в полное исходное окно, отменяя при этом все другие фреймы. При отсутствии фреймов в то же окно (_self);
• framename — в именной фрейм, название которого задается с помощью его атрибута name (<iframe name=»framename»></iframe>);

Тег input и его атрибуты, расширяющие возможности форм

Теперь рассмотрим input, который является самым распространенным элементом, используемым для создания вебформы и который, как было отмечено, не имеет закрывающего тега. Основной его атрибут — type, который является обязательным и с помощью разных значений (параметров) определяет вид формы на странице веб-ресурса.

Атрибут type и формируемые им элементы — text (текстовое поле), button (кнопка), checkbox (чекбокс), radio (радиокнопка) и другие

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

<input type="button" value="Выбрать" name="but1">

<input type="checkbox" value="A" name="chb1">A<input type="checkbox" value="B" name="chb1">B<input type="checkbox" value="C" name="chb1">C

<input type="color" name="colors">

<input type="date" name="date-x">

<input type="datetime-local" name="datetime-local-x">

<input type="email" name="email-x">

<input type="file" name="files">

<input type="hidden" name="hidden-x">

<input type="image" name="goldbusinessnet" src="/images/knopka.jpg">

<input type="month" name="month-x">

<input type="number" name="number-x">

<input type="password" name="password-x">

<input type="radio" value="A" name="radio1">A<input type="radio" value="B" name="radio1">B<input type="radio" value="C" name="radio1">C

<input type="range" name="range-x">

<input type="reset" name="reset-x">

<input type="search" name="search-x">

<input type="submit" name="submit-x">

<input type="tel" name="tel-x">

<input type="text" name="text-x">

<input type="time" name="time-x">

<input type="url" name="url-x">

<input type="week" name="week-x">

Если значение type не указано, то по умолчанию создается текстовое поле (type=»text»).

Какие еще атрибуты расширяют функционал input

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

В качестве примера создадим стандартную форму авторизации для ввода логина и пароля, где для каждого тега input пропишем уникальное название посредством атрибута name («login-x», «password-x», «submit1»). Вот как это будет выглядеть:

<form action="formdata" method="post" name="form1">
 <p>Ваш логин <input type="text" name="login-x"></p>
 <p>Ваш пароль <input type="password" name="password-x"></p>
 <p><input type="submit" value="Войти" name="submit1"></p>
</form>

2. Accept — задает фильтрацию на виды файлов, которые можно загружать на сервер. Применим исключительно совместно с <input type = «file»>. Возможны следующий значения:

• file_extension — расширение файла (.doc, .gif, .jpg, .png, .xls и т.д.);
• audio/* — аудиофайлы (звуковые);
• video/* — видеофайлы;
• image/* — файлы изображений;
• media_type — наименование MIME-типа (application/json, audio/mp4, image/gif и т.п.).

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

<form action="formdata" method="post" name="form1">
 <p><strong>Загрузите видеоролик</strong>:</p>
 <p><input type="file" name="vid" accept="video/*"></p>
 <p><input type="submit" value="Отправить"></p>
</form>

А вот с образец с возможным выбором изображений в форматах JPEG или PNG:

<form action="formdata" method="post" name="form1">
 <p><strong>Загрузите картинку (формат JPEG или PNG)</strong>:</p>
 <p><input type="file" name="img" accept="image/jpeg,image/png"></p>
 <p><input type="submit" value="Отправить"></p>
</form>

После нажатия пользователем кнопки «Выберите файл» в появившемся окне выбора будут предложены те группы файлов, которые указаны посредством значения атрибута accept.

3. Alt — применяется исключительно с целью создания альтернативного текста для графической кнопки «Отправить» (input type=»image»). Если по каким-то причинам изображение на страницу не загружено, то вместо него будет выведен фрагмент текста, описывающий эту картинку, он и является параметром данного атрибута.

Естественно, наряду с alt и type=»image» (см. таблицу параметров type выше) должен быть указан и атрибут src, где в качестве значения указан относительный либо абсолютный путь до картинки. Без лишних слов к примеру (вверху — код, внизу — вид кнопки без картинки):

<form action="formdata" method="post" name="form1">
 <input type="image" name="goldbusinessnet" src="/images/knopka.jpg" alt="альтернативный текст">
</form>

4. Autocomplete [HTML5] — дает возможность сохранять данные, введенные пользователями (два значения: on — автозаполнение включено, off — выключено). Если присутствие такого же атрибута в теге form регулирует автоматическое заполнение сразу для всех полей вебформы, то с помощью тега input можно его включить для одних элементов и отключить для других.

В ниже представленном примере для текстового поля (type=»text»), в которое вводится логин, автоматическое заполнение включено, а для области ввода пароля оно отключено. В результате после вторичного посещения страницы юзером, на которой размещена форма авторизации, его логин будет выведен автоматически:

<form action="formdata" method="post" name="form1">
<p>Ваш логин <input type="text" name="userLogin" autocomplete="on"></p>
<p>Ваш пароль <input type="password" name="userPassword" autocomplete="off"></p>
<p><input type="submit" value="Войти" name="submit1"></p>
</form>

Но механизм автоматического заполнения (autocomplete=»on») будет работать только тогда, когда в браузерных настройках конкретного пользователя включен режим автосохранения (обычно в целях общей безопасности у большинства юзеров эта опция не активирована). Например, в веб-браузере Google Chrome он запускается так («Настройки» — «Пользователи» — «Пароли»):

5. Checked (нет значений) — устанавливает флажки (галочки) для чекбоксов (type=»checkbox») и радиокнопок, или переключателей (type=»radio»). Причем, в пределах одной вебформы можно отметить сколь угодно много чекбоксов (множественный выбор):

<form action="formdata" method="post" name="form1">
<input type="checkbox" value="A" name="chb1" checked>A
<input type="checkbox" value="B" name="chb1">B
<input type="checkbox" value="C" name="chb1" checked>C
</form>

И только один переключатель (единичный выбор):

<form action="formdata" method="post" name="form1">
<input type="radio" value="A" name="radio1">A
<input type="radio" value="B" name="radio1"checked>B
<input type="radio" value="C" name="radio1">C
</form>

6. Formaction [HTML5] — работает исключительно в связке с type=»image» или type=»submit» тега input (кнопка отправки) и указывает путь до файла, который обрабатывает занесенные в веб-форму данные. Этот путь (URL) служит значением данного атрибута, который по своему действию аналогичен action для тега form, но имеет перед ним приоритет. То есть, при наличии различных параметров обоих атрибутов учитываться будет значение formaction:

Для этого примера вся информация будет обрабатываться именно скриптом, относительный путь до которого (formdata-y) описывается именно атрибутом formaction тега input. При этом элемент action=»formdata» игнорируется веб-браузером.

Еще 4 атрибута (7-10) для input, действия которых тождественны аналогичным элементам для основного тега <form>: method, enctype, novalidate, target (описаны в соответствующем разделе этой статьи). Но также как и formaction, они являются приоритетными для исполнения браузером и действуют только для стандартных (type=»submit») и графических (type=»image») кнопок:

7. Formmethod [HTML5] — устанавливает метод передачи информации (post или get), с помощью которого данные отправляются на веб-сервер.

8. Formenctype [HTML5] — определяет способ кодировки введенной в форму информации. Все значения и условия их использования точно такие же как и в случае с enctype.

9. Formnovalidate [HTML5] — указывает браузеру, что введенную информацию не следует проверять на корректность. Значений, как и novalidate, не имеет.

10. Formtarget [HTML5] — показывает браузеру место загрузки ответа после отправки данных формы (новая вкладка, текущее окно или фрейм). Параметры соответствуют значениям target.

Наверное, вы уже в курсе (если нет, то я об этом информирую), что при загрузке картинок нужно обязательно указывать их ширину и высоту с тем, чтобы веб-браузер сразу мог бы для них резервировать место, что ускоряет отрисовку страницы. Потому-то для графических кнопок (type=»image») можно прописать 2 следующих атрибута:

11. Height [HTML5] — задает высоту изображения в пикселах (px).

12. Width [HTML5] — определяет ширину картинки (px).

<form action="formdata" method="post" name="form1">
<p>Введите ваше имя:<p></p> 
<p><input type="text" name="userLogin"></p>
<p><input type="image" src="/images/knopka.jpg" width="124" height="24"></p>
</form>

13. List [HTML5] — выводит варианты, которые можно выбирать из списка. Параметром является имя идентификатора id (глобальный атрибут) тега <datalist>, который служит контейнером для набора тэгов option, каждый из которых определяет свой пункт списка:

<form action="formdata" method="post" name="form1">
<p><input list="CMS"></p>
   <datalist id="CMS">
    <option>WordPress</option>
    <option>Joomla</option>
    <option>Drupal</option>
    <option>1С-Битрикс</option>
    <option>UMI.CMS</option>
    <option>NetCat</option>
   </datalist>
</form>

14. Max [HTML5] — определяет максимальное значение при вводе числа либо даты, которые выступают в роли параметров. Используются целые положительные и отрицательные числа для атрибутов type=»number», type=»range», а также календарные даты в формате YYYY.MM.DD (год, месяц и день) для type=»date».

15. Min [HTML5] — устанавливает минимально возможное для выбора число или дату. В отношении значений действуют те же правила, что и для атрибута max.

Совместное использование этих двух выше названных атрибутов дает возможность установить диапазон доступных к выбору значений:

<form action="formdata" method="post" name="form1">
<p>Начало события (с 5 по 10 ноября 2019 г.):</p>
<p><input type="date" min="2019-11-05" max="2019-11-10"></p>
<p>Конец события (с 11 по 20 ноября 2019 г.):</p> 
<p><input type="date" min="2019-11-11" max="2019-11-20"></p>
<p>Выберите число (от -5 до 5):</p> 
<p><input type="number" min="-5" max="5"></p>
</form>

Действия следующих 6 атрибутов (пп. 16-21) тега input тождественны или почти совпадают с их воздействием применительно к тегу select.

16. Autofocus [HTML5] (параметры отсутствуют) — логический атрибут, который устанавливает фокус в поле сразу при загрузке вебстраницы, в результате чего можно вводить данные без щелчка по нему кнопкой мышки. Не может быть применен только к input type=»hidden».

17. Disabled (без значений) — отключает для пользователя тот элемент формы, к которому он добавлен. Чаще всего применяется совместно со скриптами, где прописываются условия, при выполнении которых недоступный элемент будет активирован.

18. Form [HTML5] — связывает элемент с формой, когда он располагается вне контейнера <form></form>. Для связки к тэгу form добавляется глобальный атрибут id, а к тегу input — атрибут form, значения которых одинаковы (например, id=»data» и form=»data»).

19. Multiple [HTML5] (параметров нет) — устанавливает возможность множественного выбора для пользователя и применяется только совместно с type=»file» и type=»email».

В случае использования поля для файловой загрузки возможно выбрать сразу несколько файлов с компьютера, задействовав клавиши Ctrl или Shift. Если же выводится поле для ввода адреса электронной почты (type=»email»), то вводить эмейлы следует через запятую.

20. Required [HTML5] (значения отсутствуют) — активирует обязательность внесения данных пользователем. Поэтому браузер блокирует отправку вебформы, если обязательное поле остается пустым и выводит соответствующее сообщение о необходимости его заполнения.

Данный атрибут не используется для графических и стандартных кнопок (type=»button | image»), а также для скрытого поля ввода (type=»hidden»).

21. Size — определяет ширину текстового поля в знаках (подходит лишь для элементов type с параметрами «email | password | search | tel | text | url»). Значение по умолчанию 20 символов.

Следующие четыре атрибута (22-25) для тега input несут практически тот же функционал, что и для многострочного поля textarea, но для полноты картины вкратце упомяну и их.

22. Maxlength [HTML5] — налагает лимит на максимальное количество символов, которое можно вводить при заполнении текстового поля. В случае попытки превысить это ограничение последует блокировка дальнейшего ввода. Этот атрибут применим исключительно для текстовых элементов с type=»email | password | search | tel | text | url».

23. Minlength [HTML5] — накладывает ограничение на минимальное число символов, требуемых ввести в текстовую область. Если последует попытка отправить данные, содержащие меньшее количество знаков, то появится коротенькое сообщение, в котором указано на необходимость дополнить содержание формы и будет дана информация о количестве уже введенных знаков. Условия использования точно такие же, как и в случае с maxlength.

24. Placeholder [HTML5] — можно поместить подсказку (она и будет служить параметром) прямо в текстовое поле, которая пропадет в тот момент, когда пользователь начнет вводить символы. Только для полей, которые формируются посредством параметров email, password, search, text, tel, url атрибута type тэга input.

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

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

26. Pattern [HTML5] — в роли своего значения отражает регулярное выражение, на основании которого задаются правила ввода информации. При этом рекомендуется дополнительно добавить глобальный атрибут title, параметром которого внести разъяснительный текст для помощи юзерам при заполнении полей. Pattern применяется только для элементов email, password, search, text, tel, url. Разберемся на примере. Вот код упрощенной формы регистрации (с логином и паролем):

<form>
<p>Логин <input type="text" name="login" pattern="[A-Za-z]{5,}" title="Логин должен содержать не менее 5 символов, включая большие и маленькие латинские буквы."></p>
<p>Пароль <input type="password" name="pswd" pattern="[A-Za-z0-9]{8,}" title="Пароль должен содержать не менее 8 символов, включая большие и маленькие латинские буквы, а также цифры."></p>
<p><input type="submit" value="Регистрация"></p><p>
</form>

Для поля логина (type=»text») в качестве значения pattern прописано регулярное выражение [A-Za-z]{5,}, которое подразумевает использование знаков латинского алфавита, причем введено должно быть не менее пяти символов.

В отношении текстовой области для пароля (type=»password») задано значение [A-Za-z0-9]{8,}, определяющее ввод исключительно латиницы в любом регистре (большие и маленькие буквы), а также цифр, при этом общее количество всех знаков не должно быть меньше восьми.

При нарушении заданных условий ввода браузер не позволит отправить данные и выведет соответствующее предупреждение:

27. Src — определяет путь до изображения (URL, который является его значением) для отображения графической кнопки «image» (см.таблицу параметров input type выше).

28. Step [HTML5] — устанавливает шаг для элементов, предусматривающих выбор числовых значений (input type=»date | datetime-local | month | number | range | tel | time | week.»).

В качестве параметра может принимать любое целое или дробное число. По умолчанию step=»1″. Чтобы установить конечный диапазон ввода, можно опять-таки использовать атрибуты min и max, упомянутые чуть выше. Для наглядности в тестовую форму включим 2 элемента type=»number». Для первого выставим step=»2″, в для второго step=»0,1″:

<form action="formdata">
 <p>Введите значение от -10 до 10:</p>
 <p><input type="number" min="-10" max="10" step="2">
 <p>Введите значение от 0 до 1:</p>
 <p><input type="number" min="0" max="1" step="0.1">
</form>

29. Value — устанавливает значение элемента формы, которое будет передано обработчику. На сервер посылается пара «имя-параметр», где имя определяется атрибутом name тега input, а параметр — атрибутом value. При этом для различных элементов формы value будет играть разные роли:

• для type=»button | reset | submit» — устанавливает текстовую надпись на кнопках;
• для type=»checkbox | radio | image» — идентифицирует каждый чекбокс, переключатель или графическую кнопку при отправке и обработке данных на сервере;
• для type=»password | text» — сразу при загрузке формы в поле выводит предварительный текст, который может быть изменен или полностью удален пользователем;
• для type=»file» (загрузка файлов) не применяется, поскольку не влияет на этот элемент.

Пример использования для каждого из выше перечисленных вариантов:

<form action="formdata">
<p><input type="text" name="your_name" value="Ваше имя"></p>
<p>Выберите CMS: <input type="radio" name="answer" value="1">WP<input type="radio" name="answer" value="2">Joomla</p> 
<p><input type="submit" value="Отправить"></p>
</form>

Здесь значение атрибута value определяет следующие составляющие каждого из элементов: выводит текстовый фрагмент для поля type=»text» («Ваше имя»), идентифицирует каждый из переключателей («1» и «2»), установленных с помощью type=»radio», а также активирует надпись на кнопке («Отправить»).

Пример создания красивой HTML формы

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

<div class="back">
<form action="formdata">
<div class="form-1">
<label for="name-1">Имя</label>
<input type="text" id="name-1" required>
<label for="name-2">Фамилия</label>
<input type="text" id="name-2" required>
<label for="name-3">Адрес</label>
<input type="text" id="name-3" required>
</div>
<div class="form-2">
<div class="in"><input type="tel" id="name-4" placeholder="Введите номер телефона"></div>
</div>
<div class="form-3">
<div class="in"><input type="email" id="name-5" placeholder="Введите e-mail"></div>
</div>
<div class="form-4">
<input type="submit" value="Отправить данные">
</div>
</form>
</div>

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

.back {max-width:350px; margin:50px auto 0; padding:20px; background:#f3ebe1; font-family:'Oswald', sans-serif;}
.form-1, .form-2, .form-3, .form-4 {padding:15px; border:4px double #909090}
.form-1, .form-2, .form-3 {border-bottom:none}
.form-1 input {display:block; margin-bottom:10px; width:100%}
.in {padding-left:40px}
.in input {width:100%}
.form-2 {background:url(https://goldbusinessnet.com/wp-content/themes/tiny-forge/images/phone_icon.png) no-repeat;background-position:10px 10px}
.form-3 {background:url(https://goldbusinessnet.com/wp-content/themes/tiny-forge/images/letter_icon.png) no-repeat;background-position:10px 10px}
.form-4 input {display:block; height:50px; font-size:24px; width:100%; cursor: pointer}

В результате подобная вебформа приобретает вот такие очертания:

Более полная информация по созданию данной конкретной формы на этой странице (к слову, там же вы можете не только проверить функциональность отдельных текстовых областей, введя в них данные, но и поэкспериментировать с вебформой, отредактировав HTML-код или/и свойства CSS, полностью либо частично изменив ее внешний вид).

Моей целью было познакомить вас с алгоритмом использования различных значений атрибута type и тега form для создания разнообразных HTML форм на сайте. Надеюсь, задача выполнена. В любом случае, делитесь своими соображениями по этой многообразной теме в комментариях. Также посмотрите для закрепления еще один урок Евгения Попова о создании контактной формы: