Урок 11. Формы в HTML. Элемент form

Формы в HTML. Элемент form

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

Рассмотрим некоторые элементы формы:

Элемент input

Элемент ввода (input) — один из наиболее важный элементов формы, используется для ввода информации пользователя. Элемент ввода имеет множество вариаций, которые определяются атрибутом type. Например: текстовое поле (text), пароль (password), URL и др.

Создадим простую форму с просьбой ввести имя пользователя и пароль.

<html>
<head>
</head>
<body>
<form>
<input type="text" name="Имя пользователя"/><br/>
<input type="password" name="Пароль" /><br/>
</form>
</body>
</html>

Атрибут name

В атрибуте name указывается название формы.

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

<html>
<head>
</head>
<body>
<form>
<input type="radio" name="gender" value="male" />Мужской<br/>
<input type="radio" name="gender" value="famale"/>Женский
</form>
</body>
</html>

Тип checkbox

Установив тип checkbox, у пользователя появиться возможность выбрать несколько вариантов:

<html>
<head>
</head>
<body>
<form>
<input type="checkbox" name="gender" value="1" />Мужской<br/>
<input type="checkbox" name="gender" value="2"/>Женский<br/>
</form>
</body>
</html>

Тег input не имеет завершающего тега.

Атрибут action

Атрибут action указывает на веб-страницу которая должна загрузиться после отправки формы пользователем.

<form action="https://coderplace.ru">

После отправки формы, данные будут обработаны на веб-сервере с помощью других языков программирования, к примеру Java или PHP.

При нажатии на кнопку отправки форма отправиться атрибуту action:

<html>
<head>
</head>
<body>
<form action="https://coderplace.ru">
<input type="checkbox" name="gender" value="1" />Мужской<br/>
<input type="checkbox" name="gender" value="2"/>Женский<br/>
<input type="submit" value="отправить" /><br/>
</form>
</body>
</html>