HTML Основы


HTML Расширенный


HTML Примеры


HTML Справка




Формы в HTML


назад вперед

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


Примеры

Текстовое поле

Пример демонстрирует как создать текстовое поле на html-страничке. Пользователь может написать текст в этом поле.

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

Этот пример демонстрирует вставку поля ввода пароля в html-страничке.


Формы

Форма — это поле, которое содержит элементы форм.

Элементы форм — это элементы, которые позволяют пользователю вводить информацию (текстовые поля, выпадающие меню, галочки, выбор нескольких значений и т.д.) в форму.

Форма вставляется с помощью тега <form>.

<form>

*

Элементы, обеспечивающие ввод пользовательской информации

*

</form>


Элемент Input

Наиболее часто используемым тегом форм является тег <input>. Тип ввода информации задается изменением атрибута type. Наиболее часто используемые типы объясняются ниже.

 

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

Текстовые поля используются если вы хотите позволить пользователю написать письмо (в электронной почте), комментарий, числа и т.д.

<form>
Ваше имя:
<input type="text" name="firstname" />
<br />
Ваша фамилия:
<input type="text" name="lastname" />
</form>

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

Ваше имя:
Ваша фамилия:

 

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

 

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

 

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

<form>
<input type="radio" name="sex" value="male" /> Мужчина
<br />
<input type="radio" name="sex" value="female" /> Женщина
</form>

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

Мужчина
Женщина

 

Помните, что может быть выбрано только одно значение из нескольких значений.

 

Множественный выбор

 

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

<form>
У меня есть мотоцикл:
<input type="checkbox" name="vehicle" value="Bike" />
<br />
У меня есть автомобиль:
<input type="checkbox" name="vehicle" value="Car" />
<br />
У меня есть велосипед:
<input type="checkbox" name="vehicle" value="Bicycle" />
</form>

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

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

Атрибут action и кнопка submit (подтверждение)

Когда пользователь нажимает кнопку submit (подтвердить), содержимое формы (введенное пользователем) отправляется на сервер. Атрибут action определяет название файла, в который будет отправлен контент формы. Этот файл обычно обрабатывает присланный ему контент.

<form name="input" action="html_form_submit.asp" method="get">
Ваш логин:
<input type="text" name="user" />
<input type="submit" value="Submit" />
</form>

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

Ваш логин:

 

Изменением значения атрибута value для элемента submit можно изменить надпись на кнопке. Например, вот так:

<form>
<input type="submit" value="Ok">
<input type="submit" value="Да">
<input type="submit" value="Зашибись">
<input type="submit" value="Я согласен">
<input type="submit" value="И так далее">
</form>

И в браузере:


Еще примеры

Множественный выбор

Пример демонстрирует создание форм множественного выбора. Пользователь может выбрать одно или несколько значений.

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

Пример демонстрирует создание формы для выбора одного значения из нескольких.

Простое выпадающее меню

Пример демонстрирует создание простого выпадающего меню. Выпадающее меню — это список значений, каждое из которых можно выбрать.

Еще одно выпадающее меню

Этот пример демонстирует создание выпадающего меню с предварительно выбранным значением.

Текстовое поле

Пример демонстрирует создание текстового поля (многострочное поле для ввода текста). Пользователь может написать текст в этом поле, при этом количество вводимых символов не ограничено.

Создание кнопки

Пример демонстрирует создание кнопки. Текст на кнопке может быть изменен вами.


Теги форм

Тег Описание
<form> Вставка формы пользовательского ввода
<input> Поле ввода
<textarea> Вставка текстового поля
<label> Метка элемента формы для контроля над ним
<fieldset> Набор логически связанных элементов формы
<legend> Заголовок элемента <fieldset>
<select>
Выпадающее меню
<optgroup> Группа элементов выпадающего меню
<option> Отдельный элемент выпадающего меню
<button> Вставка кнопки
<isindex> Устарело. Используйте тег <input>


Поисковой портал Jooble - позволяет в один клик найти любую интересующую вакансию по всему интернету.

Понравилась запись? Сказать "Спасибо" очень просто, поделитесь записью в социальных сетях!


назад вперед

СТАТИСТИКА




ССЫЛКИ


Подпишись на новости сайта