HTML формы

HTML формы

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

Что такое форма HTML

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

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

Тег <form> используется для создания формы HTML. Вот простой пример формы входа в систему:

<form>
  <fieldset>
    <legend>Войти</legend>
    <label>Имя пользователя: <input type="text"></label>
    <label>Пароль: <input type="password"></label>
    <input type="submit" value="Войти">
  </fieldset>
</form>

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

Элементы ввода (input)

Это наиболее часто используемый элемент в формах HTML.

Элемент input позволяет указывать различные типы полей ввода пользователя, в зависимости от атрибута type. Элемент ввода может иметь тип текстовое поле, чекбокс, поле для ввода пароля, переключатель (радио кнопка), кнопка отправки, кнопка сброса и несколько новых типов ввода, введенных в HTML5.

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

Текстовые поля - это однострочные области, которые позволяют пользователю вводить текст.

Однострочные элементы управления вводом текста создаются с использованием элемента <input>, атрибут type которого имеет значение text. Вот пример однострочного ввода текста, используемого для ввода имени пользователя:

<label>Имя пользователя: <input type="text"></label>

Поле для ввода пароля (input type password)

Поля пароля похожи на текстовые поля. Единственная разница в том, символы в поле пароля не видны, т.е. отображаются в виде звездочек или точек. Это сделано для того, чтобы другие не могли прочитать пароль на экране пока вы его вводите. Это такие же однострочные элементы управления вводом текста, созданные с использованием элемента <input>, атрибут type которого имеет значение password.

Пример поля для ввода пароля:

<label>Пароль: <input type="password"></label>

Радио кнопки (переключатели)

Радио кнопки используются, чтобы позволить пользователю выбрать одну опцию из предварительно определенного набора. Они создаются с использованием элемента <input>, атрибут type которого имеет значение radio.

<form>
  <fieldset>
    <legend>Войти</legend>
    <input type="radio" name="sex" id="male">
    <label for="male">Мужской</label>
    <input type="radio" name="sex" id="female">
    <label for="female">Женский</label>
  </fieldset>
</form>

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

Чекбоксы (флажки)

Чекбоксы позволяют пользователю выбрать один или несколько параметров из предварительно определенного набора. Чекбокс создается с использованием элемента <input>, атрибут type которого имеет значение checkbox.

<form>
  <input type="checkbox" name="sports" id="soccer">
  <label for="soccer">Футбол</label>
  <input type="checkbox" name="sports" id="cricket">
  <label for="cricket">Крикет</label>
  <input type="checkbox" name="sports" id="baseball">
  <label for="baseball">Бейсбол</label>
</form>

Поле выбора файла (input type file)

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

Это поле также создается с использованием элемента <input>, значение атрибута type которого установлено в file.

<form>
  <label for="file-select">Загрузка файла:</label>
  <input type="file" name="upload" id="file-select">
</form>

Textarea

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

<form>
  <label for="address">Введите адрес:</label>
  <textarea rows="3" cols="30" name="address" id="address"></textarea>
</form>

Выпадающий список (select options)

Выпадающий список - это раскрывающийся список параметров, который позволяет пользователю выбрать один или несколько параметров из раскрывающегося списка. Поле выбора создается с использованием элемента <select> и элемента <option>. Элементы option в элементе <select> определяют каждый элемент списка.

<form>
  <label for="city">Город:</label>
  <select name="city" id="city">
    <option value="moscow">Москва</option>
    <option value="stpetersburg">Санкт-Петербург</option>
    <option value="kazan">Казань</option>
  </select>
</form>

Кнопки отправки и сброса (submit и reset)

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

<form action="action.php" method="post" id="users">
  <label for="name">Имя:</label>
  <input type="text" name="name" id="name">
  <input type="submit" value="Отправить">
  <input type="reset" value="Сбросить">
</form>

Оставьте первый комментарий

Оставить комментарий

Ваш электронный адрес не будет опубликован.


*