Как добавить форму на сайт

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

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

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

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

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

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

 <form name="forma1"> </form>
Текстовое поле

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

 <form name="forma1">
<input name="text1" size="20" maxlength="50" value="Введите текст" type="text" />
</form>

Результат:

Параметры:

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

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

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

Пример:

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

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

    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 name="forma1">
<input type="submit" name="submit" value="Отправить"> <input type="image" name="but_img" src="/but.gif">

<input type="reset" name="reset" value="Очистить"> <input type="button" name="button" value="Отправить">
</form>

Результат:


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

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

Пример кода:

<form name="forma1"> <input type="submit"> Отправить </button> </form>

Результат:

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

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

Пример:

<form name="forma1"> <input type="file" name="load" size="50"> </form>

Результат:

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

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

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

Пример:

<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>. Рассмотрим параметры этих тегов:

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

Пример:

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

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

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

<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>
<option value="2">спорт </option>
<option value="3">игры </option>
<option value="4">животные </option>
<option value="5">автомобили </option>
<option value="6">клубы </option>
<option value="7">музыка </option>
</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>

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