В одной из предыдущих заметок, я рассказывал об универсальном теге input, с помощью которого можно создать большинство элементов веб-форм. Но, используя лишь эти элементы (текстовое поле, кнопка и.т.д. ) создать полноценную форму не получиться.
Предположим, у нас есть простая форма, которая состоит из двух текстовых полей, в которые пользователь должен ввести свое имя и фамилию.
Имя<br >
<input type="text"><br>
Фамилия<br />
<input type="text" >
Пользователь может заполнить эти поля, но никаких изменений от этого не произойдет. Для того, чтобы браузер начал воспринимать эту форму как единую структуру, нужно произвести два действия:
1 действие. Сообщить браузеру, что эти текстовые поля являются единым целым, одной формой.
Специальный тег, который позволяет это сделать – это тег form. form – это специальный элемент, который позволяет объединить множество элементов формы в единую структуру и сообщает браузеру, чтобы эта структура воспринималась как единое целое.
Используя тег form, мы можем сообщать браузеру, куда конкретно и каким образом нужно отправить данные, которые введены в элементах формы, чтобы они были обработаны специальной программой.
Тег form это что-то вроде контейнера, в котором хранятся элементы формы. Это парный тег. Зоной его действия, между открывающим <form> и закрывающим </form>, определяются элементы, которые будут являться частью формы.
Давайте вернемся к нашему предыдущему примеру и попробуем заключить элементы формы в этот тег:
<form>
Имя<br >
<input type="text" name="name"><br>
Фамилия<br />
<input type="text" name="lastname" >
</form>
Теперь понятно, что эта часть кода является формой.
Если вы просмотрите страницу с этим кодом в браузере, то увидите, что особых изменений на ней не произошло. Сам по себе этот тег никаких визуальных изменений в структуру страницы не вносит.
Но эта форма до сих пор не является рабочей. Хотя два текстовых поля теперь у нас воспринимаются браузером как часть одной формы, но совсем не понятно, куда же все-таки отсылать данные, которые введет в эту форму пользователь. У этой формы отсутствует очень важный, обязательный атрибут.
Смысл использования тега form в специальных атрибутах, которые можно к нему применять.
Давайте посмотрим, что это за атрибуты. В первую очередь, это два самых важных атрибута для веб-форм.
1) action – этот атрибут является обязательным. Т.е. создавать форму без его использования особого смысла не имеет. С его помощью указывается путь к программе (скрипту), которая будет обрабатывать данные введенные в форме.
2) method – этим атрибутом мы указываем метод, с помощью которого данные будут переданы к программе обработчику.
Здесь возможны два варианта GET и POST. Я не буду в этой заметке описывать, чем отличаются эти два метода. Это тема уже другой статьи.
Если не указывать этот атрибут, то по умолчанию будет использован метод GET.
Давайте добавим эти два атрибута к нашей форме:
<form action="http://dimachen.info/papka/script.php" method="post">
Имя<br >
<input type="text"><br>
Фамилия<br />
<input type="text" >
</form>
Вот теперь наша форма уже практически рабочая. Мы указали, куда должны отправляться данные, которые введет пользователь с помощью атрибута action, и указали, каким образом эти данные должны отправляться.
Следующие атрибуты встречаются намного реже, для решения специфичных задач, но я все равно немного расскажу о них.
3) enctype – с помощью этого атрибута можно указать тип содержимого/content type, которое будет отправлено на сервер.
4) accept – задает список разделённых запятыми типов содержимого / content type list, которые будут отправлены на сервер.
4) accept-charset – задает список кодировок текста, которые будут сообщаться программе (скрипту).
С первым действием все, переходим ко второму.
2 действие. Создать элемент управления – кнопку, при нажатии на которую данные бы отправились в программу обработчик.
Хорошо, мы с вами создали веб-форму, но ведь пользователю нужно совершить какое-то действие, чтобы данные, которые он ввел, были отправлены в программу обработчик. Обычно это делается созданием кнопки с атрибутом type="submit".
Все браузеры уже настроены таким образом, что когда пользователь кликает по кнопке с атрибутам type="submit". То автоматически данные, которые введены в форме, будут отправлены по адресу, который задан в атрибуте action, формы.
Давайте прямо сейчас добавим эту кнопку к нашей веб-форме. О том, как создаются кнопки, я рассказывал в предыдущем уроке.
<form action="http://dimachen.info/papka/script.php" method="post">
Имя<br >
-<input type="text"><br>
Фамилия<br />
<input type="text" ><br>
<input type="submit" value="Отправить" >
</form>
Теперь, когда пользователь нажмет на кнопку «Отправить», данные, которые он ввел в текстовые поля, будут отправлены программе-обработчику, которая находится, например, по адресу «http://dimachen.info/papka/script.php».
Только после этих двух действий можно считать, что ваша форма будет рабочей. Как видите, тег form это очень важный элемент, который служит для создания веб-форм. Теперь вы знаете, зачем он нужен и как его использовать.
На сегодня все. До встречи!
Весь цикл заметок про формы:
<input> универсальный тег для создания элементов веб-форм.
Формы в HTML документах. Команды HTML.
Формы в HTML документах. Введение.
Пользователь может заполнить эти поля, но никаких изменений от этого не произойдет. Для того, чтобы браузер начал воспринимать эту форму как единую структуру, нужно произвести два действия:
1 действие. Сообщить браузеру, что эти текстовые поля являются единым целым, одной формой.
Специальный тег, который позволяет это сделать – это тег form. form – это специальный элемент, который позволяет объединить множество элементов формы в единую структуру и сообщает браузеру, чтобы эта структура воспринималась как единое целое.
Используя тег form, мы можем сообщать браузеру, куда конкретно и каким образом нужно отправить данные, которые введены в элементах формы, чтобы они были обработаны специальной программой.
Тег form это что-то вроде контейнера, в котором хранятся элементы формы. Это парный тег. Зоной его действия, между открывающим <form> и закрывающим </form>, определяются элементы, которые будут являться частью формы.
Давайте вернемся к нашему предыдущему примеру и попробуем заключить элементы формы в этот тег:
<form>
Имя<br >
<input type="text" name="name"><br>
Фамилия<br />
<input type="text" name="lastname" >
</form>
