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

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

Coursme
12 мин.
30 янв. 2024

HTML-формы состоят из различных элементов ввода, расположенных между тегами <form> и </form>

Один из основных элементов ввода - это <input>, и его поведение зависит от значения атрибута type

Вот некоторые распространенные значения атрибута type для <input>

  • text: текстовое поле
  • password: поле для ввода пароля с звездочками вместо отображения символов
  • radio: радиокнопка, позволяющая выбрать только один вариант из группы
  • checkbox: флажок, который может быть отмечен или неотмечен
  • hidden: скрытое поле
  • submit: кнопка для отправки формыи другие, такие как color, date, email, и так далее.

Кроме <input> существуют другие элементы, которые также используются в формах:

<button>: создает кнопку<select>: выпадающий список<label>: метка, отображаемая рядом с полем ввода<textarea>: многострочное текстовое поле

У каждого элемента ввода могут быть установлены атрибуты name и value. Атрибут name идентифицирует поле ввода, а атрибут value устанавливает его значение. Пример:

<form method="get" action="index.html">
   <input type="text" name="login" value="coursme"/>
   <input type="password" name="password"/>
   <input type="submit" value="Войти" />
</form>

Здесь текстовое поле имеет значение "Coursme" (из атрибута value), а при отправке формы данные будут переданы через строку запроса, например: login=Coursme&password=qwerty. Сервер может использовать эти данные, чтобы понять, какие значения были введены в форму.

Когда форма отправляется с использованием метода "get", данные передаются через строку запроса в URL. В приведенном примере, при отправке формы, браузер сформирует URL-запрос, содержащий данные формы, которые будут выглядеть примерно так:

http://example.com/index.html?login=Coursme &password=qwerty

Здесь параметры login и password соответствуют атрибутам name у полей ввода, а их значения взяты из того, что ввел пользователь (или из значения атрибута value).

Таким образом, сервер может извлечь эти параметры из строки запроса и использовать их для обработки данных формы. Например, в языке программирования на стороне сервера (например, PHP, Python, или других), код может получить значения параметров и выполнить соответствующие действия.

Важно отметить, что использование метода "get" для отправки формы с конфиденциальной информацией, такой как пароль, не рекомендуется из-за того, что данные видны в строке запроса URL. Для более безопасной передачи конфиденциальных данных рекомендуется использовать метод “post”

Заключение

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

Назад
Следующий урок
Комментарии
Чтобы оставлять комментарии — надо авторизоваться
Комментариев еще нет
Будьте первым
Главная
Кабинет
Курсы
Меню