HTML Форма и ввод

HTML-форма собирает информацию, вводимую пользователем

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

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

Вот пример простой HTML-формы:

  • <form>Элемент используется для создания формы,actionАтрибут определяет URL-адрес назначения для отправки данных формы,methodАтрибут определяет HTTP-метод (здесь используется "post") для отправки данных.
  • <label>Элемент используется для добавления меток к элементам формы, что улучшает доступность.
  • <input>Элемент является одним из наиболее часто используемых элементов формы; с его помощью можно создавать текстовые поля ввода, поля пароля, радиокнопки и флажки.typeАтрибут определяет тип поля ввода,idАтрибут используется для связи<label>Элемент,nameАтрибут используется для идентификации поля формы.
  • <select>Элемент используется для создания выпадающего списка,<option>Элемент используется для определения опций в выпадающем списке.

Пример

<form action="/" method="post">
    <!-- Текстовое поле ввода -->
    <label for="name">Имя пользователя:</label>
    <input type="text" id="name" name="name" required>

    <br>

    <!-- Поле ввода пароля -->
    <label for="password">Пароль:</label>
    <input type="password" id="password" name="password" required>

    <br>

    <!-- Радиокнопка -->
    <label>Пол:</label>
    <input type="radio" id="male" name="gender" value="male" checked>
    <label for="male">Мужской</label>
    <input type="radio" id="female" name="gender" value="female">
    <label for="female">Женский</label>

    <br>

    <!-- Флажок -->
    <input type="checkbox" id="subscribe" name="subscribe" checked>
    <label for="subscribe">Подписаться на push-уведомления</label>

    <br>

    <!-- Выпадающий список -->
    <label for="country">Страна:</label>
    <select id="country" name="country">
        <option value="cn">Китай</option>
        <option value="usa">США</option>
        <option value="uk">Великобритания</option>
    </select>

    <br>

    <!-- Кнопка отправки -->
    <input type="submit" value="Отправить">
</форма>

Попробуйте »
Examples

Онлайн-пример

Пример

Вот пример формы, содержащей два поля ввода:

<form action="">
Имя: <input type="text" name="firstname"><br>
Фамилия: <input type="text" name="lastname">
</форма>

Попробуйте »

Пример

Вот пример формы, содержащей обычное поле ввода и поле ввода пароля:

<form action="">
Имя пользователя: <input type="text" name="user"><br>
Пароль: <input type="password" name="password">
</форма>

Попробуйте »

(Дополнительные примеры можно найти внизу этой страницы.)

HTML-форма

Форма — это область, содержащая элементы формы.

Элементы формы — это элементы, которые позволяют пользователям вводить содержимое, например текстовые поля (textarea), раскрывающиеся списки (select), переключатели (radio-buttons) и флажки (checkbox).

Мы можем использовать<form>тег для создания формы:

Пример

<форма>
.
Элемент input
.
</форма>

HTML-форма - элементы input

Наиболее часто используемые теги форм — это теги input<input>。

Тип ввода определяетсяtypeатрибутом.

Мы рассмотрим несколько часто используемых типов ввода.

Текстовое поле (текстовые поля)

Текстовое поле определяется<input type="text">тегом; когда пользователям нужно ввести буквы, цифры и т. д., они используют текстовое поле.

Пример

<форма>
Имя: <input type="text" name="firstname"><br>
Фамилия: <input type="text" name="lastname">
</форма>

Браузер отображает это следующим образом:

Имя:
Фамилия:

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

Поле пароля

Поле пароля определяется<input type="password">тегом:

Пример

<форма>
Пароль: <input type="password" name="pwd">
</форма>

Браузер отображает это следующим образом:

Пароль:

Примечание:Символы поля пароля не будут отображаться открытым текстом, а будут заменены звёздочками или точками.*Радиокнопка (радиокнопки).Тег определяет варианты для радиокнопок:

Радиокнопка (радиокнопки)

<input type="radio">Браузер отображает следующим образом:

Пример

<form action="">
<input type="radio" name="sex" value="male">Мужской<br>
<input type="radio" name="sex" value="female">Женский
</форма>

Определяет флажки.

Male
Female

Флажок (флажки)

<input type="checkbox">Браузер отображает следующим образом:

Флажок (флажки)

Пример

<форма>
<input type="checkbox" name="vehicle[]" value="Bike">Я люблю велосипеды<br>
<input type="checkbox" name="vehicle[]" value="Car">Я люблю маленькие автомобили
</форма>

Браузер отображает это следующим образом:

Мне нравятся велосипеды
Мне нравятся маленькие автомобили

Кнопка отправки (Submit)

<input type="submit">Определяет кнопку отправки.

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

actionАтрибут будет обрабатывать полученные входные данные пользователя:

Пример

<form name="input" action="html_form_action.php" method="get">
Имя пользователя: <input type="text" name="user">
<input type="submit" value="Отправить">
</форма>

Браузер отображает это следующим образом:

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

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

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

  • post: метод HTTP POST, данные формы будут включены в тело формы и отправлены на сервер; используется для отправки конфиденциальных данных, таких как имя пользователя и пароль.

  • get: значение по умолчанию, метод HTTP GET, данные формы будут добавлены к URL атрибутаactionи разделены?, обычно используется для неконфиденциальной информации, такой как пагинация, и т. д. Например: https://www.example.com/?page=1, номер страницы "1" — это данные, отправленные методом get.

Пример

<!-- Ниже представлена форма, которая использует GET-запрос для отправки данных на текущий URL; метод по умолчанию — GET. -->
<форма>
  <label>Имя:
    <input name="submitted-name" autocomplete="name">
  </label>
  <button>Сохранить</button>
</форма>

<!-- Ниже представлена форма, которая использует POST-запрос для отправки данных на текущий URL. -->
<form method="post">
  <label>Имя:
    <input name="submitted-name" autocomplete="name">
  </label>
  <button>Сохранить</button>
</форма>

<!-- Форма использует теги fieldset, legend и label -->
<form method="post">
  <fieldset>
    <legend>Заголовок</legend>
    <label><input type="radio" name="radio"> Выберите меня</label>
  </fieldset>
</форма>

Try itДругие примеры

Радиокнопка (радиокнопки)
В этом примере показано, как создать радиокнопки в HTML.

Флажок (флажки)
В этом примере показано, как создать флажки на HTML-странице. Пользователи могут устанавливать или снимать флажки.

Простой выпадающий список
В этом примере показано, как создать простой выпадающий список. Поле выпадающего списка — это необязательный список.

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

Текстовая область (Textarea)
В этом примере показано, как создать текстовую область (многострочный элемент управления вводом). Пользователи могут вводить текст в текстовой области. Количество символов, которые можно ввести, не ограничено.

Создание кнопки
В этом примере показано, как создать кнопку. Вы можете настроить текст на кнопке.

Try itПример формы

Форма с границами
В этом примере показано, как нарисовать форму с заголовком вокруг данных.

Форма с полями ввода и кнопкой подтверждения
Этот пример демонстрирует, как добавить форму на страницу. Эта форма содержит два поля ввода и кнопку подтверждения.

Форма с флажками
Эта форма содержит два флажка и кнопку подтверждения.

Форма с радиокнопками
Эта форма содержит две радиокнопки и кнопку подтверждения.

Отправка электронной почты из формы
Этот пример демонстрирует, как отправить электронное письмо из формы.

Метка формы HTML

Новое: Новые теги HTML5

Тег Описание
<form> Определяет форму, в которой пользователи могут вводить данные
<input> Определяет поле ввода
<textarea> Определяет текстовое поле (многострочный элемент управления вводом)
<label> Определяет тег элемента <input>, обычно заголовок поля ввода
<fieldset> Определяет группу связанных элементов формы и заключает их во внешнюю рамку
<legend> Определяет заголовок элемента <fieldset>
<select> Определяет параметры раскрывающегося списка
<optgroup> Определяет группу параметров
<option> Определяет параметры раскрывающегося списка
<button> Определяет кнопку для нажатия
<datalist>Новое Указывает предопределённый список параметров элемента управления вводом
<keygen>Новый Определяет поле генератора ключей для формы
<output>Новый Определяет результат вычисления
Другие расширения