Если у вас возникли сложности с курсовой, контрольной, дипломной, рефератом, отчетом по практике, научно-исследовательской и любой другой работой - мы готовы помочь.
Предоплата всего
Подписываем
Формы дают возможность пользователям вводить информацию. Вам наверно, не раз встречались всевозможные тесты, опросы, голосования. Для того, чтобы все это сделать на своих web-страницах и нужны формы.
Здесь следует заметить, что html-формы сами по себе только позволяют вводить информацию, а вот обрабатывать ее HTML не умеет (это все-таки язык разметки, а не программирования). Для обработки информации используются такие языки, как javascript, php и другие.
Но всему свое время, пока мы научимся добавлять html-формы на свои страницы, а обрабатывать информацию из них будем учиться в других уроках, посвященных, например, javascript.
Итак, в html форма задается тегами <form></form>. Все остальные элементы формы располагаются между этими тегами.
У тега <form> есть несколько параметров:
На данном этапе можете не очень вникать в эти параметры, их назначение станет очевидным при изучении языков обработки данных. А пока запомните, что все элементы формы располагаются между тегами <form></form>:
<form name="forma1">
</form>
Текстовое поле
Простое однострочное текстовое поле, в которое можно вводить и редактировать текст. Задается тегом <input>
<form name="forma1">
<input type="text" name="text1" size="20"
maxlength="50" value="Введите текст">
</form>
Результат:
Параметры:
Возможны еще два параметра:
Пример:
<form name="forma1">
<input type="text" name="text1" size="20"
maxlength="50" value="неактивное поле" disabled>
<input type="text" name="text1" size="20"
maxlength="50" value="только для чтения" readonly>
</form>
Результат:
Текстовое поле для ввода пароля
Это такое же текстовое поле, как и предыдущий элемент. Разница только в том, что вводимый текст не отображается, вместо него появляются специальные символы, например звездочки. Чаще всего используется при вводе паролей. Все параметры такие же, как у простого текстового поля, кроме параметра type="password".
Пример:
<form name="forma1">
Введите пароль:<br>
<input type="password" name="text1" size="20"
maxlength="50">
</form>
Результат:
Введите пароль:
Попробуйте ввести что-нибудь в этом поле.
Флажки
Вы, конечно, встречали подобный элемент:
Какими языками вы владеете:
английский немецкий испанский французский
Он задается все тем же тегом <input>, причем один тег задает один флажок. Нужно четыре флажка, придется четыре раза писать input.
Пример:
<form name="forma1">
Какими языками вы владеете:<br>
<input type="checkbox" name="lan1" value="english"
checked>английский
<input type="checkbox" name="lan2" value="german">
немецкий
<input type="checkbox" name="lan3" value="spanish">
испанский
<input type="checkbox" name="lan4" value="french">
французский
</form>
Рассмотрим его параметры:
Переключатели
В отличии от флажков, можно выбрать только один пункт. В связи с этим значения параметра name должны быть одинаковы для всех элементов группы. Параметр type="radio", все остальные такие же, как у флажков.
Пример:
<form name="forma1">
Укажите ваш пол:<br>
<input type="radio" name="sex" value="man"
checked>мужской
<input type="radio" name="sex" value="woman">
женский
</form>
Результат:
Укажите ваш пол:
мужской женский
Кнопки
Существует четыре вида кнопок:
Если на форме несколько кнопок, то они должны иметь разные названия.
Пример кода:
<form name="forma1">
<input type="submit" name="submit" value="Отправить">
<input type="image" name="but_img" src="../files/194/but.gif">
<input type="reset" name="reset" value="Очистить">
<input type="button" name="button" value="Отправить">
</form>
Результат:
Кнопки можно задавать и по другому, при помощи тегов <button> </button>. Возможности у таких кнопок несколько шире, они могут иметь содержимое в виде текста или картинки. Этот тег имеет следующие параметры:
Пример кода:
<form name="forma1">
<button name="submit" type="submit">
<img src="../files/194/mail.gif" align="absmiddle">
<font size="4"> Отправить </font>
</button>
</form>
Результат:
Отправить
Поле для файлов
Поле для ввода имени файла, сопровождаемое кнопкой Browse (Обзор), при щелчке по которой открывается окно просмотра дерева папок компьютера, где можно выбрать нужный файл. Выбранный файл присоединяется к содержимому формы при отправке на сервер.
Пример:
<form name="forma1">
<input type="file" name="load" size="50">
</form>
Результат:
Многострочное текстовое поле
Для объемных текстов, например для почтовых сообщений, удобно использовать именно этот элемент. Он создается тегами <textarea> </textarea> и имеет следующие параметры:
Пример:
<form name="forma1">
<textarea cols="20" rows="3" wrap="off"></textarea><br>
<textarea cols="35" rows="5" wrap="virtual"></textarea><br>
<textarea cols="50" rows="7" wrap="physical"></textarea>
</form>
Результат:
Попробуйте ввести текст и посмотрите на разницу в значениях параметра wrap.
Раскрывающиеся списки
Списки бывают с возможностью выбора одного элемента и с множественным выбором. Задются и те, и другие с помощью тегов <select> </select>, внутри которых располагаются элементы значений, заданных тегом <option>. Рассмотрим параметры этих тегов:
Пример:
<form name="forma1">
Какой язык вы хотите изучать:
<select name="language" size="1">
<option selected value="html">html
<option value="php">php
<option value="java">java
</select><br><br>
Какое время вы готовы на это потратить:<br>
<select name="time" size="3">
<option selected value="1">1 месяц
<option value="2">2 месяца
<option value="3">3 месяца
</select><br><br>
Какие дни недели для занятий вас устроят:<br>
(выбирайте с нажатой клавишей ctrl)<br>
<select name="day" size="7" multiple>
<option selected value="mon">понедельник
<option value="tue">вторник
<option value="wen">среда
<option selected value="thu">четверг
<option value="fri">пятница
<option value="sat">суббота
<option value="san">воскресенье
</select>
</form>
Результат:
Какой язык вы хотите изучать:
Какое время вы готовы на это потратить:
Какие дни недели для занятий вас устроят:
(выбирайте с нажатой клавишей ctrl)
Существуют еще теги <optgroup> </optgroup>, позволяющие группировать элементы списка по каким-либо признакам. Например, мы хотим задать каталог сайтов в виде списка, тогда удобнее разбить его на группы по интересам:
Каталог сайтов:
Для этого нам и нужны теги <optgroup> </optgroup> с одним параметром label, который и задает название группе элементов.
Пример кода:
<form name="forma1">
Каталог сайтов:<br>
<select name="catalog" size="9">
<optgroup label="Компьютеры">
<option value="1">интернет</option>
<option value="2">мобильники</option>
<option value="3">hardware</option>
</optgroup>
<optgroup label="Работа">
<option value="4">вакансии</option>
<option value="5">трудоустройство</option>
<option value="6">резюме</option>
</optgroup>
<optgroup label="Дом">
<option value="7">здоровье</option>
<option value="8">красота</option>
<option value="9">дети</option>
</optgroup>
</select>
</form>
Обратите внимание, в данном случае необходимо указывать закрывающие теги </option>.
Надписи
Все элементы формы можно связать с их надписями при помощи элемента <label> и его параметра for, значением которого является имя элемента, с которым связываем надпись. Например:
<form name="forma1">
<label for="load">Выбирайте файл: </label>
<input type="file" name="load" size="30">
</form>
Результат:
Выбирайте файл:
Стоит ли его использовать решать вам. Мне кажется, что без него код короче, а результат тот же.
Обобщающий пример
<html>
<head>
<title>Заголовок документа</title>
</head>
<body>
<form name="forma1">
<table border="0" cellspacing="5" cellpadding="5">
<caption>Форма регистрации</caption>
<tr>
<td align="right" valign="top">Имя</td>
<td><input type="text" name="name" size="25"></td>
</tr>
<tr>
<td align="right" valign="top">e-mail</td>
<td><input type="text" name="e-mail" size="25"></td>
</tr>
<tr>
<td align="right" valign="top" >Пароль</td>
<td>
<input type="password" name="password" size="25">
</td>
</tr>
<tr>
<td align="right" valign="top" >Повтор пароля</td>
<td>
<input type="password" name="password2" size="25">
</td>
</tr>
<tr>
<td align="right" valign="top" >Пол</td>
<td>
<input type="radio" name="sex" value="man" checked>
мужской
<input type="radio" name="sex" value="woman">
женский
</td>
</tr>
<tr>
<td align="right" valign="top">Увлечения</td>
<td><select name="hobby" size="7" multiple>
<option selected value="1">компьютеры
<option value="2">спорт
<option value="3">игры
<option value="4">животные
<option value="5">автомобили
<option value="6">клубы
<option value="7">музыка
</select>
</td>
</tr>
<tr>
<td align="right" valign="top">Ваши пожелания</td>
<td>
<textarea cols="30" rows="3" wrap="physical">
</textarea>
</td>
</tr>
<tr>
<td align="right" colspan="2">
<input type="submit" name="submit" value="Отправить">
<input type="reset" name="reset" value="Очистить">
</td>
</tr>
</table>
</form>
</body>
</html>
Результат:
|
Форма регистрации |
|
|
Имя |
|
|
|
|
|
Пароль |
|
|
Повтор пароля |
|
|
Пол |
мужской женский |
|
Увлечения |
|
|
Ваши пожелания |
|
|
|