Работа с формами в html, создание основных элементов формы

Цель урока: Создание и работа с формами в html. Изучение основных элементов формы

Содержание:

Создание и работа с формами в html
Элементы формы html
- Выпадающий список HTML
- Текстовая область в HTML
Другие элементы
Дополнительные элементы и атрибуты

Создание и работа с формами в html

Все элементы управления, коими являются текстовые поля, кнопки, флажки, выпадающие списки и т.п., как правило, размещаются внутри формы:

<form action="file.php" method="post" id="form">
...
содержимое формы
...
</form>

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

Атрибуты формы:

`action` (англ. «действие») Файл на сервере с кодом для отработки отосланных данных	`action="http://www.название.домен/имя программы"`
`enctype` (англ. «тип кодировки»)	text/plain (обычный текст) application/x-www-dorm-urlencoded (для метода Post отправки формы) multipart/form-data (для метода Post, если прикрепляются файлы)
`method` (метод отправки данных)	post get

В атрибуте action указывается серверный файл со скриптом, ответственным за основную обработку данных, пересылаемых из формы. Обычно код этого файла пишется на серверном языке программирования, например, на языке php или perl.
Атрибут enctype указывает на тип передаваемой на сервер информации, если это просто текстовые данные — text/plain, если с формой отсылаются файлы, то следует указать multipart/form-data.
Атрибут method указывает и определяет форму передачи данных. Подробно мы на этом останавливаться не будем, однако следует сказать, что для более надежной передачи следует указать метод post.

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

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

<input type="text" name="login" size="20" value="Логин" maxlength="25">

Результат:

Атрибуты:

Значение атрибута type — text — указывает на то, что это именно текстовое поле
size — размер текстового поля в символах
maxlength — максимальное кол-во вмещающихся в поле символов
value — первоначальный текст в текстовом поле
name — имя элемента, необходимо для обработки данных в файле-обработчике

Поле ввода пароля html:

<input type="password" name="pass" size="20" value="Пароль" maxlength="25">

Результат:

Вместо текста в поле отображается маска — звездочки или кружочки

Кнопка submit html:

<input type="submit" value="Отправить данные">

Результат:

Кнопка submit собирает все данные с формы, введенные пользователем и отправляет их по адресу, указанному в атрибуте action формы.

Кнопка очистки формы html:

<input type="reset" value="Очистить форму">

Результат:

Кнопка возвращает состояние всех элементов управления к первоначальному (очищает форму)

Html флажок:

<input type="checkbox" name="asp" value="yes">ASP<br>
<input type="checkbox" name="js" value="yes" checked="checked">javascript<br>
<input type="checkbox" name="php" value="yes">PHP<br>
<input type="checkbox" name="html" value="yes" checked="checked">HTML<br>

Результат:

ASP
javascript
PHP
HTML

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

Атрибуты:

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

Radio кнопка html:

<input type="radio" name="book" value="asp">ASP<br>
<input type="radio" name="book" value="js">Javascript<br>
<input type="radio" name="book" value="php">PHP<br>
<input type="radio" name="book" value="html" checked="checked">HTML<br>

Результат:

ASP
Javascript
PHP
HTML

radio кнопка html служит для единственного выбора из нескольких вариантов.

Атрибуты:

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

Важно: Для элементов radio необходимо, чтобы значение атрибута name у всех элементов в группе было одинаковым: в таком случае элементы будут работать взаимосвязано, при включении одного элемента, другие буду отключаться

Выпадающий список HTML

Рассмотрим пример добавления выпадающего списка:

<select name="book" size="1">
	<option value="asp">ASP</option>
	<option value="js">JavaScript</option>
	<option value="php">PHP</option>
	<option value="html" selected="selected">HTML</option>
</select>

Результат:

Выпадающий список состоит из главного тега — select — который имеет закрывающую пару, а каждый пункт списка — это тег option, внутри которого отображается текст пункта

Атрибуты:

Атрибут size со значением «1» указывает на то, что список в свернутом виде отображает один пункт, остальные открываются при щелчке на стрелочке меню
Атрибут selected у пункта (option) указывает на то, что именно этот пункт будет изначально виден, а остальные пункты «свернуты»
Атрибут value необходим для обработки элемента программистом. Поэтому его можно опустить.

Для больших и сложных списков есть возможность добавить подзаголовки — тег optgroup с атрибутом label (надпись):

<select name="book" size="1">
	<optgroup label="Английские">
		<option value="asp">ASP</option>
		<option value="js">JavaScript</option>
		<option value="php">PHP</option>
		<option value="html" selected="selected">HTML</option>
	</optgroup>
	<optgroup label="Русские">
		<option value="asp_rus">ASP по-русски</option>
		<option value="js_rus">JavaScript по-русски</option>
	</optgroup>
</select>

Для предоставления возможности выбора нескольких пунктов одновременно необходимо добавить атрибут multiple. Но в таком случае и атрибут size следует установить в значение, большее, чем 1:

<select name="book" size="4" multiple="multiple">
...

Текстовая область в HTML

Для ввода большого фрагмента текста служит элемент текстовая область:

<textarea name="description" cols="30" rows="10">Текст</textarea>

Результат:

Атрибуты:

Ширина элемента зависит от атрибута cols, который указывает сколько символов помещается по горизонтали.
Атрибут rows определяет количество строк в элементе.
Атрибут name необходим для обработки элемента программистом. Поэтому его можно опустить.

Другие элементы

Обычная кнопка:

<input type="button" value="что-то сделать">

Элемент кнопка-изображение:

<input type="image" width="32" height="32" src="1.png">

Результат:

Элемент загрузка файла:

Для прикрепления файла к форме существует специальный элемент управления:

<input type="file" name="userfile" size="20">

Результат:

При его использовании значение кодировки формы (атрибут enctype у тега form) должен иметь значение multipart/form-data

Скрытое поле:

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

<input type="hidden" name="uid" value="15362">

Дополнительные элементы и атрибуты

Label for:

Для элементов управления radio и checkbox удобно использовать дополнительные элементы, которые, во-первых, делают привязку текста к самому элементу radio или checkbox, во-вторых, добавляют обводку при клике:

<input type="checkbox" id="book1">
<label for="book1">ASP</label>

В примере создана надпись (тег label) для элемента checkbox. Привязка осуществляется через атрибут id, значение которого указано в атрибуте for надписи.

Результат:

Атрибут disabled:

Атрибут disabled позволяет блокировать элемент, делая его недоступным для изменения пользователем:

<input type="text" name="login" size="20" value="Логин" maxlength="25" disabled="disabled"><br>
<input type="checkbox" name="asp" value="yes">ASP<br>
<input type="checkbox" name="js" value="yes" checked="checked"  disabled="disabled">javascript<br>

Результат:

Атрибут readonly:

Атрибут readonly делает текстовые документы доступными только для чтения (вносить и изменять текст нельзя):

<input type="text" name="login" size="20" value="Логин" 
maxlength="25" readonly="readonly">

Результат:

Элемент fieldset:

Для визуального оформления группы объектов можно использовать элемент fieldset:

<fieldset>
<legend>Книги</legend>
<input type="checkbox" value="html">HTML<br>
<input type="checkbox" value="asp">ASP<br>
<input type="checkbox" value="js">javaScript<br>
</fieldset>