Form. Style

приемы работы сценариев JavaScript с HTML-формами.

Если в HTML-документе определена форма, то она доступна сценарию JavaScript как объект, входящий в объект document с именем, заданным атрибутом NAME тега FORM.

Свойства форм

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

Свойства первого набора:

action - Значение атрибута ACTION тега FORM.
encoding - Значение атрибута ENCTYPE тега FORM.
method - Значение атрибута METHOD тега FORM.
target - Значение атрибута TARGET тега FORM.
elements - Массив всех элементов формы.
length - Размер массива elements.

Большинство свойств первого набора просто отражает значение соответствующих атрибутов тега FORM. Что же касается массива elements, то в нем находятся объекты, соответствующие элементам, определенным в форме. Эти объекты образуют второй набор свойств формы. Адресоваться к этим объектам можно как к элементам массива elements, причем первому элементу формы будет соответствовать элемент с индексом 0, второму - с индексом 1 и т.д. Однако удобнее обращаться к элементам формы по их именам, заданным атрибутом NAME.

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

Кнопки (BUTTON, RESET, SUBMIT)

Свойства

name. Имя объекта.
value. Надпись на кнопке.

Метод

click( ). Вызов этого метода тождественен щелчку мышкой по кнопке.

Пример:

	<script>	
	function btnClick()
	{
	var Txt1 = "";
	var Txt2 = "";
	Txt1 = document.Test.bt.value;
	Txt2 = document.Test.bt.name;
	document.getElementById('ex1').innerHTML="<HR>"+
	"Вы нажали кнопку: " + Txt1.bold() +
	" с именем: "  + Txt2.bold() +"<HR>";
	}
	
	</script>
	</head>
	<body>
	<H1>Нажатие кнопки&ly/H1>
	<div id="ex1"></div>
	<FORM NAME="Test">
	<INPUT TYPE="button" NAME="bt" VALUE="Щелкни здесь!"
	onClick="btnClick();">
	</FORM>

Нажатие кнопки

Флажок (CHECKBOX)

Свойства:

name - Имя объекта.
value - Надпись на кнопке.
checked - Состояние флажка:
- true - флажок установлен,
- false - флажок не установлен.
defaultChecked. Отражает наличие атрибута CHECKED:
- true - есть,
- false - нет.

Метод

click( ). Вызов этого метода меняет состояние флажка.

Пример:

			
<H1>Метод click флажка</H1>
<FORM NAME="Testl">
Флажок <INPUT TYPE="checkbox" NAME="ch">
<BR>Состояние флажка можно изменить и этой кнопкой
<INPUT TYPE="button" VALUE="Смена состояния"
onClick="document.Testl.ch.click();">
</FORM>

Метод click флажка

Переключатель (RADIO)

Свойства:

name. Имя объекта.
value. Надпись на кнопке.
length. Количество переключателей в группе.
checked. Состояние переключателя:
- true - переключатель включен,
- false - выключен.
defaultChecked. Отражает наличие атрибута CHECKED:
- true - есть,
- false - нет.

Метод

click( ). Вызов этого метода включает переключатель.

Так как группа переключателей имеет одно имя NAME, то к переключателям надо адресоваться как к элементам массива.

Пример:

<script>
function btnClick()
{
if(document.Test1.Sex[0].checked){
document.Test1.Sex[1].click();
}else{
document.Test1.Sex[0].click();
}
}
</script>

<H1>Метод click группы переключателей</H1>
<FORM NAME="Test1">
<INPUT TYPE="RADIO"  NAME="Sex" VALUE ="Man" CHECKED>Мужской
<INPUT TYPE="RADIO"  NAME="Sex" VALUE ="Woman">Женский
<BR>Состояние переключателей можно изменить и этой кнопкой
<INPUT TYPE="button" VALUE="Смена состояния" onClick="btnClick();">
</FORM>

Метод click группы переключателей

Список (SELECT)

Свойства:

name - Имя объекта.
selectedIndex - Номер выбранного элемента или первого среди выбранных (если указан атрибут MULTIPLE).
length - Количество элементов (строк) в списке.
options - Массив элементов списка, заданных тегами OPTION.

Каждый элемент массива options является объектом со следующими свойствами:

value - Значение атрибута VALUE.
text - Текст, указанный после тега OPTION.
index - Индекс элемента списка.
selected - Присвоив этому свойству значение true, можно выбрать данный элемент.
defaultSelected. Отражает наличие атрибута SELECTED: true - есть, false - нет.

Методы:

focus( ) - Передает списку фокус ввода.
blur( ) - Отбирает у списка фокус ввода.

Пример:

	<script>
	function btnClick2()
	{
	var sI=document.Test2.Item.selectedIndex;
	var Txt="";
	Txt="Предложено "+document.Test2.Item.length+" напитков"+
	"\nВыбран "+document.Test2.Item.options[sI].text+
	" (value= "+document.Test2.Item.options[sI].value+
	", index= "+document.Test2.Item.options[sI].index+")";
	if(document.Test2.Item.options[sI].defaultSelected)
	{Txt+="\nЭтот напиток выбирается по умолчанию";}
	alert(Txt);
	}
	</script>
	
	<H1>Работа с готовым списком</H1>
	<FORM NAME="Test2">
	<SELECT NAME="Item" SIZE=5>
	<OPTION VALUE="tea" SELECTED>Чай
	<OPTION VALUE ="coffee">Кофе
	<OPTION VALUE ="milk">Молоко
	<OPTION VALUE ="cocoa">Какао
	<OPTION VALUE ="juice">Сок
	</SELECT>
	<INPUT TYPE="button" VALUE="Пусть кофе"
	onClick="Test2.Item.options[1].selected=true;">
	<INPUT TYPE="button" VALUE="Посмотрим"
	onClick="btnClick2();">
	</FORM>

Работа с готовым списком

Кроме работы с готовыми списками JavaScript может заполнять список динамически. Для записи нового элемента списка используется конструктор Option c четырьмя параметрами, первый из которых задает текст, отображаемый в списке, второй - значение элемента списка, соответствующее значению атрибута VALUE, третий соответствует свойству defaultSelected, четвертый - свойству selected.

Пример:

<H1>Динамическое заполнение списка</H1>
<FORM NAME="Sel">
<!-- Пустой список ссылок-->
<SELECT NAME="ListOfLinks">
</SELECT>
<!-- Кнопка активизации выбранной ссылки-->
<INPUT TYPE="button" VALUE="Переход"
onClick="window.location.href=document.links[Sel.ListOfLinks.selectedIndex];">
</FORM>
<A HREF="http://kdg.HtmlWeb.ru"></A>
<A HREF="http://www.dstu.edu.ru/"></A>
<A HREF="http://sp2all.ru/"></A>
<A HREF="http://www.VseTaksi.ru/"></A>
<script>
for(i=0; i<document.links.length; i++)
{   // Создание i-элемента списка и запись в него ссылки
document.Sel.ListOfLinks.options[i] = new Option(document.links[i], i, false, false);
}
// Выделение первого элемента в списке
document.Sel.ListOfLinks.selectedIndex = 0;
</script>

Динамическое заполнение списка

Поле ввода (TEXT)

Свойства:

name - Имя объекта.
defaultValue - Начальное содержимое поля.
value - Текущее содержимое поля.

Методы:

focus( ) - Передает полю фокус ввода.
blur( ) - Отбирает у поля фокус ввода.
select( ) - Выделяет содержимое поля.

Пример:

	
<script>
function Complete()
{
var Elem="Фамилия: " + document.Sel1.Family.value +
"\nИмя: " + document.Sel1.Name.value +
"\nВозраст: " + document.Sel1.Age.value +
"\nТелефон: " + document.Sel1.Phone.value;
alert(Elem);
}
function CheckAge(age)
{
if(age<18)
return "18";
else
return  age;
}
</script>
</head>
<body>
<H1>Заполните анкету</H1>
<FORM NAME="Sel1">
<!-- Анкета -->
<TABLE>
<TR><TD><B>Фамилия:<B></TD>
<TD><INPUT NAME="Family" SIZE=20
onBlur="this.value=this.value.toUpperCase()"></TD></TR>
<TR><TD><B>Имя:<B></TD>
<TD><INPUT NAME="Name" SIZE=20
onBlur="this.value=this.value.toUpperCase()"></TD></TR>
<TR><TD><B>Возраст:<B></TD>
<TD><INPUT NAME="Age" SIZE=3 VALUE="18"
onBlur="this.value=CheckAge(this.value)"
onFocus="this.select()"></TD></TR>
<TR><TD><B>Телефон:<B></TD>
<TD><INPUT NAME="Phone" SIZE=10></TD></TR>
</TABLE>
<!-- Кнопки готовности и сброса -->
<INPUT TYPE="button" VALUE="Готово" onClick="Complete();">
<INPUT TYPE="reset" VALUE="Сброс">
	</FORM>

Заполните анкету

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

Текстовая область (TEXTAREA)

Свойства:

name - Имя объекта.
defaultValue - Начальное содержимое области.
value - Текущее содержимое области.

Методы:

focus( ) - Передает области фокус ввода.
blur( ) - Отбирает у области фокус ввода.
select( ) - Выделяет содержимое области.

Пример:

<script>
var OK="Тетя Эльза чувствует себя хорошо.\nЮстас.";
var Problem="Тетя Эльза заболела.\nЮстас.";
function getDate()
{
var today=new Date();
return today.toLocaleString()+"\n";
}
function CheckRadio(form,value)
{
if(value=="Good")
form.Letter.value=getDate()+OK;
else
form.Letter.value=getDate()+Problem;
}
</script>

<H1>Отправьте телеграмму</H1>
<FORM NAME="Sel2">
<label><INPUT TYPE="radio" NAME="Code" VALUE="Good"
onClick="if(this.checked) CheckRadio(this.form,this.value);"> Явка в норме
</label>
<BR>
<label><INPUT TYPE="radio" NAME="Code" VALUE="Bad"
onClick="if(this.checked) CheckRadio(this.form,this.value);"> Явка провалена
</label>
<TEXTAREA NAME="Letter" ROWS=3 COLS=35>
</TEXTAREA>
<INPUT TYPE="button" VALUE="Готово" onClick="alert(document.Sel2.Letter.value);">
<INPUT TYPE="reset" VALUE="Сброс">
</FORM>

Отправьте телеграмму

Для установки курсора в определенное место textarea-области используйте следующую кросбраузерную функцию:

	
<form>
<textarea id="textArea">Это тестовая область</textarea>
<input type="button" onclick="setCaretPosition('textArea', 5);" value="Установить курсор">
</form>
<script>
function setCaretPosition(o, pos) {
o=document.getElementById(o);
if(o.setSelectionRange) {
o.focus();
o.setSelectionRange(pos,pos);
}else if (o.createTextRange) { // IE
var range = o.createTextRange();
range.collapse(true);
range.moveEnd('character', pos);
range.moveStart('character', pos);
range.select();
}
}
</script>

Поле ввода пароля (PASSWORD)

Свойства:

name - Имя объекта.
defaultValue - Начальное содержимое поля.
value - Текущее содержимое поля.

Методы:

focus( ) - Передает полю фокус ввода.
blur( ) - Отбирает у поля фокус ввода.
select( ) - Выделяет содержимое поля.

Пример:

<script>
function Complete1()
{
if(document.Sel3.Pwd.value==document.Sel3.Pwd1.value)
alert("Вас зарегистрировали\nID="+document.Sel3.Id.value+"\nPassword="+document.Sel3.Pwd.value);
else
alert("Ошибка при вводе пароля\nПопробуйте еще раз");
}
</script>

<H1>Регистрация</H1>
<FORM NAME="Sel3">
<TABLE>
<TR><TD><B>Идентификатор:<B></TD>
<TD><INPUT NAME="Id" SIZE=20
onBlur="this.value=this.value.toUpperCase()"></TD></TR>
<TR><TD><B>Пароль:<B></TD>
<TD><INPUT TYPE="password" NAME="Pwd" SIZE=20
onFocus="this.select();"></TD></TR>
<TR><TD><B>Проверка пароля:<B></TD>
<TD><INPUT TYPE="password" NAME="Pwd1" SIZE=20
onFocus="this.select();"></TD></TR>
</TABLE>
<INPUT TYPE="button" VALUE="Готово" onClick="Complete1();">
<INPUT TYPE="reset" VALUE="Сброс">
</FORM>

Фамилия:
Имя:
Возраст:
Телефон:

Идентификатор:
Пароль:
Проверка пароля: