Работа с формами в html: Создание HTML форм – Формы и поля в HTML. Все о HTML формах

Урок 9. Работа с формами в html

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

Тег <form> парный: обязательно наличие открывающего и закрывающего тегов. Внутри тега <form> можно располагаться поля для ввода текста, кнопки, ссылки и другие элементы. Рассмотрим пример:

Код HTML

<form name="reg" method="post" action="reg.php">
   <!-- Тут должны быть формы ввода, кнопки и прочее. Например... -->

   <inputname="message" type="text"> <!-- Поле для ввода текста -->

   <input type="submit" name='submit" value="Отправить"> <!-- Кнопка отправки информации -->
</form>

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

Форма сама по себе статична и никуда не отправляет данные, а является своеобразной оболочкой, объединяющей все формы с отправляемыми данными средствами HTML-разметки. Обрабатывают данные языки программирования, например, PHP.

Как Вы, возможно, успели заметить у элемента формы <form> есть несколько атрибутов, которые отвечают за название формы, обработчик и метод отправки данных обработчику.

name — атрибут, который содержит название формы. Желательно указывать всегда, так как при добавлении ещё одной формы на страницу обработчик может некорректно сработать. Его обязательно следует указать, если в HTML документе присутствуют несколько форм.

method — это атрибут, который отвечает за метод отправки формы к обработчику. Используется два метода передачи данных — GET и POST, в форме же обычно используют второй метод.

action — это атрибут, указывающий на месторасположение и название обрабатываемого форму скрипта. То есть в форме указывается путь и название файла, который обработает полученные данные. Если значение не будет указано или будет указан символ #, то обработчиком будет служить эта же страница с формой.

enctype — в данном атрибуте указывается способ кодирования данных при их отправке на сервер после файла-обработчика. Как правило, данный атрибут корректно работает и по умолчанию, но если же нужно загрузить файлы, например, изображения, то необходимо в качестве значения атрибута указать multipart/form-data. В таком случае данные не будут кодироваться.

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

Спасибо за внимание!

HTML. Работа с формами — О жизни, работе, людях…

Определение формы

Форма – это элемент HTML, позволяющий передавать информацию на web-сервер, где информация будет обработана. С помощью форм организуются тесты, голосования, опросы. html-формы сами по себе позволяют только организовывать ввод информацию. Для обработки форм необходимо использовать языки программирования, для обработки на стороне клиента можно использовать, например, язык JavaScript, а на стороне сервера – например, PHP, Perl, C.

Форма задается тегами <form></form>. Элементы формы располагаются между этими тегами. Тег <form> может иметь несколько параметров:

• name — имя формы. Необходимо, если на странице несколько форм, и имеется необходимость обратиться к элементам формы .
• action — определяет обработчик формы.
• method — способ отправки информации — GET или POST.

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

Текстовое поле

Оно задается тегом <input>.

Пример использования.

<form name="forma1">
<input type="text" name="t1" size="20" maxlength="50" value="Введите текст">
</form>

При этом в браузере увидим следующий элемент:

• name — имя элемента,
• type — тип элемента (в данном случае — text),
• size — размер текстового поля в символах, которые одновременно будут видны, при вводе большего количества символов, они будут прокручиваться,
• maxlength — максимальное количество символов, которое можно ввести в поле, если опустить этот параметр, то число символов будет неограниченным,
• value — текст, который будет отображаться (его можно стереть), при отсутствии этого параметра поле будет пустым.
• disabled — блокирует поле от любых изменений,
• readonly — делает поле доступным только для чтения.

Пример использования параметров.

<form name="forma1">
<input type="text" name="text1" size="20" maxlength="50" value="неактивное поле" disabled>
<input type="text" name="text1" size="20" maxlength="50" value="только для чтения" readonly>
</form>

Текстовое поле для ввода пароля

Представляет собой текстовое поле с тем отличием, что вводимый текст не отображается, вместо него появляются специальные символы, например звездочки. Используется при вводе паролей. От текстового поля отличается только параметром type=»password».

Пример.

<form name="forma1"> Введите пароль:<br>
<input type="password" name="text1" size="20" maxlength="50">
</form>

Флажки

Флажки задаются тегом <input>, причем один тег задает один флажок. Поэтому чтобы задать три флажка, надо три раза писать input. Для определения указанного выше примера необходимо задать следующий код.

<form name="forma1">
Ваши любимые предметы:<br>
<input type="checkbox" checked>Математика
<input type="checkbox" > Литература
<input type="checkbox" > Физическая культура
</form>

Рассмотрим параметры тега <input>

:

• type — тип элемента (в данном случае — checkbox),
• name — имя элемента, указывает программе обработчику формы, какой пункт выбрал пользователь,
• value — значение элемента, указывает программе обработчику формы значение пункта, который выбрал пользователь,
• checked — им обычно помечают наиболее вероятные для выбора пункты, пользователь щелчком мыши может выбрать другие пункты.

Переключатели

В отличии от флажков, здесь можно выбрать только один пункт. В связи с этим значения параметра name должны быть одинаковы для всех элементов группы. Параметр type=»radio», все остальные такие же, как у флажков.

Пример.

<form name="forma1">
Укажите ваш пол:<br>
<input type="radio" name="sex" value="man" checked>мужской
<input type="radio" name="sex" value="woman"> женский
</form>

Результат

Кнопки

Существует четыре типа кнопок:

• submit — кнопка отправки содержимого формы web-серверу. Ее параметры:
  • type=»submit» — тип кнопки,
  • name — имя кнопки,
  • value — надпись на кнопке.
• image — графическая кнопка отправки содержимого формы web-серверу. Для ее использования необходимо подготовить картинку кнопки, а потом использовать ее в виде кнопки. Ее параметры:
  • type=»image» — тип графической кнопки,
  • name — имя кнопки,
  • src — адрес картинки для кнопки.
• reset — кнопка, позволяющая восстановить все значения по умолчанию в форме. Ее параметры:
  • type=»reset» — тип кнопки очищения,
  • name — имя кнопки,
  • value — надпись на кнопке.
• button — произвольная кнопка, ее действия назначаются вами с использованием языков программирования, т.е. сама она делать ничего не умеет. Ее параметры:
  • type=»button» — тип произвольной кнопки,
  • name — имя кнопки,
  • value — надпись на кнопке.
  • onclick — обработчик события — указывает, что делать при щелчке по кнопке. Вообще, у этого типа кнопок есть и другие события (например, двойной щелчок), но здесь мы не будем их рассматривать.

Пример использования кнопок.

<form name="forma1">
<input type="submit" name="submit" value="Отправить">
<input type="image" name="button_img" src="button.gif">
<input type="reset" name="reset" value="Очистить">
<input type="button" name="button" value="Отправить">
</form>

Кнопки можно задавать и при помощи тегов <button> </button>. Возможности у таких кнопок несколько, они могут иметь содержимое в виде текста или картинки. Этот тег имеет следующие параметры:

• type — тип кнопки, может принимать значения:
  • reset — кнопка очистки формы,
  • submit — кнопка отправки данных,
  • button — кнопка произвольного действия.
• name — имя кнопки,
• value — надпись на кнопке.

 

Поле для файлов

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

Пример.

<form name="forma1">
<input type="file" name="load" size="50">
</form>

 

Поле для ввода текста

Для больших текстов, например для почтовых сообщений, удобно использовать именно этот элемент. Он создается тегами <textarea> </textarea> и имеет следующие параметры:

• name — имя поля,
• cols — ширина поля в символах,
• rows — количество строк текста, видимых на экране,
• wrap — способ переноса слов:
  • off — переноса не происходит,
  • virtual — перенос отображается, но на сервер поступает неделимая строка,
  • physical — перенос и на экране и при поступлении на сервер.
• disabled — неактивное поле,
• readonly — разрешено только чтение.

Пример.

<textarea cols="35" rows="3" wrap="virtual"></textarea><br>

Результат

Раскрывающиеся списки

Списки бывают с возможностью выбора одного элемента и с множественным выбором. Задаются и те, и другие с помощью тегов <select> </select>, внутри которых располагаются элементы значений, заданных тегом <option>

Параметры этих тегов.

• <select>:
  • name — имя списка. Каждый выбранный элемент списка при передаче на сервер будет иметь вид: name.value, где значение (value) берется из тега option.
  • size — определяет количество видимых элементов в списке: 1 — простой раскрывающийся список, больше 1 — список с полосой прокрутки.
  • multiple — разрешает выбор нескольких элементов списка.
• <option>:
  • selected — им помечают наиболее вероятный для выбора элемент списка, если список со множественным выбором, то можно пометить несколько пунктов.
  • value — значение, которое будет отправлено серверу, если пункт выбран.

Пример.

<form name="forma1">
Какой язык вы хотите изучать:
<select name="language" size="1">
<option selected value="html">html
<option value="php">php
<option value="java">java
</select><br><br>
Какое время вы готовы на это потратить:<br>
<select name="time" size="3">
<option selected value="1">1 месяц
<option value="2">2 месяца
<option value="3">3 месяца
</select><br><br>
Какие дни недели для занятий вас устроят:<br>
(выбирайте с нажатой клавишей ctrl)<br>
<select name="day" size="7" multiple>
<option selected value="mon">понедельник
<option value="tue">вторник
<option value="wen">среда
<option selected value="thu">четверг
<option value="fri">пятница
<option value="sat">суббота
<option value="san">воскресенье
</select>
</form>

Результат

Какой язык вы хотите изучать:html php java 
Какое время вы готовы на это потратить:
1 месяц 2 месяца 3 месяца 
Какие дни недели для занятий вас устроят:
(выбирайте с нажатой клавишей ctrl)
понедельник вторник среда четверг пятница суббота воскресенье 

 

Можно использовать теги <optgroup> </optgroup>, позволяющие группировать элементы списка по каким-либо признакам. Например, мы хотим задать каталог сайтов в виде списка, тогда удобнее разбить его на группы по интересам. Для этого нужно поступить следующим образом

<form name="forma1">
Каталог сайтов:<br>
<select name="catalog" size="9">
<optgroup label="Компьютеры">
<option value="1">интернет</option>
<option value="2">мобильники</option>
<option value="3">hardware</option>
</optgroup>
<optgroup label="Работа">
<option value="4">вакансии</option>
<option value="5">трудоустройство</option>
<option value="6">резюме</option>
</optgroup>
<optgroup label="Дом">
<option value="7">здоровье</option>
<option value="8">красота</option>
<option value="9">дети</option>
</optgroup>
</select>
</form>

Каталог сайтов:
  интернетмобильникиhardware  вакансиитрудоустройстворезюме  здоровьекрасотадети

 Замечание.В данном случае необходимо указывать закрывающие теги </option>.

Надписи

Все элементы формы можно связать с их надписями при помощи элемента <label> и его параметра for, значением которого является имя элемента, с которым связываем надпись. Например.

<form name="forma1">
<label for="load">Выбирайте файл: </label>
<input type="file" name="load" size="30">
</form>

Обобщающий пример

<form name="forma1">
<table border="0" cellspacing="5" cellpadding="5">
<caption>Форма регистрации</caption>
<tr> <td align="right" valign="top">Имя</td>
<td><input type="text" name="name" size="25"></td> </tr>
<tr> <td align="right" valign="top">e-mail</td>
<td><input type="text" name="e-mail" size="25"></td> </tr>
<tr> <td align="right" valign="top" >Пароль</td> <td>
<input type="password" name="password" size="25"> </td> </tr>
<tr> <td align="right" valign="top" >Повтор пароля</td> <td>
<input type="password" name="password2" size="25"> </td> </tr>
<tr> <td align="right" valign="top" >Пол</td> <td>
<input type="radio" name="sex" value="man" checked> мужской
<input type="radio" name="sex" value="woman"> женский </td> </tr>
<tr> <td align="right" valign="top">Используемые Вами биржи ссылок</td>
<td><select name="hobby" size="5" multiple>
<option selected value="1">Sape
<option value="2">FatLink
<option value="3">XAP
<option value="4">MainLink
<option value="5">LinkFeed
</select> </td> </tr>
<tr> <td align="right" valign="top">Ваши пожелания</td>
<td> <textarea cols="30" rows="3" wrap="physical">
</textarea> </td> </tr>
<tr> <td align="right" colspan="2">
<input type="submit" name="submit" value="Отправить">
<input type="reset" name="reset" value="Очистить"> </td> </tr>
</table>
</form>

Новые возможности форм в html5 показаны в статье Новые возможности форм

Связанные статьи

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 | WebReference

Элемент <form> (от англ. form — форма) устанавливает форму на веб-странице. Форма предназначена для обмена данными между пользователем и сервером. Область применения форм не ограничена отправкой данных на сервер, с помощью клиентских скриптов можно получить доступ к любому элементу формы, изменять его и применять по своему усмотрению.

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

Для отправки формы на сервер используется кнопка Submit, того же можно добиться, если нажать клавишу Enter в пределах формы. Если кнопка Submit отсутствует в форме, клавиша Enter имитирует её использование.

Когда форма отправляется на сервер, управление данными передаётся программе, заданной атрибутом action элемента <form>. Предварительно браузер подготавливает информацию в виде пары «имя=значение», где имя определяется атрибутом name элемента <input>, а значение введено пользователем или установлено в поле формы по умолчанию. Если для отправки данных используется метод GET, то адресная строка может принимать следующий вид.

http://www.htmlbook.ru/handler.php?nick=%C2%E0%ED%FF+%D8%E0%EF%EE%F7%EA%E8%ED&page=5

Параметры перечисляются после вопросительного знака, указанного после адреса серверной программы и разделяются между собой символом амперсанда (&). Русские буквы преобразуются в шестнадцатеричное представление (в форме %HH, где HH — шестнадцатеричный код для значения ASCII-символа), пробел заменяется на плюс (+).

Допускается внутрь контейнера <form> помещать другие элементы, при этом сама форма никак не отображается на веб-странице, видны только элементы внутри неё.

Закрывающий тег

Атрибуты

accept-charset

Устанавливает кодировку, в которой сервер может принимать и обрабатывать данные.

action

Адрес программы или документа, который обрабатывает данные формы.

autocomplete

Включает автозаполнение полей формы.

enctype

Способ кодирования данных формы.

method

Метод протокола HTTP.

name

Имя формы.

novalidate

Отменяет встроенную проверку данных формы на корректность ввода.

target

Имя окна или фрейма, куда обработчик будет загружать возвращаемый результат.

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

Пример

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>FORM</title>
 </head>
 <body>
 <form action="handler.php">
  <p><b>Как по вашему мнению расшифровывается аббревиатура &quot;ОС&quot;?</b></p>
  <p><input type="radio" name="answer" value="a1">Офицерский состав<Br>
  <input type="radio" name="answer" value="a2">Операционная система<Br>
  <input type="radio" name="answer" value="a3">Большой полосатый мух</p>
  <p><input type="submit"></p>
 </form>
 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Вид элементов формы в окне браузера

Спецификация ?

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

• Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
• Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
• Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
• Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
• Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
• Draft (Черновик спецификации) — первая черновая версия стандарта.

Особняком стоит живой стандарт HTML (Living) — он не придерживается традиционной нумерации версий, поскольку находится в постоянной разработке и обновляется регулярно.

×

Браузеры

В таблице браузеров применяются следующие обозначения.

•  — элемент полностью поддерживается браузером;
•  — элемент браузером не воспринимается и игнорируется;
•  — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

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

×

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 09.10.2018

Редакторы: Влад Мержевич