HTML HTML5 XHTML ПРИМЕРЫ СПРАВОЧНИК РЕКЛАМА ГОСТЕВАЯ

HTML Урок 16 Формы


« Назад Далее »

HTML Формы используются для различных форм ввода пользовательской информации.


Примеры

Примеры

Создание текстовых полей
Как создать текстовые поля. Пользователь может писать текст в текстовом поле.

Создание поля ввода пароля
Как создать поле для ввода пароля.

(Вы найдете больше примеров внизу этой страницы).


HTML Формы

HTML формы используются для передачи данных на сервер.

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

Тег <form> используется для создания HTML формы:

<form>
.
элементы ввода
.
</form>


HTML Формы - Элемент Ввода

Наиболее важный элемент формы - элемент ввода.

Элемент ввода используется для ввода пользовательской информации.

Элемент ввода может меняться различными способами, в зависимости от атрибута type. Элемент ввода может иметь тип: текстовое поле, флажок, пароль, переключатель, кнопка подтверждения, и др.

Наиболее используемые типы ввода описаны ниже.


Текстовые Поля

<input type="text" /> определяет однострочное текстовое поле ввода, в которое пользователь может вводить текстовую информацию:

<form>
Имя: <input type="text" name="firstname" /><br />
Фамилия: <input type="text" name="lastname" />
</form>

Как HTML код выше выглядит в браузере:

Имя:
Фамилия:

Замечание: Форма сама по себе не видима. Также отметьте что ширина текстового поля по умолчанию равна 20 символов. 


Поле Ввода Пароля

<input type="password" /> определяет поле ввода пароля:

<form>
Пароль: <input type="password" name="pwd" />
</form>

Как HTML код выше выглядит в браузере:

Пароль:

Замечание: Символы в поле ввода пароля маскируются (отображаются как звездочки или кружочки). 


Переключатели

<input type="radio" /> определяет радио кнопку. Радио кнопки позволяют пользователю выбирать ТОЛЬКО ОДИН из ограниченного числа вариантов:

<form>
<input type="radio" name="sex" value="male" /> Мужской<br />
<input type="radio" name="sex" value="female" /> Женский
</form>

Как HTML код выше будет выглядеть в браузере:

Мужской
Женский

Флажки

<input type="checkbox" /> определяет флажок. Флажки позволяют пользователю выбрать ОДНУ или БОЛЕЕ опций из ограниченного числа вариантов.

<form>
<input type="checkbox" name="vehicle" value="bike" /> У меня есть мотоцикл <br />
<input type="checkbox" name="vehicle" value="car" /> У меня есть автомобиль
</form>

Как HTML код выше будет выглядеть в браузере:

У меня есть мотоцикл
У меня есть автомобиль

Кнопка Подтверждения/Отправки

<input type="submit" /> определяет кнопку подтверждения (отправки).

Кнопка подтверждения используется для отправки данных на сервер. Данные отправляются на страницу указанную в атрибуте формы action. Файл указанный в атрибуте action обычно делает что либо с полученными данными:

<form name="input" action="http://Uroki-HTML.ru/html_form_action.php" method="get">
Имя пользователя: <input type="text" name="user" />
<input type="submit" value="Отправить" />
</form>

Как HTML код выше будет выглядеть в браузере:

Имя пользователя:

Если вы напечатаете некоторые символы в текстовом поле сверху и кликните на кнопке "Отправить", браузер пошлет введенные вами данные на страницу "html_form_action.php". Эта страница покажет вам то, что вы ввели.


Примеры

Еще примеры

Переключатели
Как создавать переключатели.

Флажки
Как создавать флажки. Пользователь может выбрать флажок или отменить выбор флажка.

Простой раскрывающийся список
Как создать простой раскрывающийся список.

Раскрывающийся список с предварительно выбранным значением
Как создать раскрывающийся список с предварительно выбранным значением.

Текстовая область
Как создать многострочную область для ввода текста, куда пользователь может ввести неограниченное количество символов.

Создание кнопки
Как создать кнопку.

Примеры

Примеры Форм

Группировка элементов ввода формы
Как создать границу вокруг элементов формы.

Форма с текстовыми полями и кнопкой подтверждения/отправки
Как создать форму с двумя текстовыми полями и кнопкой отправки даных.

Форма с флажками
Как создать форму с двумя флажками и кнопкой отправки даных.

Форма с переключателями
Как создать форму с двумя переключателями и кнопкой отправки даных.

Отправка электронной почты из формы
Как отправлять электронную почту их формы.


HTML Теги Форм

ТегОписание
<form>Определяет форму для ввода пользовательских данных
<input>Определяет элемент ввода
<textarea>Определяет многострочную текстовую область ввода
<label>Определяет метку (подпись) для элемента ввода
<fieldset>Определяет границу вокруг элементов ввода формы
<legend>Определяет заголовок для элемента группировки fieldset
<select>Определяет список выбора (раскрывающийся список)
<optgroup>Определяет группу связанных опций в списке выбора
<option>Определяет опцию в списке выбора
<button>Определяет кнопку



« Назад Далее »
© 2011-2017 Уроки HTML
Рейтинг@Mail.ru