Инструкция, как сделать поле формы обратной связи

Форма обратной связи создаётся минимум двумя языками – HTML и PHP. При желании можно добавить CSS. HTML задаёт границы, ячейки, кнопки, указывает расположение блоков и прочую информацию. Обрабатываться форма будет языком PHP. CSS нужен, чтобы кнопки, ячейки были красивыми и необычными.

В данной статье изучается только HTML, который отвечает за скелет формы.

Тег form

Сама форма создаётся при помощи парного тега «form». Все поля и кнопки желательно ставить внутрь этого тега. На одной странице может находиться несколько форм, но одновременно на сервер отправятся данные только из одной формы. Обязательно задаётся имя формы при помощи атрибута «name», в его значении могут помещаться латинские буквы и цифры. С помощью этого атрибута можно будет ссылаться на форму из различных участков документа.

Обязательно указывается, где будут обрабатываться данные формы с помощью атрибута «action». В нём прописывается адрес и название того PHP-документа, который будет обрабатывать форму. Внутри формы желательно присутствие кнопки с типом «Submit», которая отвечает за отправку данных формы на сервер.

Обязательно поясняется атрибутом «method», как будут обрабатываться данные формы. Это можно сделать двумя способами, для чего указывается одно из двух значений.

• Первый вариант – «post», в этом случае данные пересылаются без отправки их в браузерную строку url.
• Второй – «get», с его помощью данные отсылаются и в документ, и в браузерную строку.

<form action="mailer.php" method="get">
<!--поля формы (о них ниже)-->
<input type="submit" value="Отправить">
 </form>

Тег input

Этим символом задаётся поле ввода, сам по себе он создаёт небольшое поле 10 на 50 пикселей. Обязательным атрибутом является «type», который указывает на тип поля ввода и на то, что будет в нём прописываться.

Наиболее распространённые значения следующие:

• «data» – дата;
• «text» – простой текст;
• «url» – адрес страницы в интернете;
• «password» – поле с паролем;
• «masseng» – сообщение;
• «email» – адрес электронной почты;
• «radio» – переключатель с выбором из нескольких элементов, из которых можно включить только один;
• «checkbox» – выбор из группы элементов, где можно отметить несколько вариантов с помощью флажков;
• «button» – создаёт кнопку, которая используется языком JavaScript, то есть без перезагрузки страницы
• «submit» – создаёт кнопку, которая используется языком php, то есть с перезагрузкой страницы

Атрибутом «value» заполняется поле ввода временными подсказками, который могут давать пользователю подсказки, как нужно заполнить поле. Если поле ввода является кнопкой, то в «value» пишется название, которое будет отображаться в виде текста на самой кнопке.

Атрибут «placeholder» похож на предыдущий, только в этом случае подсказка в поле исчезает, стоит только навести мышку. Элемент «required» интересен тем, что делает поле обязательным для заполнения, он указывается так:

<input type="text" required/>

Атрибут «name» является обязательным, им задаётся имя поля ввода, к которому позже можно будет ссылаться. Атрибутом «size» указывается ширина поля, в качестве единиц измерения используются буквы шрифта, поэтому при изменении его стиля ширина поля тоже будет меняться. По умолчанию стоит значение 20.

<input type="text" size="40" required>

Тег textarea

В отличие от «input» тег «textarea» является парным. Также важным отличием является возможность задавать различные характеристики поля. Как и в предыдущих случаях, здесь тоже есть атрибут «name» – единственный из обязательных. Отличием является то, что в теге «textarea» не используется атрибут «type», так как этот тег применяется только для отправки текстовых сообщений.

Атрибутом «rows» указывается высота поля, а «cols» задаёт его ширину. Оба атрибута используют специфические единицы измерения – буквы шрифта. Поэтому каждая единица больше пикселя в 10 раз (в зависимости от стиля и размера шрифта). Атрибутом «placeholder» создаётся подсказка в поле, которая исчезает при наведении мышки.

<textarea name="comment" cols="40" rows="3"></textarea>

Тег label

Перед полем ввода или за ним обычно пишутся просьбы типа: «Укажите своё имя». Эти надписи лучше делать в специальном теге «label». Он устанавливает связь между надписью и полем ввода, также делает возможным установку горячих клавиш на клавиатуре.

Самым распространённым атрибутом является «for», в нём указывается имя, на которое можно будет ссылаться, в том числе в документах php и css. Например, в теге «input» можно будет с помощью атрибута «id» сослаться на имя тега «label». В результате при наведении мышки на поле строчка рядом с ним будет реагировать.

<input type="text" id="name"><label for="name">Введите свое имя</label>

Тег select

Он создаёт форму выбора из нескольких пунктов. При этом тег отвечает только за создание самой формы, за количество и названия пунктов отвечает тег «option». Важнейшим атрибутом является «multiple», который указывает на то, что список элементов нужно отображать как реестр множественного выбора. Также в форме выбора используется атрибут «name» для обозначения имени.

Количество пунктов, которые отображаются на странице, задаётся атрибутом «size». Обратите внимание, что его значение указывает на количество одновременно отображаемых элементов в форме, а не их общее количество. Если «size» равен 1, а элементов в списке больше, то форма выбора превращается в «карусель».

<input type="text" id="name"><label for="name">Введите свое имя</label>

Тег option

Является частью формы выбора, парный, используется внутри тега «select» (как тег «li» в списках). Внутрь него вставляется фраза, которая отображается на странице в качестве пункта выбора.

В нём используется несколько атрибутов:

• «disabled» – элемент запрещает выбрать пункт, чтобы тот оставался в списке в виде заголовка;
• «selected» – блок с таким элементом становится пунктом по умолчанию, на случай если пользователь не будет делать выбора;
• «value» – обязательный атрибут, в нём указывает значение, которое будет отправляться на сервер.

<form action="mailer.php" method="get">
   <select size="3" multiple>
     <option disabled>Выберите свой город</option>
     <option value="Москва">Москва</option>
     <option selected value="СПб">СПб</option>
     <option value="Сыктывкар">Сыктывкар</option>
   </select>
   <input type="submit" value="Отправить">
</form>

Тег button

Он формирует различные типы кнопок. Отличием его от «input» являются расширенные возможности, ведь к нему применяются различные стили CSS. С их помощью можно создавать кнопки различного цвета, размера, формы. Также можно делать кнопку в виде картинки.

Распространённые атрибуты такие:

• «name» – создаёт уникальное имя кнопки, которое можно использовать в дальнейшем;
• «type» – указывает тип кнопки, для отправки данных на сервер необходимо прописать значение «submit»;
• «value» – значение, которое будет отправляться на сервер для обработки.

<form action="mailer.php" method="get">
<!--поля формы-->
<button src="{путь к картинке для кнопки}" style="color:black;">Отправить</button>
</form>