• type — тип элемента (для скрытых полей — hidden);

• name — имя переменной, в которой сохраняются скрытые данные;

• Value — значение, по умолчанию сохраняемое в скрытом поле.

Флажки.

Используются в ситуациях, когда пользователь выбирает один или несколько вариантов из готового набора. Задаётся при помощи атрибута type="checkbox". Синтаксис определения флажка:

<input type="checkbox" name="имя_переменной" valuе="начальное_значение">

Пример:

<HTML>

<HEAD>

<TITLE>Использование форм в HTML</TITLE>

</HEAD>

<BODY>

<FORM action= "" method= "post">

Выберите цвет^Ъ^

<input type="checkbox" name="checkbox" value = "red" >красный<br>

<input type="checkbox" name="checkbox" value = "black">чёрный<br>

<input type="checkbox" name="checkbox" value = "blue">синий<br>

<input type="checkbox" name="checkbox" value = "grey">серый<br>

<input type="checkbox" name="checkbox" value = "green" checked>зелёный<br> </FORM>

</BODY>

</HTML>

Если добавлен параметр checked, то данный флажок включен по умолчанию. Переключатели

Работают практически также, как и флажки за одним исключением — в любой момент времени в группе может быть установлен лишь один переключатель. Задаётся при помощи атрибута type="radio". Синтаксис определения переключателя:

<input type="radio" name="имя_переменной" value="начальное_значение">

Пример:

<html>

<head>

<tЫк^Использование форм в HTML</title>

</head>

<body>

<form action= "" method= "get" >

Выберите цвет:<br>

<input type="radio" name= "radio" value="red" >красный<br>

<input type="radio" name="radio" value="black">чёрный<br>

<input type="radio" name="radio" value="blue" checked>синий<br>

<input type="radio" name="radio" value="grey">серый^^

<input type="radio" name="radio"value="green"> зелёный<br>

</form>

</body>

</html>

Параметр "checked", также, как и в случае флажков, указывает переключатель, который выбран по умолчанию. Обратите внимание на то, что параметр "name" должен совпадать для всех переключателей! Это значение будет передаваться сценарию при отправке формы.

Кнопка отправки данных

Кнопка отправки данных инициирует действие, заданное атрибутом action тега <form>. Задаётся при помощи атрибута type="submit". Синтаксис приведен ниже:

<input type="submit" value="текст_на_кнопке">

Пример:

<html>

<head>

<title>Использование форм в HTML</title>

</head>

<body>

<form action= "" method= "get" >

Введите имя:

<input type="text" name="text" size="20" maxlength= "20" ><br>

Введите пароль: <input type="password" name="password" size ="20" maxlength="20"><br><br> <input type="submit" value="Отправить ">

</form>

</body>

</html>

Кнопка сброса

Кнопки сброса применяются для отмены внесенных в элементы формы данных. Задаются при помощи атрибута type="reset". Синтаксис определения:

<input type="reset" value=" текст _на_кнопке">

Кнопка сброса выглядит точно так же, как и кнопка отправки данных. Однако на них, как правило, пишут слово «Reset» ("Сброс").

Пример:

<html>

<head>

<title> Использование форм в HTML</title>

</head>

<body>

<form action= "" method= "get" >

Введите имя:

<input type="text" name="text" size="20" maxlength= "20" ><br>

Введите пароль:

<input type="password" name="password" size= "20" maxlength= "20"><br><br> <input type="reset" value="Сброс">

</form>

</body>

</html>

Кнопка передачи файла

Селекторы файлов позволяют пользователям определить файл, передаваемый с формой. Они имеют тип type="file". Можно определить атрибут accept для ограничения типов передаваемых файлов. Можно также установить атрибут value на принимаемое по умолчанию имя файла, но, разумеется, предугадать передаваемый файл невозможно.

<input type="file" name="entry" accept="image/png, image/gif">

Кнопка Обзор... (Browse) предоставляет доступ к файловой системе компьютера пользователя. После выбора нужно файла в появляющемся диалоговом окне щелчком на кнопке Открыть можно поместить полный спецификатор файла в текстовое поле.

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

Текстовая область (textarea) используется для ввода текста, который занимает более одной строки. Для задания текстовой области применяется элемент "textarea". Он включает в себя три атрибута:

• name — имя переменной, в которой сохраняются введенные данные;

• rows — количество строк в текстовой области;

• cols — количество столбцов в текстовой области.

Синтаксис в общем виде:

<textarea name="имя_переменной" rows="N" cols="N" value=""></textarea>

Обратите внимание,что элемент "textarea", в отличии от элемента "input", имеет закрывающийся тег! Между этой парой тегов записывается текст, который будет отображен в текстовой области.

Пример:

<html>

<head>

<title>Использование форм в HTML</title>

</head>

<body>

<form action= "" method= "get" >

<textarea name="textarea" rows="10" cols="40">Enter the text</textarea> </form>

</body>

</html>

Раскрывающийся список

Раскрывающиеся списки особенно удобны в ситуации, когда у вас имеется длинный перечень допустимых вариантов, из которого пользователь должен выбрать всего один. Как правило, раскрывающиеся списки применяются при работе с относительно большими наборами данных — например, при перечислении американских штатов или стран. Синтаксис определения раскрывающегося списка:

<select name="имя_переменной">

<option value="имя_переменной1"></option>

<option value-' имя_переменной2"></option>

<option value=" имя_переменнойЗ "></option>

<option value="имя_переменнойN"></option>

</select>

Элемент <select>...</select> служит для определения списка. Между парой тегов <option>...</option> - записываются сами элементы списка.

Пример:

<html>

<head>

<title> Использование форм в HTML</title>

</head>

<body>

<form action= "" method= "get" >

<P valign="top">Выберите элемент списка</Р>

• SELECT NAME= "sections">

<OPTION> Web Authoring Reference</OPTION>

<OPTION>FAQ Archives</OPTION>

<OPTION>Design Elements</OPTION>

• OPTION selected>Tools</OPTION>

<OPTION>Feature Article</OPTION>

</SELECT>

</form>

</body>

</html>

Задания: