HTML. Формы (Урок 8)

Оглавление:

В этом уроке давайте рассмотрим создание контактной формы при помощи html.

Мы знаем, что html – это всего лишь язык разметки, он всего лишь указывает браузеру, что и как нужно отображать. А вот что касается отправки данных или их обработки, здесь html бессилен. Он не может обрабатывать данные. Для этого предназначены специальные серверные языки программирования. Например, язык PHP. Поэтому форма регистрации HTML как-то должна быть связана с серверным обработчиком, который и будет данные из формы обрабатывать.

К оглавлению ↑

Принципы работы формы HTML

Давайте рассмотрим схему работы формы в HTML. Когда человек заходит на сайт и заполняет форму для сайта,  получается примерно следующее:

Форма в html

 

Т.е. человек заполнил три поля (Имя, e-mail и сообщение) и далее нажимает кнопку «отправить». В этот момент данные отправляются у нас некоему обработчику. Назовем этот обработчик formdata.php Обратите внимание на расширение файла! Он написан на языке php, и именно этот файл будет у нас заниматься обработкой данных, отправленных с формы. Что будет происходить с данными, зависит от того, что за код написан в файле-обработчике. Если, допустим, владелец сайта хочет, чтобы данные отправлялись в виде письма на его электронный ящик, то он прописывает специальную инструкцию в formdata.php для отправки данных на e-mail.

Принцип работы формы html

 

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

К оглавлению ↑

Основные теги и атрибуты форм HTML

В рамках данного урока мы займемся созданием html формы связи, а в следующих уроках коснемся создания обработчика на языке php. Форму для сайта в html мы будем создавать в новом файле, чтобы не путаться в коде. Давайте перейдем в notepad++ и создадим новый документ и сразу вставим в него шаблон html документа.

Скачайте шаблон html документа html_page_template.

Дадим документу название формы и сохраним файл под именем form.html.

создание новой формы html

 

Формы создаются с помощью парного тега form примерно так же, как таблицы. У тега form есть обязательные атрибуты, которые мы должны указать.

Во-первых, это тот самый обработчик, куда мы должны отправлять все данные. Поэтому нам надо его прописать. Атрибут называется action. Для этого атрибута пропишем название файла обработчика formdata.php

И еще один важный атрибут – это атрибут method. Он отличает за то, каким способом будут отсылаться данные. Способов может быть два. О них мы поговорим в следующих уроках. А пока просто напишем значение POST.

Также добавим форме имя. За это отвечает атрибут name. Дадим имя форме – form1.

форма html

 

Теперь наша форма готова. В браузере конечно мы ничего пока не увидим, так как мы еще не добавили ни один элемент формы, но каркас у нас уже готов.

К оглавлению ↑

Создание текстовых полей (тег <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 заключается в том, что вместо символов при вводе в поле выводятся круглые маркеры.

Вот так будет выглядеть код, который мы набрали:

html новая форма

 

А вот так будет выглядеть результат в браузере:

результат html формы в браузере

 

На этом урок можно закончить.

В следующем уроке  создадим в HTML радиокнопки и чекбоксы.

Удачи вам! До скорых встреч на страницах блога VyacheslavDanilov.ru


Вам также понравится...

Смотри и удивляйся:
Десерт

*посмотреть еще ролик можно обновив страницу в браузере

2 комментария

  1. Krianaxzl:

    Большое спасибо! за публикацию! Подскажите пожалуйста, как сделать точно такой блок как у Вас!?

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *