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

Последнее обновление: 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), поэтому при загрузке веб-страницы в этом поле мы увидим данный текст.

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

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

login=Tom&password=qwerty

При отправке формы браузер соединяет все данные в набор пар «ключ-значение». В нашем случае две таких пары:

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

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

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

HTML5 | Формы

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

Формы в html представляют один из способов для ввода и отправки данных. Все поля формы помещаются между тегами <form> и </form>. Например, создадим простейшую форму:


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Формы в HTML5</title>
	</head>
	<body>
		<form method="post" action="http://localhost:8080/login. php">
			<input name="login"/>
			<input type="submit" value="Войти" />
		</form>
	</body>
</html>

Для настройки форм у элемента form определены следующие атрибуты:

  • method: устанавливает метод отправки данных на сервер. Допустимы два значения:

    post и get.

    Значение post позволяет передать данные на веб-сервер через специальные заголовки. А значение get позволяет передать данные через строку запроса.

  • action: устанавливает адрес, на который передаются данные формы

  • enctype: устанавливает тип передаваемых данных. Он свою очередь может принимать следующие значения:

    • application/x-www-form-urlencoded: кодировка отправляемых данных по умолчанию

    • multipart/form-data: эта кодировка применяется при отправке файлов

    • text/plain

      : эта кодировка применяется при отправке простой текстовой информации

В выше использованном примере:


<form method="post" action="http://localhost:8080/login. php">
	<input name="login"/>
	<input type="submit" value="Войти" />
</form>

у формы установлен метод «post», то есть все значения формы отправляются в теле запроса, а адресом служит строка http://localhost:8080/login.php. Адрес здесь указан случайным образом.

Как правило, по указанному адресу работает веб-сервер, который, используя одну из технологий серверной стороны (PHP, NodeJS, ASP.NET и т.д.), может получать запросы и возвращать ответ. В данном же случае мы не будем акцентировать внимание на технологиях серверной стороны, сосредоточимся лишь на тех средствах HTML, которые позволяют отправлять данные на сервер.

Автодополнение

Часто веб-браузеры запоминают вводимые данные, и при вводе браузеры могут выдавать список подсказок из ранее введенных слов:

Это может быть не всегда удобно, и с помощью атрибута autocomplete можно отключить автодополнение:


<form method="post" autocomplete="off" action="http://localhost:8080/login.
 
 php">
	<input name="login" />
	<input name="password" />
	<input type="submit" value="Войти" />
</form>

Если нам надо включить автодополнение только для каких-то определенных полей, то мы можем применить к ним атрибут autocomplete="on":


<form method="post" autocomplete="off" action="http://localhost:8080/login.php">
	<input name="login" />
	<input name="password" autocomplete="on" />
	<input type="submit" value="Войти" />
</form>

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

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

— HTML: язык гипертекстовой разметки

Устарело: Использование этой функции больше не рекомендуется. Хотя некоторые браузеры могут по-прежнему поддерживать его, возможно, он уже удален из соответствующих веб-стандартов, может находиться в процессе исключения или может быть сохранен только в целях совместимости. Избегайте его использования и обновляйте существующий код, если это возможно; см. таблицу совместимости внизу этой страницы, чтобы принять решение. Имейте в виду, что эта функция может перестать работать в любой момент.

HTML-элемент определяет определенную область, в которой может отображаться другой HTML-документ. Фрейм должен использоваться в пределах

.

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