Работа с формами

Формы

Последнее обновление: 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>
Формы в HTML5

Для настройки форм у элемента 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 в HTML5

Это может быть не всегда удобно, и с помощью атрибута 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>

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

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

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