|
Plati.ru - Магазин цифровых товаров: пин-коды для игр, интернета и IP-телефонии, электронные книги, программное обеспечение, красивые номера ICQ и многое другое. Зайди и убедись сам! |
Формы в 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 определяет название файла, в который будет отправлен контент формы. Этот файл обычно обрабатывает присланный ему контент.
Ваш логин:
<input type="text" name="user" />
<input type="submit" value="Submit" />
</form>
Как это будет выглядеть в браузере:
Изменением значения атрибута value для элемента submit можно изменить надпись на кнопке. Например, вот так:
<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> |
