Форма в html: Сумасшедшие формы | htmlbook.ru

Шаблон HTML-формы — журнал «Доктайп»

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

Шаблон HTML-формы

<form action="#" method="post" target="_blank">
    <h3>Шаблон формы</h3>
    <fieldset>
      <legend>Персональные данные</legend>
      <ul>
        <li>
          <label for="name">Имя:*</label>
          <input type="text" name="name" placeholder="Иван Иванов" required>
        </li>
        <li>
          <label for="age">Возраст:</label>
          <input type="number" name="age" placeholder="27" min="0" max="125">
        </li>
      </ul>
    </fieldset>
    <fieldset>      
      <legend>Контакты</legend>
      <ul>
        <li>
          <label for="email">E-mail:*</label>
          <input type="email" name="mail" placeholder="ivanov@gmail. com" required>
        </li>
        <li>
          <label for="number">Телефон:*</label>
          <input type="tel" name="phone" placeholder="+7 000 000-00-00" maxlength="21" required>
        </li>
      </ul>
    </fieldset>
		<div>
	    <label for="message">Увлечения</label>
	    <textarea name="comment" placeholder="Расскажите обо всём, что для вас важно"></textarea>
		</div>
    <fieldset>
      <legend>Учёба</legend>
      <ul>
        <li>
          <input type="checkbox" name="intensive-courses" checked>
          <label for="courses">Прохожу курсы</label>
        </li>
        <li>
          <input type="checkbox" name="books">
          <label for="books">Читаю книги</label>
        </li>
        <li>
          <input type="checkbox" name="video">
          <label for="video">Смотрю видео</label>
        </li>
      </ul>
    </fieldset>
    <fieldset>
      <legend>Предпочтения</legend>
      <ul>
        <li>
          <input type="radio" name="preference" value="frontend" checked>
          <label for="front">Фронтенд-разработка</label>
        </li>
        <li>
          <input type="radio" name="preference" value="backend">
          <label for="back">Бэкенд-разработка</label>
        </li>
      </ul>
    </fieldset>
    <div>
      <button type="submit">Отправить</button>
      <p>* — Обязательные поля</p>
    </div>
  </form>

Из чего состоит форма

<form> — контейнер формы, в нём содержатся все поля и кнопка для отправки данных. Тегу добавляется два атрибута: action и post. В первом указывается URL-адрес, на который будет отправлена форма, а второй задаёт метод отправки:

• post — посылает данные в теле HTTP-запроса. Его используют, когда нужно отправить много данных и ссылка на результат их обработки не нужна. Например, при редактировании личного профиля.
• get — метод по умолчанию. Он посылает данные формы в строке запроса, то есть они видны в адресной строке браузера. Метод применяется, например, в поисковых формах.

Тег <fieldset> группирует поля формы. Он часто используется с <legend> — тегом, который задаёт подписи для каждой группы. Мы использовали этот тег, чтобы разделить поля формы на три части: «Персональная информация», «Контакты» и «Обратная связь».

Заголовок или подпись для полей ввода. Он связывается с элементами двумя способами.

При помощи атрибута for со значением, аналогичным id элемента:

<label for="name">Имя:*</label>
<input type="text" name="name" placeholder="Иван Иванов" required>

Элемент заключается между открывающим и закрывающим тегами <label>:

<label>
	<input type="checkbox" checked>Соглашаюсь на обработку персональных данных
</label>

<label for="education">Уровень образования</label>
<select>
	<option value="secondary">Среднее общее</option>
	<option value="secondary vocational">Среднее профессиональное</option>
	<option value="higher" selected>Высшее</option>
	<option value="incomplete higher" selected>Неоконченное высшее</option>
</select>

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

Атрибуты тега<select>

• autocomplete — включено ли автозаполнение поля;
• disabled — в списке нельзя ничего выбрать;
• form — связывает <select> с формой, если он не вложен в тег <form>;
• multiple — создаёт «мультиселект», то есть список, в котором можно выбрать несколько значений;
• name — имя элемента, используется для отправки формы;
• required — один из пунктов обязательно должен быть выбран;
• size — размер элемента.

Добавляет поле для ввода сообщения — пользователь может оставить в нём вопрос, комментарий для техподдержки или что-то ещё.

<label for="message">Увлечения</label>
<textarea name="comment" placeholder="Расскажите обо всём, что для вас важно"></textarea>

У <textarea> есть особенность: пользователи могут прямо в браузере растягивать текстовое поле по ширине и высоте, ломая вёрстку и нарушая замыслы дизайнера. Чтобы заблокировать такое поведение, используйте CSS-свойство resize: none.

Все атрибуты textarea

Основные атрибуты textarea:

• name — имя поля;
• id — связывает поле с <label>
  ;
• maxlength и minlength — задают максимальную или минимальную длину текста;
• required — указывает, что поле обязательно для заполнения;
• placeholder — выводит короткую подсказку для пользователей — что нужно вводить;
• disabled — блокирует поле ввода;
• readonly — делает поле доступным только для чтения, ввод запрещён.

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

<label for="email">E-mail:*</label>
<input type="email" name="mail" placeholder="ivanov@gmail.  com" required>

Чтобы пользователи вводили данные в правильном формате, тегу <input> нужно задавать атрибут type с подходящим значением:

• text — можно вводить только текст;
• number — ввод только цифр;
• tel — для телефонных номеров;
• email — ввод электронной почты;
• submit — инпут превращается в кнопку для отправки данных на сервер;
• password — поле для ввода паролей;
• date — для ввода даты;
• checkbox — инпут превращается в чекбокс;
• radio — создаёт радиокнопки.

У атрибута более 20 значений, полный список — на сайте MDN.

Все атрибуты тега input

Основные атрибуты тега<input>:

• id — связывает input с <label>;
• name — имя поля;
• maxlength или minlength — максимальная или минимальная длина текста;
• max или min — максимальное или минимальное значение числа и даты;
• required — поле обязательно для заполнения;
• placeholder — в поле ввода отображается подсказка — что нужно вводить;
• disabled — блокирует input;
• autocomplete — автозаполнение;
• checked — для чекбоксов и радиокнопок, делает поле выбранным;
• pattern — задаёт паттерн для ввода данных, часто используется в типах tel и email;
• value — значение элемента;
• enctype — указывает, в каком виде пересылать данные на сервер.

Создаёт кнопку для отправки формы:

<button type="submit">Отправить</button>

В старых проектах всё ещё встречаются кнопки, сделанные с помощью <input type="button">. Но у такого способа есть ограничения — например, в <button> можно добавить изображение или псевдоэлемент, а в <input> нет.

Что выбрать

<textarea> — если нужно поле для ввода сообщения.

<select> — для раскрывающихся списков.

<input> — когда нужны чекбоксы, радиокнопки, поля для загрузки файлов и ввода данных.

<button> — для кнопки отправки формы.

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

ТелеграмПодкастБесплатные учебники

Полное руководство по элементам HTML-формы

Создание HTML-формы – неотъемлемая часть сайта и важный навык веб-разработчиков. Используйте это руководство для изучения элементов HTML-форм.

Введение

HTML-формы требуются для сбора данных от посетителей сайта. Например, при регистрации на Uber, Netflix или Facebook пользователь вводит свое имя, почту и пароль.

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

• Пользовательские стили
• Нормализация CSS

Элемент Form

Элемент Form (<form></form>) оборачивает все элементы внутри HTML-формы.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Sign Up Form</title>
        <link rel="stylesheet" href="css/normalize.css">
        <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet">
        <link rel="stylesheet" href="css/main.  css">
    </head>
    <body>
      <form action="index.html" method="post">
      
      </form>
    </body>
</html>

Атрибуты:

• action – это веб-адрес (URL) программы, которая обрабатывает данные формы.
• Method – это HTTP метод, который используется браузером для отправки формы.
• Возможные значения: POST или GET. POST – отправляет данные формы на сервер.
  GET – данные отправляются внутри URL, параметры разделяются знаком «?».

Примечание: Нельзя создать форму внутри формы. То есть использование элемента <form> внутри другого элемента <form> недопустимо.

Элемент Input

Это самый популярный элемент HTML-формы. Используется для создания текстовых полей, в которые пользователь вводит информацию (например: пароль, адрес почты и т. д.).

Создадим текстовое поле, в которое пользователь сможет ввести свое имя.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Sign Up Form</title>
        <link rel="stylesheet" href="css/normalize.css">
        <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet">
        <link rel="stylesheet" href="css/main.css">
    </head>
    <body>
      <form action="index.html" method="post">
          <input type="text" name="student_name">
      </form>
    </body>
</html>

В примере выше над тегом input были добавлены три атрибута.

type

Указывает на тип ввода. При значении text пользователь должен вводить текстовые данные. У этого атрибута имеется множество значений, например, email, tel (для номера телефона), password и т. д.

Пример: при попытке зайти в свой профиль на сайте (Amazon/Netflix) необходимо указать почту и пароль. Для этих целей используется элемент input. Атрибуты type будут иметь значения email и password соответственно.

id

Это не обязательное, но весьма полезное поле HTML-формы. Например, для определения элементов в CSS/JavaScript. Идентификаторы используются для сопоставления меток с нужными элементами управления формой.

name

Обязательный атрибут. При передаче HTML-формы в серверный код сервер должен интерпретировать данные из формы и правильно их обработать.

placeholder

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

Примечание: Использование разных значений в атрибуте type выводит разный результат:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1. 0">
        <title>Sign Up Form</title>
        <link rel="stylesheet" href="css/normalize.css">
        <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet">
        <link rel="stylesheet" href="css/main.css">
    </head>
    <body>
      <form action="index.html" method="post">
          <input type="text" name="student_name">
          <input type="email" name="student_email">
          <input type="password" name="student_password">
      </form>
    </body>
</html>

Элементы input без placeholder:

Элементы input с placeholder:

Элемент textarea

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

Элемент <textarea> не является самозакрывающимся тегом, поэтому требует открывающей и закрывающей скобки.

Атрибуты:

• id – см. <input/>.
• name – см. <input/>.
• cols – задает видимую ширину текстовой области.
• rows – задает видимое количество строк в текстовой области.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Sign Up Form</title>
        <link rel="stylesheet" href="css/normalize.css">
        <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet">
        <link rel="stylesheet" href="css/main.css">
    </head>
    <body>
      <form action="index.html" method="post">
          <textarea name="student_bio"></textarea>
      </form>
    </body>
</html>

Примечание: В большинстве браузеров можно изменять размер элемента.

Элемент button

Один из важнейших элементов HTML-формы. Без кнопки вы не сможете отправить и обработать данные формы на сервере.

В элементе задается атрибут type, который может принимать три разных значения: submit, reset и button.

Атрибуты:

• type=”reset” – при нажатии очищает все данные формы.
• type=”button” –  в нем нет какого-то стандартного поведения. В основном используется в JavaScript для программирования настраиваемого поведения.
• type=”submit” – стандартное поведение кнопки «Отправить», т. е. передача данных на сервер.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Sign Up Form</title>
        <link rel="stylesheet" href="css/normalize.css">
        <link href="https://fonts. googleapis.com/css?family=Lato:300,400,700" rel="stylesheet">
        <link rel="stylesheet" href="css/main.css">
    </head>
    <body>
      <form action="index.html" method="post">
        
          <input type="text" name="student_name">
          <input type="email" name="student_email">
          <input type="password" name="student_password">
          
          <textarea name="student_bio"></textarea>
          
          <button type="submit">Submit</button>
        
      </form>
    </body>
</html>

Элемент label

Пока что пользователь не сможет понять, для чего нужен каждый элемент HTML-формы. Вы не можете предугадать, куда вводить адрес почты, а куда – пароль. Формы смотрятся недоделанными и непонятными.

Каждую строку HTML-формы можно отметить элементом label.

Наиболее популярным атрибутом label является for.

Атрибуты:

for – связывает метку строки с определенным элементом формы. Соответствие проверяется по ID. Значением атрибута ID для элемента input в примере выше является email. Оно совпадает со значением атрибута for для элемента label. Таким образом, оба элемента связаны.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Sign Up Form</title>
        <link rel="stylesheet" href="css/normalize.css">
        <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet">
        <link rel="stylesheet" href="css/main.css">
    </head>
    <body>
      <form action="index.html" method="post">
          <label for="name">Name</label>
          <input type="text" name="student_name">

          <label for="mail">Email</label>
          <input type="email" name="student_email">

          <label for="password">Password</label>
          <input type="password" name="student_password">

          <label for="bio">Biography</label>
          <textarea name="student_bio"></textarea>

          <button type="submit">Submit</button>
      </form>
    </body>
</html>

Примечание: если навести мышкой на метку (название строки), то активируется поле ввода, связанное с данной меткой Это стандартное поведение элемента.

Меню select

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

Для экономии места в интерфейсе рекомендуется выносить все списки длиннее 4-5 пунктов в меню select.

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

Элементу <select> нужны открывающие и закрывающие теги.

<select> отображает выпадающее меню с заданными значениями. Сам по себе элемент select не выполняет никаких действий, т.к. ему нужны дополнительные теги (элементы option). Здесь можно провести параллель с тегом <ul>, которому необходимы элементы <li>.

Атрибуты:

• name – см. <input/>.
• <option> – вариант выбора из меню select. Использует атрибут value.

value – при отправке формы на сервер каждый элемент обладает определенным значением (value) для текстовых полей и областей. Иными словами, value – это все, что пользователь указывает в поле. Но при создании меню select с готовыми опциями необходимо заранее определять в них value.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Sign Up Form</title>
        <link rel="stylesheet" href="css/normalize.css">
        <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet">
        <link rel="stylesheet" href="css/main.css">
    </head>
    <body>
      <form action="index.html" method="post">
          <h3>Your basic info</h3>

          <label for="name">Name</label>
          <input type="text" name="student_name">

          <label for="mail">Email</label>
          <input type="email" name="student_email">

          <label for="password">Password</label>
          <input type="password" name="student_password">

          <h3>Your profile</h3>

          <label for="bio">Biography</label>
          <textarea name="student_bio"></textarea>

          <label for="courses">Select Courses</label>
          <select name="student_courses">
              <option value="computer_engineering">Computer Science Engineering</option>
              <option value="slectrical_engineering">Electrical Engineering</option>
              <option value="mechanical_engineering">Mechanical Engineering</option>
              <option value="civil_engineering">Civil Engineering</option>
              <option value="chemical_engineering">Chemical Engineering</option>
          </select>
          
        <button type="submit">Submit</button>
      </form>
    </body>
</html>

Для формы выбора курса также задается элемент label. Кроме того, списки можно упорядочить по логическим группам. Для этих целей используется элемент <optgroup>.

Атрибуты:

label: – название группы опций (вариантов). В примере ниже варианты выбора делятся на две группы с меткой Engineering (Проектирование) и Management (Управление).

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Sign Up Form</title>
        <link rel="stylesheet" href="css/normalize.css">
        <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet">
        <link rel="stylesheet" href="css/main.css">
    </head>
    <body>
      <form action="index.html" method="post">
          <h3>Your basic info</h3>

          <label for="name">Name</label>
          <input type="text" name="student_name">

          <label for="mail">Email</label>
          <input type="email" name="student_email">

          <label for="password">Password</label>
          <input type="password" name="student_password">

          <h3>Your profile</h3>

          <label for="bio">Biography</label>
          <textarea name="student_bio"></textarea>

          <label for="courses">Select Courses</label>
          <label for="courses">Select Courses</label>
          <select name="student_courses">
            <optgroup label="Engineering">
              <option value="computer_engineering">Computer Science</option>
              <option value="electrical_engineering">Electrical</option>
              <option value="mechanical_engineering">Mechanical</option> 
              <option value="chemical_engineering">Chemical</option>
              <option value="civil_engineering">Civil</option>
            </optgroup>
            <optgroup label="Management">
              <option value="finance_management">Finance Management</option>
              <option value="technology_management">Technology</option>
              <option value="marketing_management">Marketing</option>
              <option value="business_administration">Business</option>     
            </optgroup>
          </select>

        <button type="submit">Submit</button>
      </form>
    </body>
</html>

Радиокнопки

Меню select – это идеальное решение для HTML-формы с объемным списком. Однако при наличии 5 и менее вариантов выбора, лучше реализовать их через радиокнопки.

В отличие от меню select, радиокнопки (radio button) сразу показывают все доступные опции. Пользователь по-прежнему может выбрать только один вариант.

Атрибуты:

• name – см. <input/>.
• value – определение значений заданных вариантов.

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Sign Up Form</title>
        <link rel="stylesheet" href="css/normalize.css">
        <link href="https://fonts.googleapis. com/css?family=Lato:300,400,700" rel="stylesheet">
        <link rel="stylesheet" href="css/main.css">
    </head>
    <body>
      <form action="index.html" method="post">
          <h3>Your basic info</h3>

          <label for="name">Name</label>
          <input type="text" name="student_name">

          <label for="mail">Email</label>
          <input type="email" name="student_email">

          <label for="password">Password</label>
          <input type="password" name="student_password">

          <label>Age:</label>
          <input type="radio" value="under_16" name="user_age"><label for="under_16">Under 16</label><br>
          <input type="radio" value="over_16" name="user_age"><label for="over_16">16 or Older</label>

          <h3>Your profile</h3>

          <label for="bio">Biography</label>
          <textarea name="student_bio"></textarea>

          <label for="courses">Select Courses</label>
          <select name="student_courses">
            <optgroup label="Engineering">
              <option value="computer_engineering">Computer Science Engineering</option>
              <option value="slectrical_engineering">Electrical Engineering</option>
              <option value="mechanical_engineering">Mechanical Engineering</option>
              <option value="civil_engineering">Civil Engineering</option>
              <option value="chemical_engineering">Chemical Engineering</option>
            </optgroup>
            <optgroup label="Management">
              <option value="finance_management">Finance Management</option>
              <option value="technology_management">Technology Management</option>
              <option value="marketing_management">Marketing Management</option>
              <option value="business_administration">Business Administration</option>
            </optgroup>
          </select>

        <button type="submit">Submit</button>
      </form>
    </body>
</html>

Примечание: Внутри одной группы радиокнопок атрибут name должен быть одинаковым.

Чекбоксы

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

Атрибуты:

• name – см. <input/>.
• value – определение значений заданных вариантов.
• checked – отметка о предвыборе данного варианта, т.к. по умолчанию у чекбоксов нет выбранного значения. Важно помнить, что это логический атрибут (boolean).

<input type="checkbox" checked value="abhishek" name="user_name" />

В примере ниже каждый отдельный вариант использовался с метками (элементом label). Для объединения чекбоксов и меток внутри HTML-формы использовался атрибут for для label и атрибут id для checkbox.

Примечание: поскольку кликать по маленьким чекбоксам неудобно, лучше оборачивать элемент <label>  вокруг каждого чекбокса. Тогда при клике в области метки выделение чекбокса будет добавляться или сниматься. Однако в примере ниже этого не сделано.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Sign Up Form</title>
        <link rel="stylesheet" href="css/normalize.css">
        <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet">
        <link rel="stylesheet" href="css/main.css">
    </head>
    <body>
      <form action="index.html" method="post">
          
          <h3>Your basic info</h3>
          
          <label for="name">Name</label>
          <input type="text" name="student_name">

          <label for="mail">Email</label>
          <input type="email" name="student_email">

          <label for="password">Password</label>
          <input type="password" name="student_password">

          <label>Age:</label>
          <input type="radio" value="under_16" name="user_age"><label for="under_16">Under 16</label><br>
          <input type="radio" value="over_16" name="user_age"><label for="over_16">16 or Older</label>

          <h3>Your profile</h3>
          
          <label for="bio">Biography</label>
          <textarea name="student_bio"></textarea>

          <label for="courses">Select Courses</label>
          <select name="student_courses">
            <optgroup label="Engineering">
              <option value="computer_engineering">Computer Science Engineering</option>
              <option value="slectrical_engineering">Electrical Engineering</option>
              <option value="mechanical_engineering">Mechanical Engineering</option>
              <option value="civil_engineering">Civil Engineering</option>
              <option value="chemical_engineering">Chemical Engineering</option>
            </optgroup>
            <optgroup label="Management">
              <option value="finance_management">Finance Management</option>
              <option value="technology_management">Technology Management</option>
              <option value="marketing_management">Marketing Management</option>
              <option value="business_administration">Business Administration</option>
            </optgroup>
          </select>

          <label>Interests:</label>
          <input type="checkbox" value="interest_engineering" name="user_interest"><label for="engineering">Engineering</label><br>
          <input type="checkbox" value="interest_business" name="user_interest"><label for="business">Business</label><br>
          <input type="checkbox" value="interest_law" name="user_interest"><label for="law">Law</label>
        
        <button type="submit">Submit</button>
      </form>
    </body>
</html>

Отличия чекбоксов от радиокнопок HTML-формы

Чекбокс может существовать сам по себе. Радикнопки появляются только в качестве группы (минимум 2 кнопки).
В отличие от радиокнопки выбор чекбокса не является обязательным.

Конечный результат

В статье было представлено пошаговое руководство по созданию HTML-формы. Не старайтесь запомнить все и сразу – ни один разработчик не сможет назвать каждый атрибут или элемент. Гораздо важнее научиться ориентироваться в документации.

Вы можете добавить в эти примеры CSS и создать собственные формы.

Перевод статьи Abhishek Jakhar: A step-by-step guide to getting started with HTML forms

• 10 вещей в HTML, о которых вы вряд ли знали
• 10 способов проверить знания HTML/CSS
• Супершпаргалка по верстке для новичков: все основные HTML-теги

HTML-форма (с примерами)

В этом уроке мы узнаем о формах в HTML с помощью примеров.

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

 <форма>
    Имя: 
    
    

    Фамилия: 
    
    

    электронная почта: 
    
    

    пароль: 
    
    

    
 

 <форма>
    Имя:
    


    Пол:
    
    Мужской
    
    Женщина 


    Страна: 
    <выбрать имя="страна">
        Выберите вариант
        Непал
        США
        Австралия
    


    Сообщение:

    


    
    Подписаться?


    
 

 <форма действие="/логин">
    Электронная почта:
    


    Пароль:
    


    
 

В приведенном выше примере при отправке формы данные из формы отправляются на /login .

метод

Атрибут method определяет метод HTTP, который будет использоваться при отправке формы. Существует 3 возможных значений для атрибута метода :

• диалог : Этот метод используется, когда форма находится внутри элемента
  . Использование этого метода закрывает диалоговое окно и отправляет событие отправки формы.

Чтобы узнать больше о HTTP-методах GET и POST, посетите Действие HTML-формы: POST и GET .

цель

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

enctype

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

 <метод формы="post" enctype="application/x-www-form-urlencoded">
 

В приведенном выше примере данные из формы будут закодированы в формате x-www-form-urlencoded (который является форматом кодирования по умолчанию).

имя

Указывает имя формы. Имя используется в Javascript для ссылки или доступа к этой форме.

 <имя формы="login_form">
    Электронная почта:
    


    Пароль:
    


    
 

Вышеупомянутая форма может быть доступна в javascript как:

 document.forms['login_form'] 

Хотя можно использовать имя для доступа к элементам формы в javascript, рекомендуется использовать id для доступа к форме элементы.

novalidate

Если установлен атрибут novalidate , все проверки в элементах формы пропускаются.

 <новая форма>
    Введите адрес электронной почты:
    


    <тип ввода="отправить">
 

В приведенном выше примере форма будет отправлена, даже если мы введем недопустимое значение в поле электронной почты , например Hi .

Содержание

Формы | HTML Собака

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

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

Основные теги, используемые в HTML формах: form , input , textarea , select и option .

форма

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

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

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

Итак, элемент формы будет выглядеть примерно так:

Реклама здесь! На давно известном, хорошо читаемом и уважаемом ресурсе веб-разработки.

ввод

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

• type="text" > или просто — стандартное текстовое поле. Это также может иметь атрибут со значением , который устанавливает исходный текст в текстовом поле.
• type="password" > аналогично текстовому полю, но символы, вводимые пользователем, будут скрыты.
• type="checkbox" > — это флажок, который может включать и выключать пользователь. Это также может иметь проверил атрибут ( проверил > — атрибут не требует значения), и делает начальное состояние флажка как бы включенным.
• type="radio" > аналогично флажку, но пользователь может выбрать только один переключатель в группе. Это также может иметь проверенный атрибут .
• type="submit" > — это кнопка, при выборе которой будет отправлена ​​форма. Вы можете управлять текстом, который появляется на кнопке отправки, с помощью значение атрибут, например .

Обратите внимание, что, как и теги img и br , тег input , который не окружает какой-либо контент, не требует закрывающего тега.

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

textarea — это, по сути, большое многострочное текстовое поле. Ожидаемое количество строк и столбцов можно определить с помощью строк и столбцов , хотя вы можете манипулировать размером в свое удовольствие с помощью CSS.

Большое количество текста
 

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

выберите

Тег select работает с тегом option для создания раскрывающихся окон выбора.

<выбрать>
    Вариант 1
    Вариант 2
    Вариант 3

 

При отправке формы будет отправлено значение выбранного параметра. Это значение будет текстом между выбранным открывающим и закрывающим тегом опции, если явное значение не указано с атрибутом value , и в этом случае вместо этого будет отправлено это. Так, в приведенном выше примере, если выбран первый элемент, будет отправлен «Вариант 1», если выбран третий элемент, будет отправлен «третий вариант».

Аналогично проверенному атрибуту флажков и переключателей, 9Тег 0005 option также может иметь атрибут selected , чтобы начать с одного из уже выбранных элементов, например. Грызуны будет предварительно выбирать «Грызуны» из элементов.