Здравствуйте, уважаемые читатели сайта Uspei.com. В этом уроке успеем рассмотреть создание контактной формы при помощи html.
Мы знаем, что html – это язык разметки, он всего лишь указывает браузеру, что и как нужно отображать. А вот что касается отправки данных или их обработки, здесь html бессилен. Он не может обрабатывать данные. Для этого предназначены специальные серверные языки программирования. Например, язык PHP. Поэтому форма регистрации HTML как-то должна быть связана с серверным обработчиком, который и будет данные из формы обрабатывать.
Принципы работы формы HTML
Давайте рассмотрим схему работы формы в HTML. Когда человек заходит на сайт и заполняет форму для сайта, получается примерно следующее:
Т.е. человек заполнил три поля (Имя, e-mail и сообщение) и далее нажимает кнопку «отправить». В этот момент данные отправляются у нас некоему обработчику. Назовем этот обработчик formdata.php Обратите внимание на расширение файла! Он написан на языке php, и именно этот файл будет у нас заниматься обработкой данных, отправленных с формы. Что будет происходить с данными, зависит от того, что за код написан в файле-обработчике. Если, допустим, владелец сайта хочет, чтобы данные отправлялись в виде письма на его электронный ящик, то он прописывает специальную инструкцию в formdata.php для отправки данных на e-mail.
Но можно, например, создать такую инструкцию, чтобы данные заносились в базу данных.
Основные теги и атрибуты форм HTML
В рамках данного урока мы займемся созданием html формы связи, а в следующих уроках коснемся создания обработчика на языке php. Форму для сайта в html мы будем создавать в новом файле, чтобы не путаться в коде. Давайте перейдем в notepad++ и создадим новый документ и сразу вставим в него шаблон html документа.
Скачайте шаблон html документа html_page_template.
Дадим документу название формы и сохраним файл под именем form.html.
Формы создаются с помощью парного тега form примерно так же, как таблицы. У тега form есть обязательные атрибуты, которые мы должны указать.
Во-первых, это тот самый обработчик, куда мы должны отправлять все данные. Поэтому нам надо его прописать. Атрибут называется action. Для этого атрибута пропишем название файла обработчика formdata.php
И еще один важный атрибут – это атрибут method. Он отличает за то, каким способом будут отсылаться данные. Способов может быть два. О них мы поговорим в следующих уроках. А пока просто напишем значение POST.
Также добавим форме имя. За это отвечает атрибут name. Дадим имя форме – form1.
Теперь наша форма готова. В браузере конечно мы ничего пока не увидим, так как мы еще не добавили ни один элемент формы, но каркас у нас уже готов.
Создание текстовых полей (тег <input>)
Продолжим урок с создания простого текстового поля. Если вы обратили внимание, в нашей HTML форме было два таких текстовых поля для ввода имени и e-mail адреса. Как же они создаются?
Они создаются при помощи тега Input. Запомните этот тег. С помощью него создается большинство элементов формы в HTML. Input переводится как ввод и, чтобы указать конкретный элемент, здесь нужно использовать атрибут type. В данном случае у нас будет обычный элемент для ввода текста. Также для элемента нужно задать имя. В нашем случае назовем это поле name.
Для нашего поля необходимо дать описание, чтобы посетителю было понятно, что необходимо ввести в поле. Для этого заключим наш тег input в абзац и в тег <label>. Тег label сделает наше описание активным и таким образом, щелкнув на описание, у нас произойдет активация Input и курсор будет переключаться на него. Вот так наша строка будет выглядеть в HTML коде:
<p><label>Введите ваше имя: <input type=”text” name=”name”></label></p>
Давайте разберем еще атрибуты для тега input. Следующий атрибут – это size. Без этого атрибута наше поле input имеет фиксированный стандартный размер в 20 символов. Если мы хотим сделать поле более широким, то необходимо указать атрибут size.
<p><label>Введите ваше имя: <input type=”text” name=”name” size=”30”></label></p>
Еще следует отметить такой атрибут, как ограничение на количество символов, которое можно ввести в поле. Допустим, мы хотим ограничить поле для ввода имени 10 символами. Чтобы это реализовать, мы добавляем атрибут maxlength.
<p><label>Введите ваше имя(макс. 10 символов): <input type=”text” name=”name” size=”30” maxlength = “10”></label></p>
Теперь несмотря на то, что ширина поля позволяет ввести больше символов, мы не сможем превысить размер в 10 знаков.
Далее давайте пройдем поле для ввода пароля. Оно практически ничем не отличается, за исключением атрибута type. Для пароля type будет password. Поэтому скопируем предыдущую строку и введем необходимые изменения.
<p><label>Введите ваш пароль (макс. 10 символов): <input type=”password” name=”name” size=”30” maxlength = “10”></label></p>
Отличие поля password заключается в том, что вместо символов при вводе в поле выводятся круглые маркеры.
Вот так будет выглядеть код, который мы набрали:
А вот так будет выглядеть результат в браузере:
