Примеры - попробуй сам
Текстовые поля HTML
Этот пример демонстрирует, как можно создавать текстовые поля на странице HTML. Пользователь может написать текст в текстовое поле.
Поля пароля HTML
Этот пример демонстрирует, как создать поле ввода пароля на странице HTML.
(Вы можете найти больше примеров в нижней части этой страницы)
Формы
Форма это та область, которая может содержать элементы формы.
Элементы формы являются элементами, которые позволяют пользователю вводить информации (например, текстовые поля, TEXTAREA поля, выпадающие меню, радио-кнопки, флажки и т.д.) в форме.
Форма определяется с тегом <form>
|
<form> . <i>поля ввода</i> . </form> |
Ввод
Наиболее распространенная форма тега это тег <input>. Тип ввода указан с типом атрибута. Наиболее часто используемые типы ввода приводятся ниже.
Текстовые поля
Текстовые поля используются, когда вы хотите, чтобы пользователь ввёл буквы, цифры и т.д. в форму.
|
<form> Имя: <input type="text" name="firstname" /> Фамилия: <input type="text" name="lastname" /> </form> |
Как это выглядит в браузере:
Обратите внимание, что сама форма не видна. Также отметим, что в большинстве браузеров, ширина текстового поля составляет 20 символов по умолчанию.
Радио кнопки
Радио кнопки используются, когда вы хотите, чтобы пользователь, мог выбрать один вариант из ограниченного числа вариантов.
|
<form> <input type="radio" name="sex" value="male" /> Мужчина <input type="radio" name="sex" value="female" /> Женщина </form> |
Как это выглядит в браузере:
Обратите внимание, что только однин вариант можно выбрать.
Флажки
Флажки используются, когда вы хотите, чтобы пользователь, чтобы выбрать один или несколько вариантов из ограниченного числа вариантов.
|
<form> У меня есть велосипед: <input type="checkbox" name="vehicle" value="Bike" /> У меня есть автомобиль: <input type="checkbox" name="vehicle" value="Car" /> У меня есть самолет: <input type="checkbox" name="vehicle" value="Airplane" /> </form> |
Как это выглядит в браузере:
Действие формы атрибутов и кнопки "Отправить"
Когда пользователь нажимает на кнопку "Отправить", содержимое формы отсылается на сервер. В атрибуте формы "action" определяется имя файла для передачи содержимого. Этот файл обычно что-то делает с полученными данными.
|
<form name="input" action="http://xhtml.co.il/tryit/html/ru/user.php" method="get"> Имя пользователя: <input type="text" name="user" /> <input type="submit" value="Submit" /> </form> |
Как это выглядит в браузере:
Если вы наберете несколько символов в текстовое поле выше, и нажмите кнопку "Отправить", браузер будет отправить ваш вклад в страницу под названием "user.php". Страница покажет полученный ввод.
Больше примеров
Флажки (Checkboxes) HTML
Этот пример демонстрирует, как создать флажки на странице HTML. Пользователь может выбрать или отменить флажок.
Радио-кнопки (Radio buttons) HTML
Этот пример демонстрирует, как создать радио-кнопки на странице HTML.
Простой выпадающий список (drop down box) HTML
Этот пример демонстрирует, как создать простой раскрывающийся список на странице HTML. Раскрывающееся окно выбора списка.
Другой выпадающий список HTML
Этот пример демонстрирует, как создать простой раскрывающийся список с ранее выбранными значениями.
Текставая область (Textarea)
Этот пример демонстрирует, как создать текстовую область (многострочный текст входного контроля). Пользователь может написать текст в текстовой области. В текстовой области можно писать неограниченное количество символов.
Создание кнопки HTML
Этот пример демонстрирует, как создать кнопки. На кнопке, вы можете определить свой собственный текст.
Рамка вокруг данных HTML
Этот пример демонстрирует, как можно нарисовать границу с надписью вокруг ваших данных.
Примеры с формами
Форма с полями ввода и кнопкой "Отправить" (submit button) HTML
Этот пример демонстрирует, как добавить форму на странице. Форма содержит два поля ввода и кнопку "Отправить".
Форма с флажками (form with checkboxes) HTML
Эта форма содержит три флажка (checkboxes), и кнопку "Отправить" (submit button).
Форма с радио переключателями (form with radio buttons) HTML
Эта форма содержит две радио кнопки и кнопку "Отправить".
Отправить сообщения электронной почты из формы HTML
Этот пример демонстрирует, как отправить электронную почту из формы.
Теги форм (Form Tags)
| Теги | Описание |
|---|---|
| <form> | Определяет форму для ввода данных |
| <input> | Определяет поле ввода |
| <textarea> | Определяет текстовую область (многострочный текст ввода) |
| <label> | Определяет метку для контроля |
| <fieldset> | Определяет FIELDSET |
| <legend> | Определяет заголовок FIELDSET |
| <select> | Определяет список выбора (раскрывающийся список) |
| <optgroup> | Определяет опции группы |
| <option> | Определяет опцию в выпадающем списке |
| <button> | Определяет кнопки |
| <isindex> | Не рекомендуется использовать. Вместо этого используйте <input> |
Была ли эта информация полезной?
