Переключатели и радиокнопки

Кнопки

Элемент input

Одиночный элемент input определяет тип компонента формы и его параметры.

Помимо общих атрибутов class, dir, id, lang, style и title, для элемента input определен атрибут type и другие атрибуты, набор которых зависит от типа компонента.

Атрибут type, определяющий тип компонента, может иметь одно из следующих значений:

· button – задает кнопку;

· checkbox – задает переключатель;

· radio – задает радиокнопку;

· text – задает текстовое поле (это значение по умолчанию);

· password – задает текстовое поле ввода пароля;

· file – задает окно выбора файлов для передачи на Web-сервер;

· hidden – задает скрытое текстовое поле;

· reset – задает кнопку сброса данных, введенных в форме;

· submit – задает кнопку передачи данных, введенных в форме, на Web-сервер;

· image – задает графическую кнопку передачи данных, введенных в форме, на Web-сервер.

Для элемента input в DOM2 HTML определен интерфейс HTMLInputElement со следующими общими свойствами: dir, id, lang, style и title, хранящими значения соответствующих атрибутов, className для атрибута class и type для атрибута type.

Ниже описываются компоненты, задаваемые в элементе input, а также свойства и методы интерфейса HTMLInputElement для этих компонент.

Элемент input со значением type="button" задает кнопку. Для компонента этого типа определены следующие атрибуты элемента input:

· name – имя кнопки;

· value – надпись на кнопке (размер кнопки подстраивается под размер надписи, причем надпись на кнопке выровнена по центру как по горизонтали, так и по вертикали);

· disabled (без значения) – если задан, кнопка переводится в неактивное (отключенное) состояние.

Внутри надписи служебные символы, например, символ "\n", рассматривается как обычный символ. Чтобы сделать надпись в несколько строк, необходимо в атрибуте value новое слово, переносимое на новою строку, начинать с первой позиции следующей строки (такой перенос не работает в Web-браузерах Opera и Safari).

Для кнопки можно задать стили шрифта, текста, цвета и фона, а также стили полей, границ и отступов блоковой модели документа. Свойство vertical-align (вертикальное выравнивание надписи) для кнопок не действует, поскольку надписи всегда выровнены по середине. Свойство background-image (использование в кнопке изображения в качестве фона) не действует в Internet Explorer.

Для кнопки в интерфейсе HTMLInputElement определены, помимо общих свойств элемента input, следующие свойства:

· name – значение атрибута name;

· value – значение атрибута value;

· disabled (false или true) – состояние кнопки (активное или неактивное);

· form (только для чтения) – содержит объект HTMLFormElement формы, к которой принадлежит кнопка.

Кроме этого, для кнопки определен метод click(), имитирующий щелчок мышью по кнопке.

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

Фрагмент HTML для вывода кнопок:

<form id="buttonForm">

<h3>1. Простая кнопка</h3>

<input type="button" id="button1" value="Кнопка 1"/>

<h3>2. Кнопка c сопрововодительной надписью</h3>

<label for="button2">Нажмите эту кнопку</label>

<input type="button" id="button2" value="Кнопка 2" />

<h3>3. Кнопка с использованием стилей</h3>

<input type="button" id="button3" value="Кнопка 3"

style="color: red; font-weight: bold; font-size: 14pt;

font-family: Times New Roman; background-color: yellow;

vertical-align: top; text-align: left;

padding: 10px; width: 150px; height: 100px" />

<h3>4. Кнопка с надписью в несколько строк<br/>

(не работает в Opera и Safari)</h3>

<input type="button" id="button3" value="Нажмите

эту

кнопку"

style="color: green; font-weight: bold; height: 60px;

font-size: 10pt; font-family: Verdana"/>

<h3>5. Отключение кнопки</h3>

<input type="button" id="button4"

value="Кнопка 4" disabled/>

</form>

<h3>6. Кнопка с изображением в качестве фона<br/>

(не работает в Internet Explorer)</h3>

<input type="button" id="button4" value="Пуск"

style='color: navy; font-weight: bold; padding: 10px;

width: 131px; height: 34px;

background-image: url("images/imageButton.gif")'/>

Web-страница для этого фрагмента будет иметь следующий вид:

Элемент input со значением type="checkbox" или type="radio" задает переключатель или радиокнопку с двумя состояниями (включен/выключен). Компоненты, содержащие переключатели или радиокнопки можно объединить в группу, присвоив им одинаковые значения в атрибуте name. Различие между переключателями и радиокнопками заключается в том, что для группы переключателей можно задать включенными несколько компонент, а для радиокнопок – только один компонент (поэтому радиокнопки называют также альтернативными переключателями). По умолчанию переключатель и радиокнопка первоначально находятся в выключенном состоянии. Чтобы задать начальное состояние элемента как включенное, используется атрибут checked (без значения). Если для радиокнопок несколько элементов имеют атрибут checked, то включенным окажется последний элемент. Значение атрибута value для переключателей и радиокнопок должно задавать уникальное значение для каждого переключателя или радиокнопки (именно по значению этого атрибута выполняется анализ состояния данного компонента).

Стили цвета, фона и блоковой модели документа для переключателей или радиокнопок задавать не рекомендуется. В Firefox, Netscape Navigator и Safari они не действуют, в Opera действуют, а в Internet Explorer они также действуют, но по-другому, чем в Opera.

Для компонент переключателя или радиокнопки в интерфейсе HTMLInputElement DOM2 HTML, помимо общих свойств элемента input, определены следующие свойства:

· name – значение атрибута name;

· value – значение атрибута value;

· checked (true или false) – текущее состояние компонента (включено или выключено);

· defaultChecked (true или false) – состояние компонента, заданное по умолчанию с помощью атрибута checked (включено или выключено);

· disabled (false или true) – текущее состояние компонента (активное или неактивное);

· form (только для чтения) – содержит объект HTMLFormElement формы, к которой принадлежит компонент.

Кроме этого, для переключателя или радиокнопки определен метод click(), имитирующий щелчок мышью по этому компоненту.

Пример 4.5.24. Использование переключателей и радиокнопок:

Фрагмент HTML для переключателей и радиокнопок:

<form id="checkboxForm">

<h3>1. Использование переключателей</h3>

<h4>Какие языки программирования Вы знаете:</h4>

<table>

<tr>

<td><label for="Clang">С</label></td>

<td><input type="checkbox" name="langKnowledge"

id="Clang" value="C" checked/></td>

</tr><tr>

<td><label for="Basiclang">Basic</label></td>

<td><input type="checkbox" name="langKnowledge"

id="Basiclang" value="Basic"/></td>

</tr><tr>

<td><label for="Javalang">Java</label></td>

<td><input type="checkbox" name="langKnowledge"

id="Javalang" value="Java" checked/></td>

</tr><tr>

<td><label for="JSlang">JavaScript</label></td>

<td><input type="checkbox" name="langKnowledge"

id="JSlang" value="JavaScript" disabled/></td>

</tr><tr>

<td><label for="Pascallang">Pascal</label></td>

<td><input type="checkbox" name="langKnowledge"

id="Pascallang" value="Pascal"/></td>

</tr>

</table>

<hr/>

<h3>2. Использование радиокнопок</h3>

<h4>Ваш любимый язык программирования:</h4>

<table>

<tr>

<td><label for="ClangR">С</label></td>

<td><input type="radio" name="prefLang"

id="ClangR" value="C"/></td>

</tr><tr>

<td><label for="BasiclangR">Basic</label></td>

<td><input type="radio" name="prefLang"

id="BasiclangR" value="Basic"/></td>

</tr><tr>

<td><label for="JavalangR">Java</label></td>

<td><input type="radio" name="prefLang"

id="JavalangR" value="Java" checked/></td>

</tr><tr>

<td><label for="JSlangR">JavaScript</label></td>

<td><input type="radio" name="prefLang"

id="JSlangR" value="JavaScript" disabled/></td>

</tr><tr>

<td><label for="PascallangR">Pascal</label></td>

<td><input type="radio" name="prefLang"

id="PascallangR" value="Pascal"/></td>

</tr>

</table>

</form>

Web-страница для этого фрагмента будет иметь следующий вид:

После выполнения этого фрагмента сценария:

// Включение переключателя для языка Basic

document.getElementById("Basiclang").checked = true;

// Выключение переключателя для языка Java

document.getElementById("Javalang").checked = false;

// Включение радиокнопки для языка Basic

document.getElementById("BasiclangR").checked = true;

// Перевод в активное состояние

// переключателя для языка JavaScript

document.getElementById("JSlang").disabled = false;

// Перевод в активное состояние

// радиокнопки для языка JavaScript

document.getElementById("JSlangR").disabled = false;

// Определение коллекции переключателей

langKnowledgeElements =

document.getElementsByName("langKnowledge");

// Определение коллекции радиокнопок

prefLangElements = document.getElementsByName("prefLang");

// Задание начального значения строки вывода

outputString = "";

// Проверка переключателя, включенного

// по умолчанию, в цикле

for(i = 0; i < langKnowledgeElements.length;i++)

{

// Если переключатель включен по умолчанию

if(langKnowledgeElements[i].defaultChecked)

{

// Добавление языка по умолчанию в строку

outputString += ", " +

langKnowledgeElements[i].value;

}

}

// Добавление языков по умолчанию в строку

outputString = "Языки, включенные по умолчанию:" +

outputString.substr(1);

// Определение радиокнопки, включенной

// по умолчанию, в цикле

for(i = 0; i < prefLangElements.length;i++)

{

// Если радиокнопка включена по умолчанию

if(prefLangElements[i].defaultChecked)

{

// Добавление любимого языка

// по умолчанию в строку

outputString += "\nЛюбимый язык по умолчанию: " +

prefLangElements[i].value;

// Выход из цикла

break;

}

}

// Начальное значение количества

// включенных переключателей

langNumber = 0;

// Определение количества включенных

// переключателей в цикле

for(i = 0; i < langKnowledgeElements.length;i++)

{

// Если переключатель включен

if(langKnowledgeElements[i].checked)

// Увеличение количества

// включенных переключателей на 1

langNumber++;

}

// Добавление количества языков в строку вывода

outputString += "\nКоличество языков, которые Вы знаете,

равно " + langNumber;

// Определение включенной радиокнопки в цикле

for(i = 0; i < prefLangElements.length;i++)

{

// Если радиокнопка включена

if(prefLangElements[i].checked)

{

// Добавление любимого языка в строку вывода

outputString += "\nВаш любимый язык: " +

prefLangElements[i].value;

// Выход из цикла

break;

}

}

// Вывод строки

alert(outputString);

Web-страница примет следующий вид: