Формы в HTML

• • Многострочное текстовое поле – для создания области, в которую можно вводить несколько строк текста, предназначен тег TEXTAREA. В отличие от тега INPUT, в текстовом поле допустимо делать переносы строк, они сохраняются при отправке данных на сервер. Параметры поля отличаются от однострочного варианта и перечислены ниже:

• • cols – ширина текстового поля, которая определяется числом символов моноширинного шрифта.
  • disablet – блокирует доступ и изменение текстового поля. В таком случае оно отображается серым цветом и недоступным для активации пользователем.
  • name – определяет уникальное имя элемента TEXTAREA. Как правило, это имя применяется при отправке данных на сервер или для доступа к полю через скрипты. В качестве имени используется набор символов, включая числа и буквы.
  • readonly – когда к тегу TEXTAREA добавляется этот параметр, текстовое поле недоступно для изменения пользователем, в том числе в него не допускается вводить новый текст или модифицировать существующий.
  • rows – высота текстового поля, которая определяется количеством отображаемых строк без прокрутки содержимого. Если размер шрифта изменяется с помощью стилей, высота поля также соответственно меняется.
  • wrap – параметр говорит браузеру о том, как осуществлять перенос текста в поле TEXTAREA и в каком виде отправлять данные на сервер. Если этот параметр отсутствует, текст в поле набирается одной строкой, а когда число введенных символов превышает ширину области, появляется горизонтальная полоса прокрутки.

Между тегами <TEXTAREA> И </TEXTAREA> можно вставить любой текст, который будет отображаться внутри поля.

<form action=mail.php>
Введите имя:
<input type=text maxlength=25 size=20>
Введите ваш отзыв:
<textarea rows=5 cols=40></textarea>
<input type=submit value="Отправить">
</form>

В браузере увидим:

Введите имя:

Введите ваш отзыв:

Ну вот, получилась уже практически готовая форма обратной связи, если придать ей определённые стили, то получится вполне приличная html форма для сайта.

Изображения в текстовом поле

Изображение возле текстового поля обычно добавляется для привлечения внимания пользователя и дизайнерского оформления. Стили разрешают вставить рисунок прямо в поле для ввода текста.

Вначале готовим необходимое изображение, а затем добавляем его к тегу INPUT в виде фона, используя атрибут background. Исходный рисунок можно уменьшить в графическом редакторе или, наоборот, увеличить высоту поля, подгоняя его под высоту изображения. С этой целью применяется свойство height. В качестве аргумента параметра background необходимо использовать no-repeat, тогда рисунок будет отображаться только один раз и не станет повторяться, как это задано для фона по умолчанию. Чтобы не писать текст поверх рисунка, к стилю тега INPUT следует добавить атрибут padding-left. Он обеспечивает набор текста правее рисунка, а его значение зависит от ширины изображения.

Примерно так:

Из-за того, что текстовое поле изображается утопленным за счет трехмерной рамки, реальная высота области несколько меньше указанной высоты. Так, в данном примере используются рисунки высотой 34px, если установить такое же значение и для поля, то изображения окажутся обрезанными снизу. Чтобы этого не произошло, высота поля в примере задана больше. С той же целью можно установить другой вид рамки, используя стилевое свойство border.

Кнопки

Кнопки являются одним из самых понятных и интуитивных элементов интерфейса. По их виду сразу становится понятно, что единственное действие, которое с ними можно производить, – это нажимать на них. За счет этой особенности кнопки часто применяются в формах, особенно при их отправке и очистке.

Кнопку на веб-странице можно создать двумя способами – с помощью тега INPUT и тега BUTTON. Рассмотрим вначале добавление кнопки через INPUT и его синтаксис.

Основных параметров всего два – это name и value. Атрибут name задает имя кнопки и предназначен для того, чтобы обработчик формы мог идентифицировать это поле. Параметр name может быть опущен, в таком случае значение кнопки не передается на сервер. Значение кнопки и надпись на ней одновременно устанавливаются с помощью параметра value.

<form action=mail.php>
<input type=button name=press value="Нажми меня нежно">
</form>

В надписи на кнопке можно ставить пробелы в любом количестве, за счет них можно регулировать её ширину.

Второй способ создания кнопки основан на использовании тега BUTTON. ОН по своему действию напоминает результат, получаемый с помощью тега INPUT. В отличие от этого тега, BUTTON предлагает расширенные возможности по созданию кнопок. Например, на подобной кнопке можно размещать любые элементы HTML, в том числе изображения и таблицы. Используя стили, можно задать вид кнопки путем изменения шрифта, цвета фона, размеров и других параметров.

Теоретически, тег BUTTON должен располагаться внутри формы, устанавливаемой элементом FORM. Тем не менее браузеры не выводят сообщение об ошибке и корректно работают с тегом BUTTON, если он встречается самостоятельно. Однако если результат нажатия на кнопку необходимо отправить на сервер, то помещать BUTTON между тегами FORM обязательно.

В следующем примере показано создание обычной кнопки с текстом, а также кнопки с одновременным использованием текста и рисунка. Чтобы рисунок и текст были выровнены по одной оси, добавлен атрибут absmiddie для тега IMG.

<button>Кнопка с текстом</button>
<button><img src=image/post.jpg width=25 height=34 align=absmiddle>Отправить</button>

Вот, что получилось:

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

• Кнопка SUBMIT – предназначена для отправки данных на сервер. Её вид ничем не отличается от других кнопок, но при нажатии на нее происходит выполнение серверной программы, указанной параметром action тега FORM. Эта программа, называемая еще обработчиком формы, получает данные, введенные пользователем в полях формы, производит с ними необходимые манипуляции, после чего возвращает результат в виде html-документа. Что именно делает обработчик, зависит от автора сайта; так, подобная технология применяется при создании опросов, форумов, гостевых книг, тестов и многих других вещей.

<form action=mail.php method=get>
<input type=submit>
</form>

Браузер отобразит:

• Кнопка RESET – при нажатии на кнопку RESET данные формы возвращаются в первоначальное значение. Как правило, эту кнопку применяют для очистки введенной в полях формы информации. Но для больших форм от использования кнопки RESET лучше вообще отказаться, чтобы по ошибке на нее не нажать, ведь тогда придется заполнять форму заново.

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

<form action=mail.php method=get>
<input type=text value="Введите текст">
<input type=submit value="Отправить">
<input type=reset value="Очистить">
</form>

Посмотрим код html формы в отображении браузера:

• Цветные кнопки – Вид и цвет кнопок зависит от операционной системы и браузера. Тем не менее можно изменить цвет кнопок по своему усмотрению, воспользовавшись стилями. Для этого требуется только добавить к кнопке атрибут background. Дополнительно можно поменять параметры шрифта, в частности цвет текста. Кроме однотонного цвета на кнопке можно использовать и фоновый рисунок, можно сделать заливку кнопки градиентом, да всё что угодно, насколько хватит фантазии…

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

Переключатели (radiobutton) используют, когда необходимо выбрать одинединственный вариант из нескольких предложенных. Создаются они следующим образом:

<input type=radio name=имя, параметры>

У этого поля три основных параметра: name, value и checked:

• name – однозначно идентифицирует поле, вдобавок, поскольку переключатели являются групповыми элементами, то имя у всех элементов группы должно быть одинаковым. Такой подход однозначно устанавливает принадлежность поля к определенной группе.
• value – задает, какое значение будет отправлено на сервер. Здесь каждый элемент должен иметь свое уникальное значение, чтобы можно было идентифицировать, какой пункт был выбран пользователем.
• checked – применяется для предварительного выделения пункта списка.

По определению, набор переключателей может иметь только один выделенный пункт, поэтому добавление checked сразу к нескольким полям не приведет к какому бы то ни было выдающемуся результату. В любом случае будет отмечен элемент, находящийся в коде HTML последним.

<form action=mail.php>
Сколко будет 2+2?
<input name=summa type=radio>3
<input name=summa type=radio>4
<input name=summa type=radio>Тьма
<input type=submit value="Выбрать">
</form>

В браузере форма будет иметь вид:

Флажки

Флажки (checkbox) используют, когда необходимо выбрать два или более варианта из предложенного списка. Если требуется выбрать лишь один вариант, то для этого следует предпочесть переключатели (radiobutton).

Параметры флажков идентичны переключателям, а именно: name задает имя поля, value – его значение, a checked устанавливает флажок как помеченный. При этом каждый флажок, входящий в группу, рассматривается как независимый, поэтому имена и значения у них должны различаться.

<form action=mail.php>
C какими операционными системами вы знакомы?
<input class=col type=checkbox name=option1 value=a1 checked>Windows 95/98
<input class=col type=checkbox name=option2 value=a2>Windows 2000
<input class=col type=checkbox name=option3 value=a3>System X
<input class=col type=checkbox name=option4 value=a4>Linux
<input class=col type=checkbox name=option5 value=a5>X3-DOS
<input type=submit value="Выбрать">
</form>

Браузер отобразит:

Поле со списком

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

<select параметры>
<option параметры>Пункт 1</option>
<option>Пункт 2</option>
<option>Пункт 3</option>
</select>

Тег SELECT позволяет создать элемент интерфейса в виде раскрывающегося списка, а также список с одним или множественным выбором. Конечный вид зависит от использования параметра size тегаSELECT, который устанавливает высоту списка. Ширина списка определяется самым широким текстом, указанным в теге OPTION, а также может изменяться с помощью стилей. Каждый пункт создается через тег OPTION, который должен быть вложен в контейнер SELECT. Если планируется отправлять данные списка на сервер, то следует поместить элемент SELECT внутрь формы.

Рассмотрим параметры тега SELECT, с помощью которых можно изменять вид и представление списка:

• multiple – наличие параметра multiple дает команду браузеру отображать содержимое элемента SELECT как список множественного выбора. Конечный вид списка зависит от используемого параметра size. Если он отсутствует, то высота списка равна количеству пунктов; если значение size меньше числа пунктов, то появляется вертикальная полоса прокрутки. Когда size=1, список превращается в “крутилку”, но выбирать с помощью нее одновременно несколько пунктов списка становится неудобно.
• name – определяет уникальное имя элемента SELECT. Как правило, это имя используется для доступа к данным через скрипты или для получения выбранного значения серверным обработчиком.
• size – задаёт высоту списка. Если значение параметра size=1, то список превращается в раскрывающийся. При добавлении параметра multiple к тегу SELECT при size=1 список отображается как “крутилка”. Во всех остальных случаях получается список с одним или множественным выбором. Значение по умолчанию зависит от параметра multiple. Если он присутствует, то размер списка равен количеству элементов. Когда параметра multiple нет, значение параметра size=1.

Тег OPTION также имеет параметры, влияющие на вид списка, они представлены далее:

• selected – делает текущий пункт списка выделенным. Если у тега SELECT добавлен параметр multiple, то можно выделять более одного пункта.
• value – определяет значение пункта списка, которое будет отправлено на сервер.

<form action=mail.php>
Выбери цвет:
<select name=color>
<option value=s1>Красный
<option value=s2 selected>Синий
<option value=s3>Зелёный
<option value=s4>Жёлтый
</select>
<input type=submit value="Выбрать">
</form>

Что получилось:

Отправка файла

Для того чтобы можно было отправить на сервер файл, используется специальное поле, которое задается параметром type=fiie тега INPUT. Такой элемент формы отображается как текстовое поле, рядом с которым располагается кнопка Обзор (Browse). При нажатии на эту кнопку открывается окно для выбора файла, в котором пользователь может указать нужный файл. Код для создания поля для отправки файла показан ниже:

<form enctype="multipart/form-data" method=post>
Выбрать файл:
<input type=file size=30>
</form>

Параметр формы enctype=”multipart/form-data” нужен для корректной передачи файла. Если его не указать, то будет передан лишь путь к файлу. Дополнительные параметры те же, что и для текстового поля. Поскольку графические файлы занимают относительно большой объем данных, их следует отправлять на сервер с помощью method=post, как показано в данном примере.

Форма обратной связи

Ниже приведён пример реально работающей формы обратной связи с PHP обработчиком, применённой на моём сайте:

HTML – код формы:

<form method="post" action="mail.php">
Имя:
<input type="text" class="style" name="name" size="30"/>
Е-mail:
<input name="email" type="text" class="style" size="30"/>
Сообщение:
<textarea name="mess" class="style" rows="8" cols="45"></textarea>
<input type="submit" value="Отправить сообщение"/> </form>

Подключаем PHP обработчик:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Форма обратной связи</title>
</head>
<body>
<?php
if (isset($_POST['name'])) {$name = $_POST['name'];}
if (isset($_POST['email'])) {$email = $_POST['email'];}
if (isset($_POST['mess'])) {$mess = $_POST['mess'];}
if (empty($name))
{
echo "Не указано имя!";
echo "<a href=URL страницы на которой находится форма>Вернуться к заполнению формы</a>";
exit;
}
if (empty($email))
{
echo "Не указан e-mail!";
echo "<a href=URL страницы на которой находится форма>Вернуться к заполнению формы</a>";
exit;
}
if (empty($mess))
{
echo "Сообщение не написано!";
echo "<a href=URL страницы на которой находится форма>Вернуться к заполнению формы</a>";
exit;
}
$to = "Адрес электронной почты, на который отправляются сообщения</a>";
$headers = "Content-type: text/plain; charset = windows-1251";
$subject = "Сообщение с вашего сайта";
$message = "Имя пославшего: $name \nЭлектронный адрес: $email \nСообщение: $mess";
$send = mail ($to, $subject, $message, $headers);
if ($send == 'true')
{
echo "Спасибо за отправку вашего сообщения!";
echo "<a href=index.html>Нажмите, чтобы вернуться на главную страницу";
}
else
{
echo "
Ошибка. Сообщение не отправлено!";
}
?>
</body>
</html>

Те данные, которые выделены красным, необходимо заменить на свои. Сохраняем файл как mail.php в корне сайта.

Добавляем CSS стили:

.style {
font:normal 12pt verdana;
border:solid 1px #808080;
color:#8A2BE2;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
}

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