Регистрация нового пользователя
</body> </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="nik" 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> |
