HTML. Урок 4 (формы)



Наконец дошли до самого "вкусного" - общения с пользователем. За это отвечают формы. Как ни странно, тег так и называется

<form></form>

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

<form action="http://xxx.com/yyy.php" method="post"></form>

Методы бывают разные, я указал самый распространенный - post. Другие методы нужны очень, очень редко. Когда они понадобятся, о них вы сами прочитаете в инструкции по html. А параметр "action" указывает на конкретный файл с программой на этом же или любом другом сервере, который ждет данные на входе.

Когда же отсылать данные? За это отвечает специальная кнопка.

<form action="http://xxx.com/yyy.php" method="post">

<input type="submit">

</form>

Если добавить на страницу этот код, то будет вполне рабочая форма, которая выглядит просто как кнопка с надписью, текст которой зависит от браузера. Обычно там слова "отправить" или "отправить запрос". Если нас это не устраивает, можно кнопке добавить параметр с нужным текстом. У всех элементов вида input закрывающего тега нет!

<form action="http://xxx.com/yyy.php" method="post">

<input type="submit" value="здесь какая то мудрая надпись">

</form>

 При ее нажатии мы перейдем на указанную страницу, но никаих данных не было передано. Если какие то данные мы уже знаем и хотим передать при отправке формы, то удобно использовать скрытый элемент формы "hidden". Он не отображается на странице, но у него есть 2 обязательных параметра: "name" и "value". 

<form action="http://xxx.com/yyy.php" method="post">

<input type="hidden" name="familiya" value="Иванов">

 <input type="hidden" name="rodilsya" value="10.12.1999">

  <input type="submit" value="здесь какая то мудрая надпись">

</form>

При переходе на программу она получает 2 значения:

familiya=Иванов

rodilsya=10.12.1999

Если нам нужно дать возможность выбора нескольких значений, то используем элемент чекбокс:

<form action="http://xxx.com/yyy.php" method="post">

<input type="checkbox" name="beer" value="Чешское">

 <input type="checkbox" name="vine" value="Абрау Дюрсо">

 <input type="checkbox" name="food" value="Доширак">

<input type="submit" value="здесь какая то мудрая надпись">

</form>

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

<form action="http://xxx.com/yyy.php" method="post">

<input type="radiobutton" name="beer" value="Чешское">

 <input type="radiobutton" name="beer" value="Волжанин">

 <input type="radiobutton" name="food" value="Балтика">

<input type="submit" value="здесь какая то мудрая надпись">

</form>

Если нам нужно дать возможность выбора только одного варианта из большого количества значений, то используем элемент селект. У него есть открывающий и закрывающий теги. Имя ставится у верхнего тега (select), а значение (value)  у каждого из выбираемых значений (option). То, что видит человек, заключено между открывающим и закрывающим тегами опций, а вот значение может отличаться от показанного.

<form action="http://xxx.com/yyy.php" method="post">

<select name="beer" >

<option value="Id1">Чешское</option>

 <option value="Id2">Волжанин</option>

 <option value="Id3">Балтика</option>

</select>

<input type="submit" value="здесь какая то мудрая надпись">

</form>

Чтобы запросить у пользователя какое то небольшое по размерам текстовое значение, используют тип ввода "текст". Если был указан параметр "value", то этот параметр будет показан в поле до его заполнения.

<form action="http://xxx.com/yyy.php" method="post">

<input type="text" name="city" value="Ваш город?">

 <input type="text" name="street" value="Улица?">

 <input type="text" name="house" value="Номер дома?">

<input type="submit" value="здесь какая то мудрая надпись">

</form>

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

<form action="http://xxx.com/yyy.php" method="post">

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

 <input type="submit" value="здесь какая то мудрая надпись">

</form>

 Для большого текста в несколько строк используют тег текстареа с закрывающим и открывающим тегами. 

<form action="http://xxx.com/yyy.php" method="post">

 <textarea name="LongText">введите здесь какой-нибудь текст</textarea>

 <input type="submit" value="здесь какая то мудрая надпись">

</form>

 Иногда требуется послать какой то файл. Чтобы его выбрать нужно использовать тег файл.

<form action="http://xxx.com/yyy.php" method="post">

 <input type="file" name="MyPhotos">

 <input type="submit" value="здесь какая то мудрая надпись">

</form>

 Если хотите вместо кнопки подтверждения (submit) использовать какую-нибудь картинку, то можно использовать тип поля имейдж. В параметре "src" указываем путь к файлу с картинкой, который может находиться где угодно в инернете или на этом же сервере. 

<form action="http://xxx.com/yyy.php" method="post">

  <input type="image" src="http://xxx.com/123.jpg">

</form>

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

<form action="http://xxx.com/yyy.php" method="post">

 <input type="reset">

 <input type="submit" value="здесь какая то мудрая надпись">

</form>

 На этом общение с пользователями заканчиваем. Новый стандарт HTML5 ввел новые "вкусные" теги для выбора цветов и т.д. Но многие браузеры то или иное не поддерживают, а старые браузеры не знают вообще о html5, а их еще очень много. В ближайшие лет 5 использование таких тегов категорически нежелательно.

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