Войти
Регистрация

Формы в HTML

Формы в HTML

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

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

Форма это тоже некий контейнер, как и таблица HTML в предыдущей статье, которая содержит в себе элементы формы: поля ввода, текстовые поля, чекбоксы, радиокнопки, выпадающие списки, кнопки отправки формы и ее сброса. Все эти элементы имеют также ряд своих атрибутов.

Создадим форму, написав парный тег <form> и сразу пропишем обязательные атрибуты:

<form method="POST" action="script.php" enctype="multipart/form-data" /></form>

Атрибут method определяет то, каким способом будут отправляться данные формы. Существуют 2 способа: POST и GET. Методом POST отправляются данные скрыто, а методом GET открыто. Например:

http://editcode.ru/script.php?name=Ivan&city=moscow&age=25

Здесь видно, что было отправлено формой несколько данных методом GET, т.е. в адресной строке в конце появились GET-параметры со значениями полей форм. Зачем это нужно и как это работает не относится к основам HTML, это уже больше к PHP. Чаще всего используется метод POST.

Атрибут action указывает путь к файлу с php-скриптом для обработки полученных данных и выполнения над ними последующих операций, но это также из темы PHP.

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

С атрибутами формы все. Перейдем к полям формы. Напишем внутри тега формы <form> следующее:

<label>Ваш логин:</label>
<input type="text" name="login" value="Тут будет логин" />

Парный тег <label> здесь нужен для указания метки поля, т.е. название поля, как Вы поняли. К нему я вернусь в конце статьи и поясню.

Атрибут type указывает на формат вводимых данных. У нас формат текстовый.

Атрибут name устанавливает имя элемента формы. У нас имя login.

Атрибут value содержит значение поля по умолчанию. Можете его даже оставить пустым или совсем убрать.

В следующем примере сменим значение атрибута type с text на password:

<label>Ваш пароль:</label>
<input type="password" name="password" value="Тут будет пароль" />

Рекомендую Вам переписать эти примеры в Ваш файл и посмотреть в браузере, введя любые значения в поля. Вы увидите, что в поле с паролем символы скрыты для безопасности ввода, т.к. мы сменили значение атрибута type на password

Далее у нас пойдет радиокнопка. Это все тот же тег <input>, но уже со значением radio у атрибута type:

<label>Выберите один из пунктов:</label>
<input type="radio" name="radio" value="1"/> Пункт 1
<input type="radio" name="radio" value="2"/> Пункт 2
<input type="radio" name="radio" value="3"/> Пункт 3

Радиокнопки служат для выбора одного из нескольких предложенных вариантов и после отправки формы будет передано значение атрибута value того пункта, который выбран. Вы можете попробовать в браузере это сделать и увидите, что вариант выбора дается один. Почему так происходит? Все дело в атрибуте name, его значение одинаково у всех, значит они объединены в группу по значению этого атрибута. Если Вы сделаете их разными, то они будут независимы друг от друга и можно будет выбрать несколько пунктов, поэтому можно создавать несколько групп радиокнопок, объединенных атрибутом name.

Следующий элемент напротив, дает возможность выбора нескольких вариантов. Меняем значение на checkbox:

<label>Выберите один или несколько вариантов:</label>
<input type="checkbox" name="checkbox1" value="1"/> Вариант 1
<input type="checkbox" name="checkbox2" value="2"/> Вариант 2

Здесь все почти также, только выбрать можно 1 и более вариантов.

Далее элемент отправки файла, а именно:

<label>Выберите файл:</label>
<input type="file" name="myphoto" />

Здесь догадайтесь, что мы изменили... все тот же атрибут type на значение file

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

Следующий элемент формы это textarea . Он служит для ввода большого текста и является парным тегом:

<label>Текст сообщения:</label>
<textarea name="message" rows="10" cols="20" />Тут текст сообщения</textarea>

Здесь атрибут rows задает высоту поля в строках (10 строк), а атрибут cols ширину поля в символах (20 символов), а также задаем имя элемента message, как и в остальных элементах.

И в конце нам нужны кнопки. Они у нас 3 видов:

<input type="button" name="send" value="Кнопка" />

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

<input type="submit" name="send" value="Отправить" />

Здесь атрибут type со значением submit. При нажатии на эту кнопку будет отправлен запрос к файлу в атрибуте action нашей формы для обработки данных из формы.

И напоследок, кнопка сброса всех введенных данных.

<input type="reset" name="reset" value="Сбросить" />

Здесь атрибут type со значением reset, что превращает элемент в кнопку сброса всей введенной информации и выбранных пунктов. Попробуйте сделать это в браузере.

И как я и обещал, поясню, что такое <label>. Этот парный тег призван указывать на метку элемента формы, т.е. на его название, хоть и название можно написать в любом другом теге, но <label> уникален тем, что если в открывающем теге указать атрибут for и в качестве значения указать значение атрибута id какого-либо элемента, то произойдет связь между ними и можно выбрать радиокнопку или чекбокс нажав на <label>. Вот Вам пример:

<label>Выберите один из пунктов:</label>
  <label for="radio1">Пункт 1:</label>
   <input type="radio" name="radio" value="1" id="radio1"/>
  <label for="radio2">Пункт 2:</label>
   <input type="radio" name="radio" value="2" id="radio2"/>
  <label for="radio3">Пункт 3:</label>
   <input type="radio" name="radio" value="3" id="radio3"/>

К каждому элементу <input> мы добавили атрибут id c неким значением и это значение присвоили атрибуту for, тем самым связали метку с радиокнопкой.

Таким образом наша форма выглядит так. Можете поработать с ней, только в атрибуте method укажите значение GET, чтобы наблюдать, какую информацию форма отправляет.

<html>
<body>
<head>
</head>
 <form method="POST" action="script.php" enctype="multipart/form-data" />
 <label>Ваш логин:</label>
   <input type="text" name="login" value="Тут будет логин" />
   <br />
 <label>Ваш пароль:</label>
   <input type="password" name="password" value="Тут будет пароль" />
   <br />
 <label>Выберите один из пунктов:</label>
   <input type="radio" name="radio" value="1"/> Пункт 1
   <input type="radio" name="radio" value="2"/> Пункт 2
   <input type="radio" name="radio" value="3"/> Пункт 3
   <br />
 <label>Выберите один или несколько вариантов:</label>
   <input type="checkbox" name="checkbox1" value="1"/> Вариант 1
   <input type="checkbox" name="checkbox2" value="2"/> Вариант 2
   <br />
 <label>Выберите файл:</label>
   <input type="file" name="myphoto" />
   <br />
 <label>Текст сообщения:</label>
   <textarea name="message" cols="20" rows="10" />Тут текст сообщения</textarea>
   <br />
 <input type="button" name="send" value="Кнопка" />
   <br />
 <input type="submit" name="send" value="Отправить" />
   <br />
 <input type="reset" name="reset" value="Сбросить" />
  <br />
 <;/form>
</body>
</html>

Удачных Вам экспериментов.

С уважением, Самвел Погосов

Рекомендую к изучению мой бесплатный видеокурс по HTML и CSS для начинающих с подробными видеоуроками и заданиями: Перейти к видеокурсу

Комментарии к статье

Бесплатный видеокурс

HTML и CSS для начинающих

Практический и бесплатный курс по основам HTML и CSS для начинающих. С этим курсом Вы сможете изучить базовые понятия верстки и стилей CSS. Курс с практическими уроками и заданиями, все видеоуроки последовательны и увлекательны. Я научу Вас всему, чему научился сам.

Получить курс
Опрос

Для чего Вы изучаете HTML и CSS?