Существует несколько ключевых элементов форм и ряд связанных с ними атрибутов, которые необходимо знать для создания форм.
§ <FORM>…</FORM> - дескрипторы, открывающие и закрывающие форму. Форма может иметь несколько атрибутов. Основные из них - action, который в качестве значения принимает URL для передачи на узел информации из формы, и method, принимающий значения get и post. Эти значения определяют способ передачи данных на узел.
§ <INPUT> - дескриптор создания управляющих элементов. С этим дескриптором могут использоваться следующие атрибуты:
· type = “x” – определяет элемент управления (см. «Управляющие элементы»);
· name = “x” – имя элемента управления;
· value = “x” – значение элемента управления;
· size = ”x” – ширина поля элемента управления в пикселях; для элементов text и password ширину поля определяют в символах;
· maxlength = “x” – предельное количество символов, которое принимает элемент управления;
· checked = “x” – отмеченный флажок (переключатель);
· src = “x” – указатель на рисунок, используемый в качестве графической кнопки.
§ <TEXTAREA>…</TEXTAREA> - создает текстовую область. Принимает атрибуты name = “x”, rows = “x” – определяет количество строк области, cols = “x” – определяет ширину области.
§ <SELECT>…</SELECT> - этот элемент создает меню. Меню может быть выпадающим или представленным в виде списка.
§ <OPTION>…</OPTION> - определяет каждый элемент списка меню в отдельности.
Управляющие элементы
Экранные управляющие элементы определяют способ ввода информации. Синтаксически элементы представляют собой значение атрибута type дескриптора <INPUT>.
Далее перечислены управляющие элементы.
§ text – поле ввода текста, состоящее из одной строки. Ширину поля определяет значение size.
§ password – поле, подобное полю ввода текста text. Отличие в том, что вводимые символы отображаются в виде символов *.
§ checkbox – флажок, принимающий два логических значения.
§ radio – переключатель. В отличие от флажка, из нескольких переключателей может быть выбран лишь один.
§ submit – кнопка, нажатие которой означает подтверждение выбора.
§ reset – кнопка, нажатие которой означает сброс текущих значений элементов управления и установку значений по умолчанию.
§ file – позволяет создать кнопку вызова диалогового окна выбора файла.
§ hidden – скрытый элемент управления, обычно используется для автоматического ввода дополнительных донных для передачи Web-узлу.
§ image – элемент, позволяющий вставить изображение и использовать его для подтверждения выбора или сброса вместо кнопок submit и reset.
§ button – кнопка. Для работы кнопке требуются связанные с ней сценарии.
Пример построения формы:
<form method=GET action="glow.html">
<b> Введите Ваше имя: </b>
<input type="text" name="name" value="" size=20><BR><BR>
<b>Введите ваш контактный телефон:</b>
<input type="text" name="phone" value="" size=20 ><BR><BR>
<b>Возраст:</b><BR>
18-25 <input type="checkbox" name="18-25" ><BR>
25-40 <input type="checkbox" name="25-40" ><BR><br>
<b> Пол:</b><BR>
<input type="radio" name="button" value="мужской" >Мужской<BR>
<input type="radio" name="button" value="женский" checked>Женский<BR><br>
<b>Город:</b>
<select name="sity" >
<option value="Лондон" selected>Лондон
<option value="Москва">Москва
<option value="Париж">Париж
</select><BR><BR>
<p style="position:absolute; top:250; left:250; "><b >Город:</b></p>
<select name="sity" size=3 style="position:absolute; top:250; left:300; ">
<option value="Лондон" selected>Лондон
<option value="Москва">Москва
<option value="Париж">Париж
</select><BR><BR>
<b>Дополнительные сведения о себе:</b>
<textarea rows=4 cols=40>
</textarea><BR><BR>
<input type="submit" name="Vvod" value="Ввод">
     
<input type="reset" value="Отмена">
 
<input type="button" name="Pusk" value="Пуск">
     
<input type="image" src="cherpah.jpg" width=50 value=submit alt="OK">
     
<button nane="submite" value="submite" type="submite">OK<img src="cherpah.jpg" width=50 alt="GO"></button>
</form>