- •2. Язык гипертекстовой разметки html
- •Из истории языка
- •Структура документа html
- •Синтаксис элементов html
- •Элементы блочного уровня и строковые элементы
- •Заголовок
- •Элемент разметки meta
- •Элемент разметки link
- •Элемент разметки style
- •Элемент разметки script
- •Теги тела документа
- •Тело документа - контейнер body
- •Теги управления разметкой
- •Списки в html
- •Комментарии
- •Гипертекстовые ссылки
- •Графика в html.
- •Средства описания таблиц в html
- •Пользовательские формы
- •Работа с фреймами
Пользовательские формы
Элемент FORM описывает форму на веб-странице и определяет границы использования других тегов, размещаемых в форме. Тег <FORM> определяется последовательностью тегов <INPUT>, размещенных внутри пары <FORM> и </FORM>. В форме в качестве атрибутов для описания обработки данных, вводимых пользователем в форму используются ак метод (method) и действие (action).
Тег <INPUT> используют для определения области внутри формы, куда вводятся данные. Он формирует поле для ввода информации пользователем. Это может быть текстовое поле, опция, изображение или кнопка. Вид поля ввода определяется значением атрибута TYPE.
|
Тип элемента |
Описание |
|
text |
Используется, если необходимо ввести небольшое количество текста (одну или несколько строк). Кроме того, задается атрибут NAME для определения наименования переменной поля. Имеет еще три дополнительных атрибута.
|
|
checkbox |
Применяется для создания флажков с независимым выбором. Должны также присутствоватьатрибуты NAME, и VALUE. В некоторых случаях необходимо инициализировать данный флаг, как уже отмеченный. В таких случаях тег <INPUT> должен содержать атрибут CHECKED. |
|
radio |
Применяется в случае, когда требуется организовать выбор одного из нескольких возможных значений. Должны быть также указаны атрибуты NAME и VALUE. |
|
image |
Когда пользователь щелкает мышью по изображению, браузер сохраняет координаты соответствующей точки экрана. Далее он "обрабатывает" введенную в форму информацию. Должны быть указаны также атрибуты NAME и SRC. Атрибут SRC содержит URI файла - источника изображения. Атрибут ALIGN является дополнительным и используется аналогично тому же атрибуту тега <IMG>. |
|
password |
Используя данный тип, можно организовать ввод пароля без вывода на экран составляющих его символов. При этом следует помнить, что введенные данные передаются по незащищенным каналам связи и могут быть перехвачены. |
|
button |
Используется для размещения кнопок на веб-странице. Имеет атрибуты NAME и VALUE. |
|
file |
Элемент управления для запуска диалогового окна выбора файла. Для задания имени файла по умолчанию можно использовать атрибут VALUE. |
|
submit |
Используется как элемент интерфейса для завершения ввода данных. Может содержать два дополнительных атрибута: NAME и VALUE. |
|
reset |
Используется как элемент интерфейса для сброса всех введеных в поля формы данных. Дополнительно содержать атрибут VALUE. Данный атрибут определяет надпись на изображении кнопки. |
|
hidden |
Позволяет включить в отправляемую форму значения атрибутов NAME и VALUE, недоступные для изменения пользователем. |
Тег <TEXTAREA> используется для создания текстового поля из нескольких строк. Данный тег использует три атрибута: COLS (число колонок, содержащихся в текстовой области), NAME и ROWS (количество видимых строк текстовой области).
Тег SELECT используют для определения списка пунктов, задаваемых тегами <OPTION>. Тег <SELECT> поддерживает три необязательных атрибута: MULTIPLE, NAME и SIZE.
|
Атрибут |
Описание |
|
MULTIPLE |
Позволяет выбрать более чем одно наименование. |
|
NAME |
Определяет наименование объекта. |
|
SIZE |
Определяет число видимых пользователю пунктов списка |
В форме может использоваться тег <OPTION> только внутри тега <SELECT>. Эти теги поддерживают два дополнительных атрибута: SELECTED и VALUE. Атрибут SELECTED используется для первоначального выбора значения элемента по умолчанию. Атрибут VALUE
указывает на значение, возвращаемое формой после выбора пользователем данного пункта.
Пример:
<BR>Ваш выбор
<SELECT NAME="choice">
<OPTION VALUE="Вариант 1">Вариант 1
<OPTION VALUE="Вариант 2">Вариант 2
<OPTION VALUE="Вариант 3">Вариант 3
<OPTION SELECTED>Вариант 4
</SELECT>