Как сделать форму в HTML

Учимся создавать формы в HTML

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

На стороне сервера формы чаще всего обрабатываются с помощью PHP.

Создание формы осуществляется с применением тега <form>, который является парным. А уже внутри него происходит размещение полей формы.

Тег <form> имеет два атрибута, которые являются весьма важными.

Атрибут action. С его помощью указывается адрес или URL, по которому происходит отправка формы.
Атрибут method. С его помощью указывается метод отправки формы.

Вот так это выглядит на практике:

<form action="https://yandex.ru/search/" method="get">
    ...
</form>

Отправка формы, как правило, осуществляется с помощью методов get или post. По умолчанию, когда не задействован атрибут method, будет применяться get.

Суть метода get заключается в отправке данных формы в строке запроса. Это позволяет видеть их в адресной строке браузера. Размещены такие данные после знака вопроса.

Пример выглядит так: https://yandex.ru/search/?text=php

Мы рекомендуем применять метод get, когда речь идет о поисковых формах. Это дает возможность пользователю видеть в строке браузера ссылку на результаты поиска. Что немаловажно, если он хочет с кем-то ими поделиться.

Что же касается метода post, он использует тело HTTP-запроса для отправки данных. Метод актуален в тех случаях, когда нужно передать немало информации, а вот в ссылке на результат работы с информацией необходимости нет. Например, этот метод уместен при редактировании личного профиля на сайте.

Текстовое поле ввода

Многие поля форм создаются с использованием тега input. Это одиночный тег, который имеет два обязательных атрибута:
type - данный атрибут задает тип поля;
name - данный атрибут задает имя поля.

От типа поля зависит его поведение и отображение. Наиболее популярный тип – text, то есть – текстовое поле.

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

Давайте создадим свою простейшую форму, которая будет формировать поисковый запрос в Яндекс:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Форма поиска в Яндексе</title>
</head>
<body>
<form action="https://yandex.ru/search/">
    <input type="text" name="text">
    <input type="submit" value="Найти в Яндексе">
</form>
</body>
</html>

Форма будет выглядеть так:
Форма для поиска в Яндексе

Теперь, когда мы нажмём на кнопку, мы попадём на страницу поиска в Яндексе:
Результат выдачи в Яндексе

А в адресной строке будет следующее:
https://yandex.ru/search/?text=PHP

Таким образом, мы передали содержимое поля с именем text в параметр text на странице поиска в Яндексе.

Более подробно обо всём этом мы поговорим в следующих уроках.

Присоединяйтесь к нам в Twitter, ВКонтакте, Facebook и Google+, а также вступайте в наш чат в Telegram, чтобы не пропустить новые уроки и быть в курсе последних новостей из мира веб-разработки.
Домашнее задание
  • создайте форму, аналогичную той, что описана в уроке
Читайте также
Комментарии


doubledonea
doubledonea

Здравствуйте. Сделал простую форму регистрации https://jsfiddle.net/abybmtkz/. Не понимаю, почему width у .email установилось по всей ширине родителя. Есть предположение, что .email унаследовал ширину родителя. Но ведь тогда и остальные блоки должны были унаследовать, а у них ширина установилась по содержимому. Можете объяснить?)

ivashkevich
ivashkevich

Если для класса email добавите те же свойства, что и остальным:

left: 50%;
margin-left: -25%;

То получите аналогичное отображение. Всё дело в заданных отступах.
https://jsfiddle.net/abybmtkz/1/

nastasya95
nastasya95

Здравствуйте.Объясните пожалуйста, который пишем URL (который в action)? не поняла принцип,откуда он берется и куда должен вести...Пыталась сделать для поиска в гугл

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
  <title>Форма поиска в Гугл</title>
</head>
<body>
<form action="https://www.google.ru/">
<input type="text" name="text">
<input type="submit" value="Поиск">

</form>

</body>
</html>
ivashkevich
ivashkevich

Для этого можно зайти на гугл и вбить любой поисковый запрос. В адресной строке вы получите:
https://www.google.ru/search?q=php
Значит нужно сделать input, у которого name=q. Его значение передастся QUERY-параметр q.

nastasya95
nastasya95

А почему когда я вбиваю в гугл любой поисковой вопрос мне на странице найденного в адресной строке прописывает что то вроде этого

https://www.google.by/search?source=hp&ei=gP1fW92RGoeWa5bkscgC&q=%D0%BE%D1%82%D0%B4%D1%8B%D1%85&oq=%D0%BE%D1%82%D0%B4%D1%8B%D1%85&gs_l=psy-ab.3..0l10.3942.4988.0.6638.5.5.0.0.0.0.125.497.2j3.5.0....0...1..64.psy-ab..0.5.495...0i131k1.0.B8AE4I8MxmM

А name что то вообще обозначает? Это не произвольное имя поля для галочки?

ivashkevich
ivashkevich

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

<input type="text" name="text">

сформирует адресную строку http://адрес/?text=тут_текст_из_поля

а вот

<input type="text" name="q">

при отправке запроса сформирует следующую адресную строку:
http://адрес/?q=тут_текст_из_поля

Dilik
Dilik
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>the mail.ru search form</title>
</head>
<body>
<form action="https://go.mail.ru/search">
<input type="text" name="q">
<input type="submit" value="Найти в MAIL">
</form>
</body>
</html>
romakolor@gmail.com
romakolor@gmail.com

У меня не работает

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Пробная форма</title>
</head>
<body>
<form>
    <input type="text" name="text">
    <input type="submit" value="Найти в Яндексе"
</form>
</body>
</html>
ivashkevich
ivashkevich

У <form> должен быть атрибут action.

romakolor@gmail.com
romakolor@gmail.com

Точно, спасибо.