ГРУППА КУРСА
|
Главная >
Учебник HTML >
Формы в HTMLЧто такое формаФорма - это элемент страницы, с помощью которого пользователь может отправить данные на сервер. Примером HTML формы является форма авторизации на сайте. Пользователь вводит логин и пароль, нажимает кнопку, и эти данные отправляются на сервер. Форма никак не участвует в обработке данных, этим занимается программа на сервере. А форма лишь отправляет на него данные. Формы связаны с работой сервера, и при изучении этой темы некоторые вещи могут быть пока непонятны. Но изучить формы всё равно нужно. Ведь это важная чать HTML. Формы есть на большинстве сайтов. И Вам нужно знать, как они работают. Создание формыHTML форма создаётся с помощью тэга <form>. Сам этот тэг не выводит на страницу никаких полей для ввода, кнопок и вообще ничего. Для этого существуют другие тэги. А тэг <form> объединяет в их в одну форму и отправляет данные из них на сервер. Рассмотрим несколько важных атрибутов тэга <form>. Атрибут action указывает файл, который запускается на сервере и получает данные из формы. Значением атрибута является путь к файлу. Атрибут method устанавливает метод запроса. Чаще всего он имеет такие значения: method="get" method="post" Пример HTML формы: +
Форме можно задать имя. Это делается с помощью атрибута name. Имя формы должно быть уникальным. Оно используется для нахождения формы при работе скриптов. Внутри тэга <form> размещаются элементы формы. Элементы формы - это различные поля для ввода, кнопки и другие способы, с помощью которых пользователь вводит информацию. Для создания элементов формы используются разные тэги. Рассмотрим их подробно. Тэг <input>Тэг <input> может выглядеть на странице по-разному в зависимости от типа. В том числе он может создавать разные поля для ввода. Типов тэга <input> достаточно много, поэтому он рассматривается в отдельной теме. А пока мы для примера создадим его на странице. Добавим его внутрь тэга <form>.
Атрибут name очень важен. Имя элемента формы передаётся на сервер вместе со значением. Данные отправляются на сервер в следующем виде: имя = значение Если в приведённом примере пользователь введёт в поле для ввода - Andrey, то на сервер будут отправлены данные в виде: login=Andrey Если элементу формы не задать имя, то данные из этого элемента на сервер отправлены не будут. Тэг <textarea>Тэг <textarea> создаёт многострочное поле для ввода текста. От тэга <input> он отличается тем, что имеет размер в несколько строк. Если вводимый текст не помещается в поле, то у него появляется полоса прокрутки. Добавим <textarea> в форму:
Атрибут name имеет тот же смысл, что и у тэга <input>. Полю для ввода можно задать размеры. Для этого есть атрибуты cols и rows. Они устанавливают ширину и высоту поля в строках. Вместо этого можно использовать CSS. Установим тэгу <textarea> размеры.
Тэг <textarea> является парным. Внутрь него можно пометсить текст, который сразу будет находится в поле для ввода. Пользователь при желании может его удалить.
У тэга <textarea> есть и другие атрибуты. Их Вы можете найти в справочниках. Тэг <select>Тэг <select> создаёт список, в котором пользователь выбирает один из пунктов. Каждый пункт создаётся с помощью тэга <option>. Пример:
У тега <select> есть атрибут name, который используется так же, как у других элементов формы. Имя элемента отправляется в виде данных на сервер. А значение берётся из атрибута value того пункта, который выбрал пользователь. Если в приведённом примере пользователь выберет первый пункт, то на сервер отправятся данные в таком виде: punkt=p1 Если у какого-то пункта списка есть атрибут selected, то этот пункт является выбранным по умолчанию. Никакого значения этому атрибуту устанавливать не нужно, его просто нужно указать в тэге. Если высота списка не указана, то список имеет высоту в одну строку. Высота меняется с помощью атрибута size. При этом внешний вид списка зависит от его высоты. Если список имеет высоту в одну строку, то он имеет вид раскрывающегося списка. Если высота больше одной строки, то список отображается в виде блока. Ширина списка соответствует ширине самого большого пункта. Её также можно изменить с помощью CSS. Изменим высоту списка. Посмотрите, как при этом изменится его внешний вид.
Другие атрибуты тэгов <select> и <option> Вы можете найти в справочниках. Тэг <label>Тэг <label> можно использовать для каких-то пояснений внутри формы. Для примера добавим пояснение к тэгу <input>, который мы создавали ранее.
Но в таком виде это просто текстовый тэг. Основная функция тэга <label> состоит в том, чтобы связывать пояснение с элементом формы. Пользователь может нажать на текст, и это соответствует нажатию на элемент формы. Это используется тогда, когда элемент формы имеет маленький размер и нажимать на него неудобно. Чтобы связать элемент формы с текстом, его нужно поместить внутрь тэга <label>. Изменим 9 строку так, чтобы тэг <input> был связан с пояснением:
Нажмите на странице на слово "Login", поле для ввода окажется в фокусе. Отправка формыЧтобы отправить данные на сервер, пользователь должен нажать на кнопку с типом submit. Для её создания можно добавить в форму тэг <input> и установить ему тип submit. Добавим в форму кнопку отправки данных на сервер:
Атрибут value содержит текст, который отображается на кнопке. Когда пользователь нажимает на кнопку, данные из формы отправляются на сервер. На сервере запускается файл, который указан в атрибуте action тэга <form>. Этот файл получает данные из формы. АвтофокусЛюбому элементу формы можно установить атрибут autofocus. Ему не нужно указывать значение, он просто указывается в тэге. Элемент, которому установлен этот атрибут, оказывается в фокусе после загрузки страницы. Атрибут работает не во всех браузерах. |