HTML. Форма и элементы управления

Форма html и ее основные элементы управления (ввода), отображение формы и элементов ввода на веб-странице, применение отдельных атрибутов. Примеры кода.

Для проведения тестов с отображением элементов управления html-формы создайте файл test.html. Элементы формы описываются тегами, внутри которых могут быть атрибуты. Список основных атрибутов представлен в статье HTML. Элемент формы в параграфе «Атрибуты элементов управления».

Тег <input> без атрибутов:

Тег <input> с атрибутами type, name, size и value:

Элемент <form>

Элемент <form> используется для создания html-формы, предназначенной для ввода пользовательских данных. Он представляет из себя контейнер для других элементов управления формы (элементов ввода), таких как: метки, текстовые поля, флажки, переключатели, кнопки и т.д.

В отличие от элементов управления пользовательской формы VBA Excel, элементы ввода html-формы могут существовать вне формы. Это означает, что элементы управления формы html, не обязательно должны быть расположены внутри контейнера <form>.

Элемент <label>

<label> — это элемент управления html-формы, представляющий из себя метку (надпись).

Пример кода для отображения на веб-странице элемента формы <label>:

Результат:

Элемент <input>

<input> — это элемент управления html-формы, который отображает объект, указанный в атрибуте type: button (кнопка), checkbox (флажок), color (палитра), date (календарь), text (текстовое поле) и другие. По умолчанию отображается текстовое поле.

Пример кода для отображения на веб-странице элемента формы <input>:

Результат:






Внешний вид элементов управления формы в файле test.html будет другим, так как здесь свои коррективы привносит WordPress.

Элемент <button>

<button> — это элемент управления html-формы, представляющий из себя кнопку.

Элемент <button> появился в html позже элемента <input> и его синтаксис немного отличается от кнопки <input> — название кнопки пишется между открывающим и закрывающим тегами <button>Имя кнопки</button>, а не в атрибуте value, как у кнопки <input>. Опять же, чтобы в элементе <button> работал атрибут onclick, все-равно необходимо указать атрибут type="button".

Пример кода для отображения на веб-странице элемента формы <button>:

Результат:

Элемент <select>

<select> — это элемент управления html-формы, представляющий из себя раскрывающийся список.

Пример кода для отображения на веб-странице элемента формы <select>:

Результат:


По умолчанию в раскрывающемся списке выбран первый элемент. Чтобы задать первоначальный выбор другому элементу, следует к параметру <option> добавить атрибут selected, например:

Элемент <datalist>

<datalist> — это элемент управления html-формы, представляющий из себя раскрывающийся список для текстового поля элемента <input> (для элемента <input> по умолчанию атрибут type="button").

Пример кода для отображения на веб-странице элемента формы <datalist>:

Атрибут list элемента <input> должен ссылаться на атрибут id элемента <datalist>. Атрибут placeholder определяет подсказку.

Результат:



После выбора одной из опций, список начинает открываться только с этой выбранной опцией. Чтобы список восстановился, выбранное значение необходимо удалить. Текстовое поле со списком можно заполнять и редактировать вручную.

Элемент <textarea>

<textarea> — это элемент управления html-формы, представляющий из себя многострочное текстовое поле.

Пример кода для отображения на веб-странице элемента формы <textarea>:

Атрибут rows задает высоту элемента <textarea> по количеству видимых строк в текстовой области. Если строк больше, появляется полоса прокрутки.

Атрибут cols определяет ширину элемента <textarea> по количеству умещающихся в строке символов моноширинного шрифта. На ширину влияет заданный размер шрифта. Если строка содержит большее количество символов, чем указано, не уместившаяся часть строки переносится на новую строку.

Результат:


Элемент <fieldset>

<fieldset> — это элемент управления html-формы, представляющий из себя контейнер (рамку) для группы связанных элементов (данных).

Элемент формы <legend> задает заголовок для элемента <fieldset>. Для просмотра результата вставьте код в файл test.html и откройте его в браузере.

Элемент <output>

<output> — это элемент управления html-формы, использующийся для отображения результата вычислений.

Подробнее об элементе управления <output> в статье HTML. Вычисления в форме.

Добавить комментарий

Ваш комментарий будет опубликован после прохождения обязательной модерации. Исходящие ссылки не допускаются. Время модерации составит от нескольких минут до нескольких часов в зависимости от времени суток и занятости модератора.