Продолжаем строить формы и текстовые поля. Сегодня мы добьём текстовые формы, и я расскажу про обработку данных, которые вводятся в поля формы.

Итак, приступим к созданию. Давайте определимся с полями. Поле "Логин" мы сможем и самостоятельно создать, поле "Пароль" идентично "Логин" с той разницей, что данные, которые вводишь, отображаются звёздочками.

Начнём с поля "Логин":

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"/>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"/>
<title>Пример построения форм | Блог Селькина Виталия</title>
</head>
<body>
Логин:<br/><input type="text"/><br/><br/>
</body>
</html>

Здесь нет ничего нового для нас. Теперь давайте погадаем над запороленным полем. Это очередной инпут, только в другом типе - PASSWORD. Прописываем:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"/>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"/>
<title>Пример построения форм | Блог Селькина Виталия</title>
</head>
<body>
Логин:<br/><input type="text"/><br/><br/>
Пароль:<br/><input type="password"/><br/><br/>
</body>
</html>

Отлично, ещё один тип поля добавили в свою копилку. С полем комментария дела обстоят совсем по-другому. Дело в том, что за построение полей, подобных полю "Комментарий", отвечает тег TEXTAREA, поэтому вкратце о нём.

TEXTAREA

Описание:

Тег предназначен для создания большой текстовой области.

Атрибуты:

cols - ширина текстовой области
disabled - блокировка данного элемента
rows - кол-во строк в высоту
name - имя текстового поля
readonly - запрет ввода

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"/>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"/>
<title>Пример построения форм | Блог Селькина Виталия</title>
</head>
<body>
Логин:<br/><input type="text"/><br/><br/>
Пароль:<br/><input type="password"/><br/><br/>
Комментарий:<br/><textarea cols="25" rows="5"></textarea><br/><br/>
</body>
</html>

Также я добавил два дополнительных атрибута: cols - ширина, rows - высота. Теперь состряпаем поле для загрузки скриншота. За это отвечает обычный инпут с типом FILE:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"/>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"/>
<title>Пример построения форм | Блог Селькина Виталия</title>
</head>
<body>
Логин:<br/><input type="text"/><br/><br/>
Пароль:<br/><input type="password"/><br/><br/>
Комментарий:<br/><textarea cols="25" rows="5"></textarea><br/><br/>
Скриншот:<br/><input type="file"/><br/><br/>
</body>
</html>

Осталось смастерить две кнопочки. Опять же, это инпуты: у обычной кнопки - BUTTON, у очищающей - RESET. Прописываем и получаем:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"/>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"/>
<title>Пример построения форм | Блог Селькина Виталия</title>
</head>
<body>
Логин:<br/><input type="text"/><br/><br/>
Пароль:<br/><input type="password"/><br/><br/>
Комментарий:<br/><textarea cols="25" rows="5"></textarea><br/><br/>
Скриншот:<br/><input type="file"/><br/><br/>
<input type="button" value="Добавить"/><input type="reset" value="Очистить"/>
</body>
</html>

Замечаем VALUE, который определяет надпись на кнопке.

Кстати, для того чтобы создать текст по умолчанию в инпуте, мы использовали VALUE. А как обстоят с этим дела у TEXTAREA? У него нет VALUE, но он парный, поэтому для добавления текста по умолчанию в TEXTAREA необходимо поместить между открывающей частью и закрывающей:

<textarea cols="25" rows="5">Текст по умолчанию</textarea>

Обработка данных

Внешне форма готова, но она не работоспособна. Вся фишка в том, что для добавления необходим файл-обработчик, который обрабатывает введённые данные. Как правило, он пишется на PHP.

Допустим, у нас есть файл-обработчик, но как он будет определять, что данное предложение было введено в поле "Логин", а не в другое. Для того чтобы обработчик мог понимать, какому полю соответствует данная информация, полям дают названия через атрибут name. Давайте и мы зададим имена:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"/>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"/>
<title>Пример построения форм | Блог Селькина Виталия</title>
</head>
<body>
Логин:<br/><input name="login" type="text"/><br/><br/>
Пароль:<br/><input name="pass" type="password"/><br/><br/>
Комментарий:<br/><textarea name="comment" cols="25" rows="5"></textarea><br/><br/>
Скриншот:<br/><input type="file"/><br/><br/>
<input name="button" type="button" value="Добавить"/><input name="reset" type="reset" value="Очистить"/>
</body>
</html>

Имя стоит задавать как кнопкам, так и флажкам, так и полям.

Размышляем дальше. Предположим, что имена мы задали, и файл-обработчик у нас есть, но как указать, что именно определённый файл является обработчиков, а не любой другой. Для этого используют тег FORM.

FORM

Описание:

Тег предназначен для указания обработчика и метода передачи введённой информации.

Атрибуты:

action - ссылка на обработчик
enctype - MIME-тип (чисто для ознакомления)
method - метод передачи информации (POST или GET)
name - имя формы
target - способ открытия (в новом окне, в текущем, во фрейме)

Тег парный, и для того чтобы всё корректно работало, необходимо помещать все элементы, отвечающие за ввод информации (поля, кнопки, чекбоксы, флажки), в данный тег. Кстати, без данного тега кнопка очистки не будет работать, поэтому давайте всё поместим в FORM, зададим имя и укажем обработчик:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"/>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"/>
<title>Пример построения форм | Блог Селькина Виталия</title>
</head>
<body>
<form action="file.php" name="form">
Логин:<br/><input name="login" type="text"/><br/><br/>
Пароль:<br/><input name="pass" type="password"/><br/><br/>
Комментарий:<br/><textarea name="comment" cols="25" rows="5"></textarea><br/><br/>
Скриншот:<br/><input type="file"/><br/><br/>
<input name="button" type="button" value="Добавить"/><input name="reset" type="reset" value="Очистить"/>
</form>
</body>
</html>

Ещё момент. Всего существует два вида кнопок: первая - так скажем, холостая, вторая - сабмит. Мы с вами использовали в примере холостую (она не даёт никакого результата при нажатии), но если бы мы строили систему комментариев или обратной связи, то по клику должны отправляться данные файлу-обработчику для обработки введённых данных, поэтому давайте изменим тип кнопки на SUBMIT:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"/>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"/>
<title>Пример построения форм | Блог Селькина Виталия</title>
</head>
<body>
<form action="file.php" name="form">
Логин:<br/><input name="login" type="text"/><br/><br/>
Пароль:<br/><input name="pass" type="password"/><br/><br/>
Комментарий:<br/><textarea name="comment" cols="25" rows="5"></textarea><br/><br/>
Скриншот:<br/><input type="file"/><br/><br/>
<input name="button" type="submit" value="Добавить"/><input name="reset" type="reset" value="Очистить"/>
</form>
</body>
</html>

Теперь по клику наши данные отправятся файлу file.php для обработки.

Ещё я не сказал про такой тип инпута, как скрытые поля. Представьте , что нам нужно добавить 7 студентов, каждый из которых обучается на факультете ЭВМ. Мы можем создать новое текстовое поле и для каждого стедента вписывать туда "ЭВМ", а можно создать скрытое поле и присвоить ему значение "ЭВМ". Другими словами, нам не придётся каждый раз прописывать "ЭВМ". Данные поля не отображаются на странице, то есть они существуют, но зрительно их не видно. Предлагаю создать одно такое поле и призвоить ему значение:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"/>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"/>
<meta name="robots" content="none"/>
<title>Пример построения форм | Блог Селькина Виталия</title>
</head>
<body>
<form action="file.php" name="form">
Логин:<br/><input name="login" type="text"/><br/><br/>
Пароль:<br/><input name="pass" type="password"/><br/><br/>
Комментарий:<br/><textarea name="comment" cols="25" rows="5"></textarea><br/><br/>
Скриншот:<br/><input type="file"/><br/><br/>
<input type="hidden" name="fakul" value="ЭВМ"/>
<input name="button" type="submit" value="Добавить"/><input name="reset" type="reset" value="Очистить"/>
</form>
</body>
</html>

Не забываем дать ему имя. Тип инпута, как вы видите, у скрытых полей - HIDDEN.

В предыдущем уроки мы блокировали поле "Правило" с помощью readonly, то есть содержимое поля было доступно только для чтения (можно выделить и скопировать текст данного поля в буфер обмена, но нельзя изменить), а вот disabled блокирует всю активность данного поля:

Есть ещё один тип инпута - IMAGE. Это графическое поле, в которое помещается изображение. В него нельзя ничего ввести, как и в скрытое. Его можно использовать в качестве графической кнопки, как у меня в форме комментариев. Но я, как и многие, использую стилизацию каскадных таблиц, хотя легче использовать графический инпут:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"/>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"/>
<meta name="robots" content="none"/>
<title>Пример построения форм | Блог Селькина Виталия</title>
</head>
<body>
<form action="file.php" name="form">
Логин:<br/><input name="login" type="text"/><br/><br/>
Пароль:<br/><input name="pass" type="password"/><br/><br/>
Комментарий:<br/><textarea name="comment" cols="25" rows="5"></textarea><br/><br/>
Скриншот:<br/><input type="file"/><br/><br/>
<input type="hidden" name="fakul" value="ЭВМ"/>
<input name="button" type="submit" value="Добавить"/><input name="reset" type="reset" value="Очистить"/>
<input name="graph" src="button.png" alt="" type="image"/>
</form>
</body>
</html>

Получаем:

В SRC мы указываем расположение изображения, а в ALT описание данного изображения. Также имеется до боли знакомый атрибут ALIGN, позволяющий задать выравнивание относительно текста. Теперь можно отправить обработчику введённые данные нажав или обычную кнопку-сабмит, или графическую кнопку. Что больше нравится - выбирайте сами.

На этом я закончиваю. Урок получился очень большим. Хорошенько его переварите. В архиве прикладываю шпаргалку по типам инпута. Будут вопросы - оставляйте комментарии.