HTML формы

Формы дают возможность пользователям вводить информацию. Вам наверно, не раз встречались всевозможные тесты, опросы, голосования. Для того, чтобы все это сделать на своих web-страницах и нужны формы.

Здесь следует заметить, что html-формы сами по себе только позволяют вводить информацию, а вот обрабатывать ее HTML не умеет (это все-таки язык разметки, а не программирования). Для обработки информации используются такие языки, как javascript, php и другие.

Но всему свое время, пока мы научимся добавлять html-формы на свои страницы, а обрабатывать информацию из них будем учиться в других уроках, посвященных, например, javascript.

Итак, в html форма задается тегами <form></form>. Все остальные элементы формы располагаются между этими тегами.

У тега <form> есть несколько параметров:

name - имя формы. Необходимо, если на странице несколько форм
action - определяет URL-адрес, по которому будет отправлена информация введеная пользователем
method - определяет способ отправки информации
target - указывает имя окна, в котором будут отображаться результаты обработки отправленной формы

На данном этапе можете не очень вникать в эти параметры, их назначение станет очевидным при изучении языков обработки данных. А пока запомните, что все элементы формы располагаются между тегами <form></form>:

Текстовое поле

Простое однострочное текстовое поле, в которое можно вводить и редактировать текст. Задается тегом <input>

<input type="text" name="text1" size="20"

maxlength="50" value="Введите текст">

</form>

Результат:

Параметры:

name - имя элемента,
type - тип элемента (в данном случае - text),
size - размер текстового поля в символах, которые одновременно будут видны, при вводе большего количества символов, они будут прокручиваться,
maxlength - максимальное количество символов, которое можно ввести в поле, если опустить этот параметр, то число символов будет неограниченным,
value - текст, который будет отображаться (его можно стереть), при отсутствии этого параметра поле будет пустым.

Возможны еще два параметра:

disabled - блокирует поле от любых изменений,
readonly - делает поле доступным только для чтения.

Пример:

<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".

Пример:

Введите пароль:<br>

<input type="password" name="text1" size="20"

maxlength="50">

</form>

Результат:

Попробуйте ввести что-нибудь в этом поле.

Флажки

Вы, конечно, встречали подобный элемент:

Он задается все тем же тегом <input>, причем один тег задает один флажок. Нужно четыре флажка, придется четыре раза писать input.

Пример:

Какими языками вы владеете:<br>

<input type="checkbox" name="lan1" value="english"

checked>английский

немецкий

испанский

французский

</form>

Рассмотрим его параметры:

type - тип элемента (в данном случае - checkbox),
name - имя элемента, указывает программе обработчику формы, какой пункт выбрал пользователь,
value - значение элемента, указывает программе обработчику формы значение пункта, который выбрал пользователь. В нашем примере выбран пункт английский, следовательно, программа-обработчик получит: lan1="english",
checked - им обычно помечают наиболее вероятные для выбора пункты, пользователь щелчком мыши может выбрать другие пункты.

Переключатели

В отличии от флажков, можно выбрать только один пункт. В связи с этим значения параметра name должны быть одинаковы для всех элементов группы. Параметр type="radio", все остальные такие же, как у флажков.

Пример:
<form name="forma1">
            Укажите ваш пол:<br>
<input type="radio" name="sex" value="man" checked>
                                                                                 мужской
           <input type="radio" name="sex" value="woman">
   женский
</form>

Результат:

Кнопки

Существует четыре вида кнопок:

submit - кнопка отправки содержимого формы web-серверу. Ее параметры:
- type="submit" - тип кнопки,
- name - имя кнопки,
- value - надпись на кнопке.
image - графическая кнопка отправки содержимого формы web-серверу. Для ее использования необходимо подготовить картинку кнопки, а потом использовать ее в виде кнопки. Ее параметры:
- type="image" - тип графической кнопки,
- name - имя кнопки,
- src - адрес картинки для кнопки.
reset - кнопка, позволяющая восстановить все значения по умолчанию в форме. Ее параметры:
- type="reset" - тип кнопки очищения,
- name - имя кнопки,
- value - надпись на кнопке.
button - произвольная кнопка, ее действия назначаются вами, т.е. сама она делать ничего не умеет. Ее параметры:
- type="button" - тип произвольной кнопки,
- name - имя кнопки,
- value - надпись на кнопке.
- onclick - указывает, что делать при щелчке по кнопке. Вообще, у этого типа кнопок есть и другие события (например, двойной щелчок), но здесь мы не будем их рассматривать.

Если на форме несколько кнопок, то они должны иметь разные названия.

Пример кода:

</form>

Результат:

Кнопки можно задавать и по другому, при помощи тегов <button> </button>. Возможности у таких кнопок несколько шире, они могут иметь содержимое в виде текста или картинки. Этот тег имеет следующие параметры:

type - тип кнопки, может принимать значения:
- reset - кнопка очистки формы,
- submit - кнопка отправки данных,
- button - кнопка произвольного действия.
name - имя кнопки,
value - надпись на кнопке.

Пример кода:

<font size="4"> Отправить </font>

</button>

</form>

Результат:

Поле для файлов

Поле для ввода имени файла, сопровождаемое кнопкой Browse (Обзор), при щелчке по которой открывается окно просмотра дерева папок компьютера, где можно выбрать нужный файл. Выбранный файл присоединяется к содержимому формы при отправке на сервер.

Пример:

</form>

Результат:

Многострочное текстовое поле

Для объемных текстов, например для почтовых сообщений, удобно использовать именно этот элемент. Он создается тегами <textarea> </textarea> и имеет следующие параметры:

name - имя поля,
cols - ширина поля в символах,
rows - количество строк текста, видимых на экране,
wrap - способ переноса слов:
- off - переноса не происходит,
- virtual - перенос отображается, но на сервер поступает неделимая строка,
- physical - перенос и на экране и при поступлении на сервер.
disabled - неактивное поле,
readonly - разрешено только чтение.

Пример:

</form>

Результат:

Попробуйте ввести текст и посмотрите на разницу в значениях параметра wrap.

Раскрывающиеся списки

Списки бывают с возможностью выбора одного элемента и с множественным выбором. Задются и те, и другие с помощью тегов <select> </select>, внутри которых располагаются элементы значений, заданных тегом <option>. Рассмотрим параметры этих тегов:

<select>:
- name - имя списка. Каждый выбранный элемент списка при передаче на сервер будет иметь вид: name.value, где значение (value) берется из тега option.
- size - определяет количество видимых элементов в списке: 1 - простой раскрывающийся список, больше 1 - список с полосой прокрутки.
- multiple - разрешает выбор нескольких элементов списка.
<option>:
- selected - им помечают наиболее вероятный для выбора элемент списка, если список со множественным выбором, то можно пометить несколько пунктов.
- value - значение, которое будет отправлено серверу, если пункт выбран.

Пример:

Какой язык вы хотите изучать:

<option selected value="html">html

<option value="php">php

<option value="java">java

</select><br><br>

Какое время вы готовы на это потратить:<br>

<option selected value="1">1 месяц

<option value="2">2 месяца

<option value="3">3 месяца </select><br><br>

Какие дни недели для занятий вас устроят:<br>

(выбирайте с нажатой клавишей ctrl)<br>

<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>

Результат:

Существуют еще теги <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, значением которого является имя элемента, с которым связываем надпись.

Например:

<label for="load">Выбирайте файл: </label>

</form>

Результат:

Стоит ли его использовать решать вам. Мне кажется, что без него код короче, а результат тот же.

Обобщающий пример

<html>

<head>

<title>Заголовок документа</title>

</head>

<body>

<caption>Форма регистрации</caption>

<tr>

</tr>

<tr>

</tr>

<tr>

<td align="right" valign="top" >Пароль</td>

<td>

</tr>

<tr>

<td align="right" valign="top" >Повтор пароля</td>

<td>

</tr>

<tr>

<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>

<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>

</td>

</tr>

<tr>

</td>

</tr>

</table>

</form>

</body>

</html>

Результат:

Форма регистрации
Имя
e-mail
Пароль
Повтор пароля
Пол	мужской женский
Увлечения
Ваши пожелания

На этом урок, посвященный формам, закончен. В следующем уроке мы узнаем, что такое фреймы.

Работа с формами

HTML формы

0 коментарі:

Отправить комментарий

Поиск

Архив

Easypay

Darling