Формы определяются с помощью элемента form. Все элементы, находящиеся внутри тега form, относятся к данной форме.
<form> … </form>
В начальном теге <form> ожидается атрибут action. Через него указывается, что нужно сделать с данными формы. Обычно это PHP-приложение.
<form method="post" action="form.php"> … </form>
Обратите внимание, что указанный файл действительно может быть найден. Вам нужно установить правильный путь.
Вместо скрипта можно также указать адрес электронной почты.
<form method="post" action=mailto:kontakt@psd-tutorials.de method="post" enctype="text/plain"> … </form>
В этом случае данные формы будут отправляться по электронной почте. Это, конечно, не очень стильно, поэтому почти всегда предпочтительно использовать скрипты. Однако, если у вас нет скрипта под рукой, вы можете в крайнем случае отправить форму по электронной почте.
Еще одним важным атрибутом для элемента form является method. Через него вы устанавливаете метод передачи HTTP для отправки содержимого формы. Доступно два разных варианта.
• post = Данные формы отправляются на указанный адрес в два этапа. Сначала браузер связывается с указанным адресом. Если это прошло успешно, данные формы передаются скрипту.
• get = При этом методе данные формы добавляются в конец URL, который был указан в атрибуте action. Данные формы, таким образом, видны, в том числе, в строке адреса браузера.
Конечно же, возникает вопрос, какой из этих двух вариантов следует использовать для отправки данных формы. В принципе, можно использовать и то и другое. Особенно если речь идет о больших объемах данных и загрузке файлов на сервер, вам следует использовать post.
Простые поля формы
До сих пор определена только внешняя структура формы. В браузере сама форма пока не видна.
<form method="post" action="form.php"> … </form>
Теперь нам нужно заполнить форму содержимым.
Самый часто используемый тип поля - это однострочное текстовое поле. Его используют, например, для запрашивания имени, фамилии и адреса электронной почты. Определяются однострочные текстовые поля следующим образом:
<input type="text" name="vorname" />
Элементу input присваивается комбинация атрибута-значения type="text". Кроме того, каждому полю ввода должен быть задан внутренний идентификатор. Этот идентификатор должен быть уникальным в документе. Он особенно полезен, когда речь идет о обработке данных формы через скрипт. Не используйте пробелы и специальные символы в идентификаторе.
Если вы посмотрите на результат в браузере, вы увидите следующее:
Это, конечно, выглядит не очень впечатляюще. Но если вы нажмете на текстовое поле, вы увидите, что уже можете вводить текст.
Чтобы посетители знали, что нужно вводить в поле, нужна, конечно, метка.
Имя: <input type="text" name="vorname" />
И снова, взглянув в браузер, вы увидите нужный результат.
Через атрибут size вы можете установить ширину поля.
Имя: <input type="text" name="vorname" size="30" /> <br /> Почтовый индекс: <input type="text" name="plz" size="5" />
Через атрибут size вы указываете желаемую ширину поля.
При этом 5 соответствует точно пяти символам. В этой связи также интересен атрибут maxlength. Через него указывается максимально допустимое количество символов, которое можно ввести в поле. Вот пример:
Имя: <input type="text" name="vorname" size="30" maxlength="40" />
Если значение, указанное в maxlength, больше, чем в size, то при вводе длинных текстов происходит автоматическая прокрутка в поле.
Через атрибут value вы можете установить предварительное заполнение поля.
Имя: <input type="text" name="vorname" value="Ваше имя" />
Значение, назначенное value, является значением предварительного заполнения поля.
Пользователи могут удалить это предварительно заполненное значение.
Впрочем, вы можете предотвратить удаление значений из полей. Для этого определяется поле ввода, которое в собственном смысле уже не является полем ввода. Фактически такие поля часто используются для вывода. Это может быть интересно, например, для отображения значений, определенных сценарием. Подумайте, например, о калькуляторе. Также можно вручную предзаполнить поле текстом, который посетители уже не могут изменить. (Примечание: Знак евро в PDF-представлении к сожалению не отображается правильно).
<input name="preis" type="text" value="€ 699.-" readonly />
Чтобы установить поле только для чтения, назначается атрибут readonly. Опять же, взглянем на результат:
Предопределенный текст отображается непосредственно. Однако его нельзя удалить.
Определение поля для пароля
Конечно же, вы знакомы с полями для ввода пароля. Где бы вы ни регистрировались, вам нужно указать пароль. (Обычно вам даже приходится вводить его дважды).
Введенные данные в поле ввода не отображаются, а вместо них автоматически браузером ставятся звездочки/точки. Преимущество этого способа: люди, возможно, видящие ваш пароль через плечо, не могут его расшифровать. Однако неверно думать, что поля для пароля автоматически безопасны. Фактически пароли передаются в текстовом виде при отправке формы в обычном HTTP.
Поля для паролей определяются следующим образом:
<input type="password" name="passwort" />
Атрибуту type назначается значение password. Опять же, взглянем на результат.
Когда что-то вводится здесь, браузеры сразу делают это неразборчивым.
