Перейти к содержимому
Наше приложение «Дешевые авиабилеты» в AppGallery >>

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. Вычисления в форме.