Site icon Vavik96

Создание форм HTML

admin

Формы представляют собой наиболее важные интерактивные элементы HTML,
позволяющие разработчикам страниц интерактивно взаимодействовать с посетителями.
С их помощью пользователь может возвращать коментарии по поводу посещения
определенного узла, пересылать запросы или регистрироваться. Разработчик задает
вопросы, создавая форму, а пользователь отвечает на них заполняя её. Содержимое
формы либо передаётся сценарию CGI, либо по электронной почте посылается
получателю. Сам процесс создания формы состоит из двух этапов. Первый
заключается в создании самой формы, а второй заключает в себе создание на
сервере сценария CGI. Форма создается при помощи различных тэгов и
атрибутов, заключенных в пару <FORM></FORM>:

Элемент<FORM>.

Элемент <FORM> является необходимым условием для всех форм. Он
может иметь следующие атрибуты:

Синтаксис формы для сценария: <FORM method=”get” или
“post” action=”URL сценария”

</FORM>
Синтаксис формы для почты:<FORM
method=”get” или “post” action=”mailto:адрес”
</FORM>

Подробнее:

Синтаксис:

<FORM
action=”mailto:имя@домен.ru?subject=”Comment
from Home Page” method=”post” enctype=”text/plain”>
<br>
Комментарии:<br>
<TEXTAREA type=”text”
NAME=”комментарий” ROWS=5
COLS=50></TEXTAREA>
<br>
Имя: <br>
<INPUT type=”text”
NAME=”имя” SIZE=”57“>
<br>
E-mail: <br>
<INPUT type=”text”
name=”e-mail” size=”52”
maxlength=”360“> <br>
<INPUT type=”reset”
VALUE=Сброс >
<INPUT type=SUBMIT
VALUE=Послать>
</FORM>

Пример:

Комментарии:

Имя:
E-mail:

Элемент <INPUT>.

Элемент <INPUT> является базовым для всех элементов формы. Он
используется для внедрения в форму кнопок, графических изображений, флажков,
переключателей, паролей и текстовых полей. Несмотря на внешние отличия форм все
они пересылают сценарию CGI данные ввиде пар имя:значение. Элемент
может иметь восемь атрибутов обозначаемые как type:

Элемент <TEXTAREA>.

Элемент <TEXTAREA> При помощи этого элемента создается область
для ввода и прoсмотра текста. Может использоваться и не в составе формы, а как
самостоятельные детали страницы. Область ввода помогает сэкономить место
благодаря полосам прокрутки. Может иметь атрибуты:

Синтаксис:

<FORM><H3>Введи
текст
<TEXTAREA name=”ключевое слово”
rows=5 cols=30>Область для ввода
текста
</TEXTAREA></H3>
<INPUT type=”reset”
value=”очистка“></FORM>

Пример:


Элемент <SELECT>.

Элемент <SELECT> может принимать форму раскрывающегося списка
или меню элементов. Имеет вложенный тэг <OPTION> и атрибуты:

Элемент <OPTIONS>.

Элемент же <OPTIONS> задает возможные варианты выбора меню
<SELECT>
Синтаксис: <OPTION
value=”n” selected>значение
имеет
атрибуты:

Пример:

<H3>Выбери нужное</H3>
<SELECT
multiple>
<OPTION
value=a>Первый</OPTION>
<OPTION
value=b>Второй</OPTION>
<OPTION
value=c>Третий</OPTION>
<OPTION
value=d>Четвертый</OPTION>
</SELECT>

 

Выбери нужное

 

Пример:

<SELECT size=1>
<OPTION selected
value=1>Выберите:</OPTION>
<OPTION value=2>
Первый</OPTION>
<OPTION value=3>
Второй</OPTION>
<OPTION
value=4>Третий</OPTION>
<OPTION value=5>
Четвертый</OPTION>
</SELECT>


Элемент <OPTGROUP>.

Элемент <OPTGROUP> применяется для логической группировки
элементов <OPTION> внутри тэга <SELECT> имеет атрибут
label:

Синтаксис:

<SELECT size=1>
<OPTGROUP label=”Первая
группа“>
<OPTION selected
value=1>Выберите:</OPTION>
<OPTION value=2>
Первый</OPTION>
<OPTION value=3>
Второй</OPTION>
</OPTGROUP>
<OPTGROUP
label=”Вторая группа“>
<OPTION
value=4>Третий</OPTION>
<OPTION value=5>
Четвертый</OPTION>
</OPTGROUP>
</SELECT>

Элемент <ISINDEX>.

Элемент <ISINDEX>Это самый простой элемент, позволяющий создать
подобие формы и ввода строки, содержащей текст и генерации запроса.

Пример: <ISINDEX prompt=”Cтрока для ввода критерия
поиска“> Допустим что на текущей странице задан базовый
URL при помощи элемента
<BASE href=”URL поискового средства в
Internet”> тогда, если пользователь введет в поле ключевые слова для
поиска слово1,слово2,слово3, то броузер сформирует и отошлет запрос для
поисковой машины сервера в
виде:
http://www.название.домен/?слово1+слово2+слово3 Если поисковая
программа сервера поддерживает стандартный синтаксис запроса с использованием
знаков ? и +,поиск будет осуществлен.

Строка для ввода критерия поиска

Элемент <BUTTON>.

Элемент <BUTTON> является альтернативой элементу
<INPUT> с более богатыми возможностями – например с заданием
альтернативного текста.
Синтаксис: <BUTTON

<IMG src=…> </BUTTON>

Пример:
<BUTTON name=”submit”
type=”submit“>отправить</BUTTON

 

Элемент <LABEL>.

Элемент <LABEL> применяется для альтернативного задания
информации для управляющих полей формы. Поддерживает атрибут for, который
связывает элемент <LABEL> с другим элементом формы, а значение
атрибута for должно совпадать со значением атрибута id связанного
управляющего элемента.

Пример:

<FORM action=”URL”
method=”post“>
<TABLE>
<TR>
<TD><LABEL
for=”fname“>Имя</LABEL>
<TD><INPUT
type=”text” name=”firstname”
id=”fname“>
<TR>
<TD><LABEL
for=”lname“>Фамилия</LABEL>
<TD><INPUT
type=”text” name=”lastname”
id=”lname“>
</TABLE>
</FORM>

 

 

Пример:

<FORM action=”URL”
method=”post“>
<LABEL
for=”firstname“>Имя:
</LABEL>
<INPUT type=”text”
id=”firstname“><BR>
<LABEL
for=”lastname“>Фамилия:
</LABEL>
<INPUT type=”text”
id=”lastname“><BR>
<LABEL
for=”email“>e-mail:
</LABEL>
<INPUT type=”text”
id=”email“><BR>
<INPUT
type=”radio” name=”sex”
value=”Мужской“>Мужской<BR>
<INPUT
type=”radio” name=”sex”
value=”Женский“>Женский<BR>
<INPUT
type=”submit” value=”Отправить“> <INPUT
type=”reset“>
</FORM>



Мужской
Женский

Элемент <FIELDSET>.

Элемент <FIELDSET> позволяет логически группировать
элементы формы.
Синтаксис: <FIELDSET>
имя</FIELDSET>

Элемент <LEGEND>.

Элемент <LEGEND> позволяет давать наименования логическим
группам элементов формы.
Синтаксис: <LEGEND>
имя</LEGEND>

 

Пример:

<FORM>
<FIELDSET>
<LEGEND>Группа
1</LEGEND>
<INPUT type=”text”
id=”name1“><BR>
<INPUT
type=”text”
id=”name2“><BR>
</FIELDSET>
<FIELDSET>
<LEGEND>Группа
2</LEGEND>
<INPUT type=”text”
id=”name3“><BR>
<INPUT
type=”text”
id=”name4“><BR>
</FIELDSET>
</FORM>

 

Группа 1


Группа 2


Exit mobile version