Здравствуйте, давайте сегодня поговорим о создании формы ввода различных данных, а также обработке этих данных с помощью запроса post.

Скачать исходники для статьи можно ниже

Создание формы:

Любая форма состоит из двух основных тегов – form и imput, давайте же рассмотрим их подробнее.

Тег form:

Чтобы создать Форму на сайте нужно написать тег <form>, а в конце формы поставить закрывающий тег </form>.

У тега form есть свои атрибуты:

Все атрибуты (основные, вспомогательные, события) можно посмотреть по следующему url: “xiper.net/manuals/html/tags/form.html”

Я же перечислю наиболее встречающиеся атрибуты тега form:

method – задает метод отправки данных (get или post, в большинстве случаев применяется post, так как позволяет отправлять данные больших объемов.)

action – URL обработчика данных на сервере, например какой-нибудь php-файл, но обработчик также может располагаться в том же файле, где и форма, тогда данный атрибут можно не указывать.

name – уникальное имя формы.

id – уникальный идентификатор.

class – определяет имя используемого класса.

target – окно или фрейм, куда будет возвращаться результат запроса, здесь возможные следующем параметры:

_blank — откроет документ в новом окне.
_parent — откроет документ во фрейме-родителе. Если такого нет, откроет в текущем окне.
_top — отменяет все фреймы и загружает страницу в полном окне браузера, если фремов нет, откроет в текущем окне.
_self — откроет в текущем окне (по умолчанию).

С тегом form разобрались, но чтобы создать форму на сайте, нам понадобиться еще один тег – input.

Тег input:

Тег <input> (с англ. ввод данных) позволяет создавать элементы интерфейса: кнопки, текстовые поля, переключатели и флажки. Основной метод получения информации от пользователя (читателя) базируется на этом теге. В зависимости от атрибута type, отображается в виде различных элементов управления.

У этого тега input также много атрибутов – весь их список можно увидеть тут – “xiper.net/manuals/html/tags/input.html”.

Наиболее встречающиеся из атрибутов тега input:

name – уникальное имя элемента.

value – значение элемента.

size – ширина текстового поля в символах.

type – тип элемента управления, может принимать следующие параметры:

text — текстовое поле.
password — текстовое поле, в котором символы показываются звездочками.
button — кнопка.
checkbox — флаг.
radio — переключатели. Выбор одного варианта из нескольких.
file — поле для ввода имени файла.
hidden — скрытое поле. На странице не отображается.
image — кнопка с изображением.
range — слайдер (отсутствует в спецификации HTML 4.01, поддерживает Opera, Safari и Chrome).
reset — кнопка возврата данных формы к значениям по умолчанию.
search — поле поиска (отсутствует в спецификации HTML 4.01, поддерживает Safari и Chrome).
submit — кнопка для отправки данных на сервер.

Также стоит рассказать про часто используемое в формах поле – <textarea> – представляет собой элемент формы для создания области, в которую можно вводить несколько строк текста.

То есть с помощью атрибута type  мы задаем поле, которое будет выведено в форме:

Теперь давайте создадим простую форму на сайте.

Для этого в wordpress создаем любую запись или страничку, переходим в редактор TEXT (Текст) – не Визуальный редактор (также можно воспользоваться виджетом с названием “Текст”):

и вставляем например следующий код:

<form>
    ФИО: <input name="fio" type="text" value="">

    Пол:
    М<input name="sex" type="radio" value="Мужской">
    Ж<input name="sex" type="radio" value="Женский">

    Страна:

    <select name="city">
        <option value="Россия"> Россия
        <option value="Украина"> Украина
        <option value="Белоруссия"> Белоруссия
        <option value="Другая страна"> Другая страна
    </select>

    Домашнее(ие) животное(ые):

    Кот (кошка): <input type="checkbox" name="pet_1" value="Кот">
    Собака: <input type="checkbox" name="pet_2" value="Собака">
    Рыбки: <input type="checkbox" name="pet_3" value="Рыбки">
    Другие: <input type="checkbox" name="pet_4" value="Другие">

    О себе:
    <textarea cols="40" rows="10" name="about"></textarea><br><br>

    <input type="submit" name="submit">

</form>

У вас должно получиться следующее:

Отлично, формы мы создавать научились, теперь давайте научимся читать введенные данные в полях формы и обрабатывать их.

Обработка данных формы с помощью post запроса.

Продолжение  следует…