Создание кнопок для управления формами

Чтобы пользователь мог указать, что он завершил заполнения и редактирование данных, в формы добавляются кнопки для подтверждения и отправки данных на обработку. После нажатия такой кнопки информация из всех именованных полей формы (т.е. имеющих атрибут name) собирается браузером для пересылки обрабатывающей программе (в общем случае URL этой программы задается в атрибутом action тега <form>).

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

1. Кнопки для отправки формы

Элемент <input> позволяет создавать два вида кнопок для отправки данных: стандартную текстовую и с помощью графического изображения.

а) Стандартная текстовая кнопка — это элемент <input> типа submit.

При задании типа submit (англ. представить на рассмотрение) элемент <input> создает простую стандартную кнопку, нажатие которой воспринимается браузером, как сигнал о завершении заполнения и разрешение на отправку данных на обработку:

<input type=”submit” value="Моя кнопка"></input>

Атрибут value в этом элементе определяет текст, который используется, как надпись на кнопке. Если атрибут value не задан, то на кнопку выводится текст, принятый данным типом браузера по умолчанию (зависит от типа браузера и русифицирован ли он).

Если в элементе типа submit задать атрибут name, то надпись, выведенная на кнопке (value), будет передана на обработку вместе с другими значениями формы.

б) Графическая кнопка — элемент <input> типа image.

Элемент input типа image применяется для создания индивидуальной графической кнопки, файл изображения которой указывается в параметре src:

<input type=”image” src="button.gif" border=”0”></input>

По общему действию — это аналог submit. Но, помимо значений из полей формы, программе-обработчику дополнительно отсылаются координаты курсора мыши (x и y), взятые в момент щелчка по кнопке (отсчитываются от левого верхнего угла картинки). Любые значения атрибута value игнорируются.

2. Кнопка для очистки полей формы

Элемент <input> типа reset (возвратить в исходное состояние) используется для создания кнопки сброса данных.

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

<input type=”reset” value="Очистить!">

3. Создание кнопок с помощью элемента<button>

Элемент <button> позволяет создавать на веб-странице кнопки, действие которых аналогично, созданным с помощью тега <input>.

Поведение элемента также определяется атрибутом type, принимающим значения submit, reset. Кроме того, элемента имеет дополнительный тип кнопки type="button", поведение которой определяет программист.

Если элемент button расположен в элементе <form>, то по умолчанию он имеет type="submit".

Если элемент button применяется вне формы, то он имеет type="button", т.е. без дополнительного программирования не производит никаких действий.

Когда для создания кнопки используется тег <input>, то на такую кнопку можно поместить только текст, который задается в атрибуте value. В значениях атрибутов теги запрещены, поэтому никакое форматированиенадписи на кнопке (цвет, начертание и т.п.) невозможно.

Для кнопок, создаваемых с помощью тега <button>, название кнопки помещается в тело элемента. В теле этого элемента, помимо текста, могут использоваться любые html-элементы, например, графические изображения.

<button>Кнопка с текстом</button>

<button><img src=" button.gif">Картинка и текст</button>

ЗАДАНИЕ 2 (Исследование поведения кнопок формы)

1. Создать форму, в которой есть текстовое поле для ввода года рождения (задать атрибут name="born") и текст "Год рождения:", описывающий назначение этого поля. Ограничить размеры поля и количество вводимых символов до 4.

2. С помощью элементов <input> добавить в форму кнопки "Проверить!" для отправки формы (submit) и "Очистить!" для очистки (reset) формы.

3. Проверить функционирование формы. Ввести год рождения и нажать кнопку "Проверить!".

а) Провести анализ адресной строки. Что было добавлено браузером к URL?

б) Очистить поле ввода с помощью соответствующей кнопки.

4. Закомментировать разметку для кнопок.

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

Повторить проверку (п.3).

5. Заменить в элементе кнопки "Проверить!" значение атрибута type на "button". Перезагрузить страницу, убрать из адресной строки всю информацию, добавленную браузером при отправке формы (если она там осталась).

Нажать кнопку "Проверить!" и проанализировать адресную строку. Как можно объяснить произошедшее?

6. Убрать у кнопки "Проверить!" атрибут type. Проверить работу формы. Что произошло и как это можно объяснить?

Флажки

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

<input name=”…” type=”checkbox”>

По умолчанию флажок сброшен. Если нужно, чтобы при выводе формы он был сразу отмечен, то необходимо добавить в элемент атрибут checked. Этот атрибут принадлежит к особому типу, он не имеет значения. Главное — это его наличие или отсутствие.

<input type=”checkbox” name=”send” checked >

Замечание

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

<input type=”checkbox” name=”send” checked="checked" > </input>

Атрибут value задает строку, которая при установленном флажке будет отправлена на обработку в роли значения элемента (флажка). Когда флажок установлен, а атрибут value отсутствует, то по умолчанию отсылается значение 'on'.

Дата добавления: 2015-10-28