Что такое веб формы их создание

Пришло время поговорить о понятии веб форм, разобраться для чего они нужны, где используются и какими элементами задаются на странице верстки. Данные, которые мы вносим в форму в последствии отправляются для обрабатывания на сервер. Наша задача научиться и понять какие данные и куда можно отправлять и для чего.

Первый элемент, парный тег, который указывает браузеру на дальнейшее использование форм и пишется он вот так:

Это основной элемент имеющий один обязательный атрибут и несколько не обязательных. Обязательным атрибутом есть:

• action=“http://site.ru/handler/” (обязательный)
• method=“GET”
• enctype=“application/x-www-form-urlencoded”
• target=“_blank”

В атрибуте action указываем, куда отправляются данные с нашей формы, другими словами указываем адрес обработчика. Атрибут method указывает каким методом можно отправить форму, их есть два get и post. От методов зависит то, где будут передаваться данные. Атрибут enctype говорит, что за данные отправляются. Ну и target, который говорит, что после отправленной формы откроется новое какое-то окно.

Текстовые поля и кнопки

Самым часто используемым элементом форм есть <input type=“text” name=“login” />, который является одиночным тегом и содержит в себе два обязательных атрибута:

• type — задает тип элементу input
• name — задает имя элементу input
• maxlength — ограничение на количество символов
• value — значение по умолчанию

Какие же есть типы в элемента input? Вот их перечисление:

• text — текстовое поле
• password — поле ввода пароля
• submit — кнопка отправки формы
• reset — кнопка сброса данных в полях ввода
• button — специальная, кастомизированная кнопка для каких либо целей (привязка скриптов)
• image — кнопка в виде заданной картинки
• checkbox — так называемый флажок
• radio — множественный выбор чего-то

Помимо всех указанных кнопок, которые я задал с помощью типов, есть еще такая кнопка, которая задается специальным элементом, который есть парный тег и пишется вот так: <button type=“submit”>Отправить</button> по сути она ни чем не отличается от типа button.

Тип checkbox

Элемент input с типом checkbox отправляет значение по умолчанию on или off, если галочка стоит — on, если нет — off. Но мы может подставить свое значение и задается оно атрибутом value=»12″ и внутри указываем желаемое значение для режима on. Еще есть один атрибут не обязательный, который по умолчанию делает чекбокс уже отмеченным. Здесь маленький нюанс, если имя атрибута и его значение совпадают, мы можем просто указать одно слово без значения.

Тип radio

Тип радио задает возможность множественного выбора, выглядит он по умолчанию, как чекбокс, только с круглой формой. Но здесь должен быть отмечен один элемент как минимум, то есть сделать так, чтобы ничего не было отмечено не получится. Если мы задаем несколько таких вариантов, то здесь нужно использовать одно имя (name) для всех вариантов, а вот значения (value) разные. Ну и мы уже можем с помощью атрибута checked значение активной любому выбору.

Делая небольшое отступление, хочу сделать замечание на использование дополнительного текста в формах и его возможного применения. Итак представим себе, что у нас есть какие-то чекбоксы и рядом с каждым слово, обозначающее его значение, примерно вот так:

Что делать, если мы хотим, чтобы при клике на слово, которое рядом с чекбоксом значение срабатывало? Для этого существует специальный элемент, парный тег и пишется вот так:

В элемент label мы берем наш поясняющий текст, а чекбоксу задаем id, используя специальный атрибут for в элементе label мы указываем к чему он принадлежит. После этого текст, который рядом с чекбоксом реагирует на клики.

Здесь есть еще один интересный момент, этот текст в теге label можно перемещать внутри таблицы куда угодно и все будет работать.

Списки в таблице

Помимо input у нас есть еще интересный элемент, который отвечает за выпадающий список. Задается он следующим элементом: <select name=»books»></select>. Но этого мало, чтобы появился наш выпадающий список, нужно еще этот список создать, точнее его варианты и для этого используется вторая пара тега <option>…</option>, которая и составляет сам список.

 

При таком создании выпадающего списка на сервер будет отправляться значение, которое указанно внутри тега option. Но что делать, если мы в option задаем русские какие-то значения, а отправить нужно латынь? Вот в таких случаях, да и не только в таких пишется для тега option атрибут value с нужным значением для каждого их доступных выборов. И при отправке на сервер будет идти значение указанное в атрибуте value, а не то, что между option.

Если мы хотим задать какому-то из пункту списков выбор по умолчанию, а не первый, тогда пишем внутри option атрибут selected, он имеет такое же значение, как и имя, поэтому достаточно просто написать вот так: <option selected>PHP</option>

Что делать, если мы хотим вместо одного видимого значения сделать несколько, в таком случае нашему элементу select задаем атрибут size в котором указываем значение 2, 3 или любое нужное вам. По умолчанию браузеры показывают size со значением 1.

Помимо видимых значений для выбора указанных через атрибут size мы может еще задать элементу select атрибут позволяющий выбирать несколько значений одновременно. Но понятно, что для этого нужно и область видимости делать побольше с помощью size. Этот атрибут пишется вот так: multiple=»multiple» и как видим значение равно имени атрибута, а значит можно просто написать сокращенно multiple.

И последний важный момент при создании выпадающего списка, это группирование. Как это выглядит и с помощью чего создается, взглянем на пример:

В браузере все это дело выглядит покрасивее, можете сохранить и проверить у себя в браузере.

Другие элементы форм

Элемент textarea

Итак элемент textarea задается для размещения текстового содержания, очень часто мы его наблюдаем во всевозможных социальных сетях и т.д. В нем есть обязательный атрибут name и два дополнительные, не обязательные:

• cols — Указывает количество видимых символов по горизонтали
• rows — количество видимых строк

Файловый input

Мы часто видим такие инпуты во вконтакте или других соц-сетях. Сохраните и посмотрите на результат того, что выходит в окне браузера. Этот элемент плох одной своей стороной, он не поддается оформлению стилевому. Это сделано в целях безопасности, чтобы обезопасить пользователя от разных не хороших замыслов хакеров.

Визуальные украшения формы

Есть у меня задача сделать вот так, как указанно в настройка Windows на скриншоте:

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

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

Дополнительные атрибуты форм

• disabled=“disabled” — запрещает использовать данный элемент в форме
• readonly=“readonly” — присваивается только элементам, которые могут содержать текст, аналог disabled
• tabindex=“1” — переопределяет порядок перехода по элементам формы с помощью Tab
• accesskey=“q” — присвоение горячих клавиш для определенного элемента формы

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

А все тексты в элементы label, это позволит нам в будущем влиять на что угодно и как угодно с помощью стилей. Ведь нет ничего проще задать div класс или id и обращаться ко всем вложенным элементам, которые внутри него.