6.3. Примеры HTML-форм

В данном пункте рассмотрим примеры использования HTML-форм, часто встречающихся на страницах сайтах. В качестве первого примера рассмотрим форму регистрации пользователя на сайте (рис. 6.4).

Рис. 6.4. Пример формы регистрации пользователя

HTML-разметка данной формы имеет вид:

<form action="register.php" method="post">
 
<table border=0>
<tr>
     <td>Ф.И.О.</td>
     <td><input type="text" name="fio" size=20 /></td>
</tr>
<tr>
     <td>E-mail</td>
     <td><input type="text" name="email" /></td>
</tr>
<tr>
     <td>Пароль</td>
     <td><input type="password" name="password" /></td>
</tr>
<tr>
     <td>Повтор пароля</td>
     <td><input type="password" name="confirm" /></td>
</tr>
</table>
 
<p><input type="checkbox" name="agree">Я принимаю пользовательское соглашение
<p><input type="submit" value="Зарегистрироваться" />
 
</form>

Обратите внимание, что для работы данной формы необходимо создать скрипт register.php на сервере, к которому будет отправлен POST-запрос. На стороне скрипта введенные данные будут доступны по именам, указанных в атрибутах name соответствующих полей формы.

Во втором примере рассмотрим форму обратной связи пользователя с подразделениями сайта (рис. 6.5).

Рис. 6.5. Вид формы обратной связи

HTML-разметка формы:

<form action="support.php" method="post">
 
<p>Ф.И.О. <input type="text" name="fio" />
<p><select name="type">
<option value="1">Администрации сайта</option>
<option value="2" selected>Службе поддержки сайта</option>
<option value="3">Не определено</option>
</select>
 
<p><textarea cols=80 rows=10 name="message"></textarea>
 
<p><input type="submit" value="Отправить" />
 
</form>

Для формы обратной связи лучше использовать POST-запрос, т.к. размер текста в поле textarea может быть большим и GET-запрос отбросит часть информации. Кроме того, поле textarea может содержать символы, не допустимые в GET-запросе.

В списке тега <select> по умолчанию выбирается второй элемент. Это достигается с помощью атрибута selected тега <option>.

Последним примером рассмотрим форму добавления комментария на странице сайта (рис. 6.6).

Рис. 6.6. Форма добавления комментариев на странице сайта

<h2>Комментарии</h2>
<ul>
<li><b>Сергей</b> Первый комментарий
<li><b>Алексей</b> Второй комментарий
</ul>
 
<hr>
 
<form action="comments.php" method="post">
<p>Ф.И.О. <input type="text" name="fio" />
<input type="hidden" name="id" value="10" />
<p><textarea cols=80 rows=10 name="comment"></textarea>
<p><input type="submit" value="Отправить" />
</form>

В приведенной форме используется скрытое поле <input type="hidden">, которое не отображается на экране, но передает скрипту информацию, в частности значение 10 идентификатора id. Данный идентификатор может быть использован для определения страницы сайта, к которой следует добавлять комментарий. Благодаря такому подходу можно создать универсальный скрипт comments.php, который будет «знать» в какой раздел добавлять комментарий. Все что нужно сделать – это разместить скрытое поле с нужным значением id.