Формы предназначены для пересылки данных от пользователя к веб-серверу. О том, как обрабатывать эти данные на стороне сервера, изложено в разделе PHP и MySQL. А пока рассмотрим возможности HTML для создания форм.
Рассмотрим пример, использования формы для регистрации сайта в каталоге ресурсов Интернета.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Использование форм</title>
</head>
<body>
<h2>Пример формы регистрации сайта</h2>
<form action="file.php" method="post" enctype="multipart/form-data">
<table width="470" border="0" cellspacing="0" cellpadding="2">
<tr>
<td width="205">Логин:</td>
<td><input name="pole1" type="text" size="30"></td>
</tr>
<tr>
<td>Пароль:</td>
<td><input name="pole2" type="password" value="Пароль" size="30"></td>
</tr>
<tr>
<td>URL-адрес сайта:</td>
<td><input name="pole3" type="text" value="http://sevidi.ru" size="30"></td>
</tr>
<tr>
<td>Название сайта:</td>
<td><input name="pole4" type="text" size="30"></td>
</tr>
<tr>
<td valign="top">Описание сайта:</td>
<td><textarea name="pole5" cols="40" rows="10"></textarea></td>
</tr>
<tr>
<td>Тема сайта:</td>
<td>
<select name="pole6">
<option value="0">Тема не выбрана</option>
<option value="1">Тема 1</option>
<option value="2">Тема 2</option>
<option value="3">Тема 3</option>
</select>
</td>
</tr>
<tr>
<td colspan="2" bgcolor="#0000FF"><font size="5" color="#FFFFFF">Баннер</font></td>
</tr>
<tr>
<td></td>
<td><input name="pole7" type="file" size="30"></td>
</tr>
<tr>
<td> </td>
<td>
<input type="reset" value="Очистить">
<input type="submit" value="Отправить">
</td>
</tr>
</table>
</form>
</body>
</html>
В окне веб-браузера это будет выглядеть ТАК.
В итоге в окне веб-браузера будет отображена форма, состоящая из пяти текстовых полей (Логин, Пароль, URL-адрес сайта, Название сайта и Описание сайта), списка значений (Тема сайта), поля выбора файла с кнопкой Обзор, а также двух кнопок Очистить и Отправить.
Кнопка Очистить возвращает все значения формы к первоначальным, Кнопка отправить позволяет отправить данные, введенные пользователем, программе (URL-адрес которой указан в параметре action тега <form>, в данном случае file.php) расположенной на веб-сервере. Программа обработает данные и либо добавит сайт в каталог и выдаст подтверждение об успешной регистрации, либо выдаст сообщение об ошибке, если обязательное поле не заполнено или заполнено неправильно. В нашем случае программы обработки нет, и отправка данных ни к чему не приведет, точнее приведет к ошибке "Не удается найти веб-страницу".
Структура документа с формами
Форма добавляется в HTML-документ при помощи парного тега form. Внутри тегов form и /form могут располагаться теги input, textarea и select, вставляющие в форму элементы управления:
<form>
<input type="text">
<textarea></textarea>
<select>
<option>
</select>
<input type="file">
<input type="reset">
<input type="submit">
</form>
Рассмотрим их подробнее.
Добавление формы в документ
Парный тег