Мы продолжаем изучать HTML, и мы добрались до достаточно важной и интересной темы - это тема контактных форм. Контактные формы Вы не однократно уже видели на других сайтах вот, и мы попытаемся создать одну из таких форм.
Так как это тема достаточно большая то первым делом, что мы сделаем, это в созданной в начале курса папке HTML создадим новый файл form.html . Если кто забыл как это делается то в редакторе создаем новый файл, «Сохранить как», пишем наше имя form и выбираем расширение файла html. Ну или же старый файл index.html пересохраняем уже с новым именем form.html .
Формы создаются с помощью тега <form> </form>. Это парный тег, поэтому должен быть закрывающейся тег. У этого тега, как и у тега для создания таблиц есть ряд атрибутов.
И первый атрибут это обработчик, куда нужно отсылать все данные, введенные в эту форму. Атрибут action="formdata.php" в значении коорого указан файл обработчик, который обработает занесенные в поля формы данные. Файл formdata.php создается на специальном серверном языке, которым и является язык PHP. С помощью этого файла форма и связанна с серверным обработчиком, который и обрабатывает данные из формы.
И еще одни важный атрибут - это method="POST". Этот атрибут указывает, каким методом данные из формы будут, отсылается нашему обработчику. Таких методов два: это метод method="GET" и method="POST", о них не много позже, а пока создавайте форму по примеру как у меня.
И третий атрибут - это имя формы name="form1", так как на странице может быть несколько форм и их нужно отличать между собой.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Форма</title>
</head>
<body>
</body> </html>
В принципе, каркас для формы мы создали, но если мы даже сохраним и обновим страницу мы еще нечего не увидим, так как ни одного элемента формы мы еще не создали. Поэтому давайте создадим поля для ввода данных в нашей форме.
И начнем мы с создания простого текстового поля. Внутри тега <form> </form> создается тег <input > (переводится этот тег как «ввод»), тег является одиночным, поэтому закрывать его не требуется. Тегу <input > требуется только указать тип элемента (то есть тип поля) и делается это с помощью атрибута type. Мы укажем, что это обычный элемент для ввода текста type="text".
И третий атрибут который надо задать это имя элемента (поля). Атрибут так и называется name и имя уже задается такое, чтобы было удобно для Вас понимать что это за поле, например name="name". Далее при работе с данным полем будет понятно, что данные в этом поле содержат какое-то имя. В итоге у нас получилось обычное поле.
Если после изменений обновить страницу то появится обычное совсем непонятное поле для ввода. Поэтому давайте добавим для нашего поля какое-то описание. И тут есть несколько вариантов: один из них это перед полем ввода добавить абзац как создавать абзац можно прочитать тут.
Теперь стало понятней что это за поле ввода и что туда вводить. Есть еще момент, это отсутствие автоактивации поля, то есть сейчас поле активируется только при нажатии на само поле. Иногда нужно чтобы, нажав на название поля, активировалось само поле. Для этого используется тег <label> </label> это парный тег и ему нужен закрывающийся тег. Данный тег создает связь между полем input и подписью к этому полю.
Теперь если нажать на текст возле поля то оно сразу автоматически активируется. Это достаточно удобно, поэтому старайтесь использовать тег <label>.
И давайте рассмотрим еще пару вспомогательных атрибутов для поля ввода input. Если посмотрим, то наше поле для ввода приняло определенную ширину которая не изменяется. По умолчанию ширина для ввода равняется 20 символам. Таким образом, чтобы изменить ширину поля используется атрибут size. Например чтобы сделает его более широким, то в значение атрибута указываем количество символов size="30". Этот атрибут использовать не обязательно, так как при использовании CSS ширина поля задается по-другому.
И еще один интересный атрибут, который может Вам понадобится - это когда нужно ограничить количество записываемы символов в поле. Если сейчас посмотреть, то поле разрешает ввести любое количество символов, для ограничения используется атрибут maxlength="10" -максимальная длина, где значение атрибута как раз и задает разрешаемое количество символов введенных в поле.
Теперь Вы сможете ввести только 10 символов не смотря на то что ширина поля позволяет ввести больше. Будьте внимательны, чтобы не путать между собой эти два атрибута size="30" и maxlength="10". Первый задает ширину поля, а второй указывает, максимальное количество символов, которое можно ввести в это поле.
И здесь же рассмотрим поле для ввода пароля. Оно, почти, не чем не отличается от поля для текста за исключение атрибута type в нем мы укажем параметр password. Это поле будет отличатся лишь тем, что мы не видим того что мы вводим, а лишь видим черные круглые маркеры. В итоге у нас получился вот такой код для нашей формы.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> Форма </title>
</head>
<body>
</body> </html>
На этом урок завершим. Результат работы можно посмотреть в Демо-версии, а мы переходим к следующему уроку где рассмотрим другие элементы формы такие как радиокнопки.
CSS