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

Последнее обновление: 08.04.2016

Формы состоят из определенного количества элементов ввода. Все элементы ввода помещаются между тегами <form> и </form>

Наиболее распространенным элементом ввода является элемент input. Однако реальное действие этого элемента зависит от того, какое значение установлено у его атрибута type. А он может принимать следующие значения:

  • text: обычное текстовое поле

  • password: тоже текстовое поле, только вместо вводимых символов отображаются звездочки, поэтому в основном используется для ввода пароля

  • radio: радиокнопка или переключатель. Из группы радиокнопок можно выбрать только одну

  • checkbox: элемент флажок, который может находиться в отмеченном или неотмеченном состоянии

  • hidden: скрытое поле

  • submit: кнопка отправки формы

  • color: поле для ввода цвета

  • date: поле для ввода даты

  • datetime: поле для ввода даты и времени с учетом часового пояса

  • datetime-local: поле для ввода даты и времени без учета часового пояса

  • email: поле для ввода адреса электронной почты

  • month: поле для ввода года и месяца

  • number: поле для ввода чисел

  • range: ползунок для выбора числа из некоторого диапазона

  • tel: поле для ввода телефона

  • time: поле для ввода времени

  • week: поле для ввода года и недели

  • url: поле для ввода адреса url

  • file: поле для выбора отправляемого файла

  • image: создает кнопку в виде картинки

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

  • button: создает кнопку

  • select: выпадающий список

  • label: создает метку, которая отображается рядом с полем ввода

  • textarea: многострочное текстовое поле

Атрибуты name и value

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Формы в HTML5</title>
	</head>
	<body>
		<form method="get" action="index.html">
			<input type="text" name="login" value="Tom"/>
			<input type="password" name="password"/>
			<input type="submit" value="Войти" />
		</form>
	</body>
</html>

Здесь текстовое поле имеет значение "Tom" (как указано в атрибуте value), поэтому при загрузке веб-страницы в этом поле мы увидим данный текст.

Ввод в форму в HTML5

Поскольку методом отправки данных формы является метод "get", то данные будут отправляться через строку запроса. Так как нам в данном случае не важно, как данные будут приниматься, не важен сервер, который получает данные, поэтому в качестве адреса я установил ту же самую страницу - то есть файл index.html. И при отправке мы сможем увидеть введенные данные в строке запроса:

Ввод в форму в HTML5

В строке запроса нас интересует следующий кусочек:

login=Tom&password=qwerty

При отправке формы браузер соединяет все данные в набор пар "ключ-значение". В нашем случае две таких пары: login=Tom и password=qwerty. Ключом в этих парах выступает название поля ввода, которое определяется атрибутом name, а значением - собственно то значение, которое введено в поле ввода (или значение атрибута value).

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

НазадСодержаниеВперед

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850