|
Пожалуйста, уточните, кто автор курса Основы работы с HTML ? |
Инспектор
Вы можете этот курс.
Опубликован: 25.10.2006 | Уровень: для всех | Доступ: платный
Лекция 6:
Формы HTML и ввод данных
Примеры форм
Регистрация в системе
<html>
<body>
<form name="input" action="html_form_action.asp" method="post">
<table bgcolor="#9999FF">
<tr>
<th colspan="2" align="center">Регистрация в системе</th>
</tr>
<tr>
<td align="right">Имя:</td>
<td align="left"><input type="text" name="name"></td>
</tr>
<tr>
<td align="right">Пароль:</td>
<td align="left"><input type="password" name="password"></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="checkbox">Запомнить пароль</td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" value="Вход"></td>
</tr>
</table>
</form>
</body>
</html>Пример выполнения данного HTML-кода
В этом примере представлена типовая форма входа в систему авторизованного пользователя. Форма состоит из поля ввода имени, поля ввода пароля, флажка сохранения пароля и кнопки входа.
Необходимо отметить, что при работе с паролями следует использовать только метод post. При использовании метода get пароль будет передаваться для обработки в открытом виде. Для проверки этого достаточно в данном примере заменить метод post на get, запустить пример, заполнить поля (например, имя пользователя: Bill, пароль superstar ) и нажать кнопку "Вход". В этом случае в адресной строке браузера появится адрес: {ваш рабочий каталог} /html_form_action.asp?name=Bill&password=superstar.
Примечание: необходимо, чтобы в Вашем рабочем каталоге находился файл с именем "html_form_action.asp" (это может быть даже пустой файл).
Запрос документа
<html>
<body>
<form name="input" action="html_form_action.asp" method="get">
<table bgcolor="#dddddd">
<tr>
<th colspan="2" align="center">Запрос документа</th>
</tr>
<tr>
<td align="right">Тип документа:</td>
<td align="left">
<select name="do_type">
<option value="mail">Письмо
<option value="order">Приказ
<option value="message">Служебная записка
</select>
</td>
</tr>
<tr>
<td align="right">Дата регистрации с</td>
<td align="left"><input type="text" name="date_begin" size="21" value="дд.мм.гггг"></td>
</tr>
<tr>
<td align="right">по</td>
<td align="left"><input type="text" name="date_end" size="21" value="дд.мм.гггг"></td>
</tr>
<tr>
<td align="right">Регистрационный номер:</td>
<td align="left"><input type="text" name="number" size="21"></td>
</tr>
<tr>
<td colspan="2"><hr></td>
</tr>
<tr>
<td align="right" valign="top">Ключевые слова:</td>
<td align="left">
<textarea cols="17" rows="5">
</textarea>
</td>
</tr>
<tr>
<td colspan="2"><hr></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="Отправить">
<input type="reset">
</td>
</tr>
</table>
</form>
</body>
</html>Пример выполнения данного HTML-кода
Это достаточно типовая форма, содержащая поля ввода текста, текстовую область и выпадающий список. Для пояснения формата ввода в полях даты регистрации по умолчанию показан образец заполнения. Но при этом необходимо отметить, что форма не проверяет корректность введенной информации.
Регистрация нового пользователя
<html>
<body>
<form name="input" action="html_form_action.asp" method="post">
<table bgcolor="#dddddd">
<tr>
<th colspan="2" align="center">Регистрация нового пользователя</th>
</tr>
<tr>
<td colspan="2" align="center">Обязательные поля выделены красным цветом<br><br></td>
</tr>
<tr>
<td align="right"><font color="red">Ник (псевдоним):</td>
<td align="left"><input type="text" name="nick" size="27"></td>
</tr>
<tr>
<td align="right"><font color="red">E-mail</td>
<td align="left"><input type="text" name="e_mail" size="27"></td>
</tr>
<tr>
<td align="right"><font color="red">Пароль (не менее 6 сим.):</td>
<td align="left"><input type="password" name="password" size="27"></td>
</tr>
<tr>
<td align="right"><font color="red">Подтвердите пароль:</td>
<td align="left"><input type="password" name="f_password" size="27"></td>
</tr>
<tr>
<td colspan="2"><hr></td>
</tr>
<tr>
<td align="right">Фамилия</td>
<td align="left"><input type="text" name="name_f" size="27"></td>
</tr>
<tr>
<td align="right">Имя</td>
<td align="left"><input type="text" name="name_i" size="27"></td>
</tr>
<tr>
<td align="right">Отчество</td>
<td align="left"><input type="text" name="name_o" size="27"></td>
</tr>
<tr>
<td align="right">Дата рождения:</td>
<td align="left">
<select name="day">
<option>1
<option>2
<option>3
<option>4
<option>5
<option>6
<option>7
<option>8
<option>9
<option>10
<option>11
<option>12
<option>13
<option>14
<option>15
<option>16
<option>17
<option>18
<option>19
<option>20
<option>21
<option>22
<option>23
<option>24
<option>25
<option>26
<option>27
<option>28
<option>29
<option>30
<option>31
</select>
<select name="month">
<option>января
<option>февраля
<option>марта
<option>апреля
<option>мая
<option>июня
<option>июля
<option>августа
<option>сентября
<option>октября
<option>ноября
<option>декабря
</select>
<select name="year">
<option>1980
<option>1981
<option>1982
<option>1983
<option>1984
<option>1985
<option>1986
<option>1987
<option>1988
<option>1989
<option>1990
</select>
</td>
</tr>
<tr>
<td align="right">Пол:</td>
<td align="left">
<input type="radio" name="sex" value="male">Мужской
<input type="radio" name="sex" value="female">Женский
</td>
</tr>
<tr>
<td align="right">Город проживания:</td>
<td align="left"><input type="text" name="state" size="27"></td>
</tr>
<tr>
<td align="right" valign="top">Образование:</td>
<td align="left">
<input type="radio" name="edu" value="h">Высшее<br>
<input type="radio" name="edu" value="hh">Незаконченное высшее<br>
<input type="radio" name="edu" value="ss">Среднее специальное<br>
<input type="radio" name="edu" value="s">Среднее
</td>
</tr>
<tr>
<td colspan="2"><hr></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="Зарегистрироваться">
<input type="reset" value="Очистить форму">
</td>
</tr>
</table>
</form>
</body>
</html>Пример выполнения данного HTML-кода
В данном примере представлена форма регистрации нового пользователя. Отличительной особенностью данной формы является организация ввода даты рождения, построенная с использованием трех выпадающих списков. Хотя реализация такого ввода дат на первый взгляд более трудоемка в процессе создания Web-страницы (для сравнения, в предыдущем примере для организации поля ввода даты потребовалась всего одна строка), но она оправдывает себя за счет сведения к минимуму ошибок при вводе информации. Такая схема организации ввода широко используется при вводе и других данных, таких как, например, страна и город проживания (в данном примере не реализовано).
Следует обратить внимание и на присутствие в форме двух групп переключателей, которые отвечают за ввод пола и образования пользователя.
| Тег | Описание | |
|---|---|---|
| <form> | Определяет форму для ввода пользователя | |
| <input> | Определяет поле ввода | |
| <textarea> | Определяет текстовую область (элемент управления для ввода многострочного текста) | |
| <label> | Определяет метку для элемента управления | |
| <fieldset> | Определяет набор полей | |
| <legend> | Определяет заглавие для набора полей | |
| <select> | Определяет список выбора (раскрывающееся поле) | |
| <optgroup> | Определяет группу вариантов выбора | |
| <option> | Определяет вариант в раскрывающемся поле | |
| <button> | Определяет кнопку | |
| <isindex> | Не рекомендуется. Используйте вместо этого <input> |
