От автора: приветствую вас, друзья. Данная статья написана для тех, кто только начал делать свои первые шаги в мире верстки. Сегодня мы поговорим о том, как создать форму на сайте и для чего вообще нужны эти самые формы. Начнем?
Итак, начнем с того, для чего же нужны формы на сайте? Форма на сайте — это основной способ передачи данных от клиента на сервер. Именно поэтому формы есть практически на любом современном сайте. Мы встречаем их сплошь и рядом: форма авторизации, контактная форма регистрации, форма регистрации и другие.
Как видим, формы — вещь нужная. Как же создать форму на сайте. Для этого нужно начать с тега form в HTML, именно тег form дает понять браузеру, что внутри будут идти всевозможные элементы формы (поля формы), которые необходимо отрисовать на странице.
Тег форм имеет целый ряд всевозможных атрибутов. На практике чаще всего вы столкнетесь с тремя из них (другие атрибуты используются редко). Итак, это атрибуты:
action — адрес страницы, на которую должны быть отправлены данные формы;
method — метод отправки данных формы (POST или GET);
enctype — способ кодирования данных формы.
Внутри формы располагаются необходимые поля, список которых достаточно обширен: текстовые поля, текстовые области, выпадающие списки, чекбоксы и т.д. Со всеми ними мы познакомимся в других статьях. Ну а пока давайте создадим простейшую форму обратной связи с тремя полями: имя, email, вопрос и кнопкой отправки данных формы. Итоговый код будет примерно таким:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<form> <p> Имя: <input type="text" name="name"> </p> <p> Email: <input type="email" name="email"> </p> <p> Вопрос: <textarea name="text"></textarea> </p> <p> <button type="submit">Отправить</button> </p> </form> |
В итоге мы получили вот такую вот простенькую форму:
Выглядит непритязательно, но стилизация формы — это уже дело CSS.
Давайте вкратце пройдемся по коду. Итак, мы использовали тег form без атрибутов. Как вы помните, выше я писал, что для тега form часто используются атрибуты action и method. Если их не указать, тогда форма будет работать по умолчанию. Что это значит?
Атрибут action позволяет указать адрес страницы, на которую будет отправлены данные формы. Соответственно, эта страница примет эти данные и обработает их, например, отправит эти данные на email. Для обработки уже необходим язык программирования, например PHP, но это уже другая тема.
Так вот, если атрибут action не используется, тогда данные будут отправлены на текущую страницу. Что касается атрибута method, то он позволяет указать способ передачи данных. По умолчанию используется метод GET, который передает данные через адресную строку (т.н. GET-параметры). Также мы можем указать в качестве метода передачи данных — POST. В отличие от GET, метод POST передает данные в запросе браузера и они не видны пользователю. Чаще всего вы будете использовать именно метод POST.
Теперь относительно полей формы. Для них мы использовали теги input, textarea и button. Тег input с атрибутом type=’text’ создаст обычное текстовое поле. Тег input с типом email аналогичен типу text с той разницей, что браузер перед отправкой проверит, чтобы в поле был введен именно email, в противном случае форма не будет отправлена и браузер покажет ошибку.
Идем дальше. Тег textarea создаст текстовую область. Ну а button отрисует кнопку для отправки данных формы на сервер.
Также для полей мы использовали атрибут name, который позволяет присвоить имя полю. Имя должно быть уникальным для каждого из полей, т.е. в форме не должно быть два поля с одинаковым именем. Имя необходимо для того, чтобы на сервере понимать, из какого поля какие данные пришли.
Как видим, в создании HTML формы нет ничего сложного, все достаточно просто. На этом текущую статью будем завершать. В следующих статьях мы узнаем больше о работе с формами HTML. Ну а если вы уже умеете создавать формы, но пока не умеете работать с ними на сервере, тогда обязательно посмотрите этот урок. На этом все. Удачи!
