Материал

Форма HTML для сайта

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

Рассматривая основыные теги HTML мы не можем не затронуть такой важный элемент как формы. Часто  на web-страницах необходима обратная связь. Например, заполнение анкеты на сайте, регистрация, авторизация, комментарии и т.д. Во всех этих случаях пользователь заполняет специальные области (поля формы) на странице, после чего происходит отправка данных на сервер. Для создания обратной связи используются формы. Форма это фрагмент HTML документа предназначенный для ввода информации пользователем.

На рисунке представлена форма регистрации студента на сайте образовательного учреждения.

forma-html

Для создания формы используется контейнер <form></form> с атрибутом action, в котором указывается страница на сервере, которая будет обрабатывать данные переданные формой.

Структура простейшей формы:

<formaction="адрес страницы обработчика формы">
элементы форм…
</form>

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

Структура кнопки:

<input type="submit" name="имя кнопки" value="отображаемое имя">

Итак, для записи практически всех элементов форм используется тэг <input> с атрибутом type. Для создания кнопки, которая сбрасывать все данные с форм используется следующая структура:

<input type="reset" name="имя кнопки" value="отображаемое имя">

Для создания текстового поля (textfield) существует параметр text. При этом используются параметры: name – имя поля; size – для поля в симолах; maxlength – максимально возможное количество символов в поле; value – информация, отображаемая в форме по умолчанию

Пример записи формы с двумя текстовыми полями:

<form action="obrabotka.php">
Введитеимя:<br>
<input type="text" name="name" size=”15” maxlength=”20” value="" ><br>
Введите фамилию:<br>
<input type="text" name="surname" size=”20” maxlength=”25” value="" ><br>
<input type="submit" name="otpravit" value="Отправить">
<input type="reset" name="ochistit" value="Очистить">
</form>

Результат работы формы представлен на рисунке.

forma-html-primer.jpg

В случае, если в текстовое поле необходимо ввести большое количество информации, например, комментарий используется форма текстовой области (textarea),которая создается при помощи тэга <textarea> со следующими атрибутами: name – имя области; cols – количество столбцов области; rows – количество строк; wrap – способ переноса сток (on – переносить строки, off – не переносить строки).

К вышеуказанному коду добавим поле текстовой области:

Комментарий:<br><textarea name="area" cols=”25” rows=”5” wrap=”on”></textarea>

Результат работы кода с текстовой областью представлен на рисунке.

forma-s-textarea





Следующим элементом форм являются списки, позволяющие сделать выбор из представленного множества значений. Создать форму списка позволяют тэги <option> с параметром value, отвечающем за значение элемента и <select> с параметрами name, в котором указывается имя списка, size, отвечающего за число видимых элементов.

Структура записи списка:

<select name="имя списка" size="число видимых элементов"><
 <option value="значениеэлемента">текст</option>
 <option value="значение элемента">текст</option>
 </select>

Для того, чтобы элемент был выделен при загрузке страницы необходимо в тэге <option> дописать атрибут selected. Различные возможности построения элемента списка и его код представлены на рисунке.

teg-select-v-forme

Аналогичным способом выбора являются элементы формы флажок (checkbox) и радиокнопка (radiobutton). Отличие этих элементов состоит в том, что флажок позволяет сделать множественный выбор, а радиокнопка только единичный.

Структура записи флажка и радиокнопки:

Флажок:

<input type="checkbox" name="имя флажка" value="значение">текст

Радиокнопка:

<input type="radio" name="имя радиокнопки" value="значение"> текст

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

forma-checj-box

Еще одним элементом формы является кнопка, задаваемая при помощи атрибута typeтэга <input> со значением button:

<input type="button" name="имя кнопки" value="значение" onclick="действие">

В указанном коде для создания кнопки присутствует параметр onclick, в котором как правило задается код на языке программирования для выполнения того или иного действия при нажатии на эту кнопку:

<input type="button" name="подсказка" value="Помощь" onclick="alert(‘Справка’)"></button>

Для вывода сообщения в специальном окне используется команда на языке jаvascript – aler. Результат работы примера представлен на рисунке.

podskazka

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

<input type="button" name="подсказка" onclick="alert(‘Справка’)"><img src=”изображение.jpg”></button>

При регистрации и входе на сайты используется поле со скрытым тестом, отображаемым в виде звездочек. Это элемент формы password:

<input type="password" name="pass" size=”длинаполя” maxlength=”максимально возможная длина пароля” value="значение по умолчанию" >

forma-parol

Часто регистрация на сайте разбивается на несколько страниц и каждая последующая должна содержать в себе информацию из предыдущей. Для того чтобы скрыть передаваемую информацию используется элемент формы hidden:

<inputtype="hidden" value="значение по умолчанию">

Элемент формы hiddenбудет невидим в окне браузера.

Для загрузки файлов на сервер в формах имеется элемент file. Пример кода для загрузки файлов на сервер представлен ниже:

<input type=”file” size=”длинаполя”>

Итак, в этой теме были рассмотрены элементы форм для создания различных HTMLстраниц, которые вместе с обработчиками сценария на компьютере или сервере позволяют разрабатывать полноценные web-приложения.

Визуальное оформление HTML формы. Bootstrap