Элементы формы

Большинство элементов добавляется в форму с помощью элемента <input>. Назначение и внешний вид элемента <input> меняются в зависимости от значения атрибута type.

Элемент <textarea> (текстовая область)

Для создания больших текстовых полей применяется элемент <textarea>, который в отличие от других элементов формы не является пустым, а следовательно, для него должны быть указаны открывающий и закрывающий теги. Текст, вводимый по умолчанию, находится между открывающим и закрывающим тегами. Размеры поля устанавливаются с помощью атрибутов cols и rows.
cols — число столбцов видимого текста:

<textarea name="pole" cols="20">

rows — число строк видимого текста:

<textarea name="pole" cols="20" rows="15">

При этом, если пользователю потребуется ввести в текстовую область больше строк текста, чем указано с помощью атрибута rows, в текстовой области появится вертикальная прокрутка.
При разработке форм для новых проектов используйте правила CSS для установки ширины и высоты текстовой области <textarea>. Однако при просмотре исходного кода сайтов вы еще часто можете встретить атрибуты cols и rows.
При необходимости можно запретить пользователю изменять текст в текстовом поле, например, если поле используется для представления какого-нибудь договора. Такой запрет вводится с помощью атрибута readonly.
В следующем примере представлен вариант создания больших текстовых полей. Первое поле предназначено только для чтения, а во второе поле можно ввести текст:

Пример: Текстовая область (textarea)

Ознакомтесь с соглашеием:

Ваше мнение о этом соглашении:

Раскрывающийся список (select)

Элемент <select> создает на веб-странице раскрывающийся список (также называемый раскрывающимся или выпадающим меню), позволяющий выбрать одно значение из множества возможных.
Как и в рассмотренных других элементах формы, элементу <select> назначается уникальное имя, с помощью атрибута name. Элемент <select> работает в паре с элементом <option>, создающим меню. Элемент <option> задается для каждого пункта меню. Текст, расположенный между тегами <option> и </option>, будет выведен в окне браузера как пункт раскрывающегося списка.
Атрибут value используется в каждом элементе <option> для установки значения, которое будет отправлено на сервер вместе с именем выбранного элемента. Указав для элемента <option> атрибут selected, вы сделаете его значением по умолчанию для данного списка. При загрузке страницы такие элементы будут выделены. Если атрибут selected не установлен, то при загрузке страницы будет отображен первый вариант ответа из созданного списка. Если пользователь не выберет другой пункт списка, то на сервер будет отправлен пункт, отмеченный атрибутом selected по умолчанию:

Пример: Раскрывающийся список (select)

Выберите вариант

Прокручиваемые списки

По умолчанию с помощью тега <select> создается раскрывающийся список, в котором изначально видно только одно значение. Для создания прокручиваемого списка укажите число видимых строк, введя соответствующее значение атрибута size. Если количество элементов списка превышает значение, указанное в атрибуте size, справа появляется полоса прокрутки. Несмотря на то, что атрибут size позволяет отобразить сразу несколько пунктов списка, посетитель может выбрать из списка по-прежнему только один пункт.
Чтобы посетитель мог выбрать из списка одновременно несколько элементов (с помощью клавиши Shift или Ctrl), нужно использовать атрибут multiple. Как и в случае с раскрывающимся списком, указав в элементе <option> атрибут selected, вы сделаете его значением по умолчанию. Если для тега <select> или для <option> установить уже известный вам атрибут disabled, то в первом случае становится отключенным весь список, а во втором — только отдельный пункт списка.
Пример прокручиваемого списка, в котором выбраны сразу несколько элементов:

Пример: Прокручиваемый список

Выберите вариант

Группировка пунктов списка (optgroup)

Если в списке находится большое количество пунктов, то посетителю довольно сложно найти нужный пункт. В этом случае можно воспользоваться элементом <optgroup>, предназначенным для создания смысловых групп пунктов списка. Элементы <option> помещаются внутрь контейнера <optgroup>, а заголовок группы указывается в атрибуте label.
Пример группировки пунктов списка с заголовками:

Пример: Создание списка с заголовками

Желаемая работа (можно выбрать несколько):

Элемент <buttоn>

В отличие от кнопок отправки данных и сброса, в самой кнопке Ьuttоn нет встроенных функций. Благодаря элементу <Ьuttоn> можно сочетать на кнопке текст и изображение, располагая их внутри контейнера <button>.
В следующем примере на кнопке отображается содержимое элемента <button> — текст и изображение:

Пример: Использование кнопки <button>

Добавить email в список:

add Добавить

HTML5 Элемент <datalist>

Элемент <datalist> позволяют предоставить пользователю несколько вариантов на выбор, когда он начинает вводить значение в соответствующем поле. Но если ни один из них не подходит, пользователь может ввести собственный текст. Значение, заданное для атрибута list (planet), аналогично идентификатору id элемента <datalist>. Это позволяет ассоциировать <datalist> с соответствующим полем ввода:

Пример: Использование элемента <datalist>

Выбор планеты:

Метки элементов формы (label)

У каждого элемента формы может быть своя пояснительная надпись, или метка, создаваемая при помощи элемента <label> и повышающая доступность, создавая четкие семантические связи между компонентами формы.
Использование элемента <label> при работе с переключателями и флажками — самый распространенный вариант, однако это не ограничение. С таким же успехом можно связать текст с любым элементом формы, и при щелчке кнопкой мыши на тексте связанный элемент автоматически берется в фокус. Связывание текста с элементом формы осуществляется просто: присваиваете атрибуту for элемента <label> значение такое же, как значение атрибута id у элемента, с которым связан <label>. Соответствие значений атрибутов for и id связывает два элемента вместе, что позволяет пользователям нажать на <label> и передать фокус нужному полю формы:

<input type="checkbox" name="form_checkbox" value="1" id="id_checkbox">
<label for="id_checkbox">Наша метка</label>

Использование элемента <label> для создания меток предпочтительнее обычного текста. В первую очередь из-за удобства для конечного пользователя, ведь при применении элемента <label> установить/снять флажок можно не только щелчком на поле флажка, но и на его метке — пояснительном тексте:

Пример: Использование элемента <label>


Пол :

Элементы формы

ЭлементОписание
<form>Устанавливает форму на веб-странице
<input>Создает различные элементы формы (текстовые поля, кнопки, переключатели и т.д.) в зависимости от значения атрибута type
<textarea>Создает многострочное текстовое поле
<fieldset>Группирует элементы формы. Может также содержать внутри себя элемент legend с условными обозначениями элементов формы, составляющих логическую группу
<button>Многофункциональная кнопка
<label>Устанавливает связь между определенной меткой и элементом формы (input, select, textarea)
<legend>Применяется для создания заголовка группы элементов формы, которая определяется с помощью тега fieldset
<optgroup>Представляет собой контейнер, внутри которо-го располагаются теги option, объединенные в одну группу
<option>Определяет отдельные пункты списка, созда-ваемого с помощью контейнера select
<select>Позволяет создать элемент интерфейса в виде раскрывающегося или прокручиваемого списка
<datalist>Позволяет предоставить раскрывающийся список с предложенными значениями для любого типа поля ввода

Задачи


  • Многострочное текстовое поле

    Создайте многострочное текстовое поле, присвойте ему имя name="pole", а также установите запрет на ввод текста в данное поле пользователем.

    Задача HTML:

    Реши сам »
    Многострочное текстовое поле:
    HTML-код: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <form action=""> <p>Многострочное текстовое поле:</p> ... </form> </body>
    </html>
  • Подсказка в поле ввода текста

    Дополните HTML-код, чтобы в результате получилась форма, приведенная в задании. Когда пользователь начинает вводить значение в поле ввода, ему предоставляется несколько вариантов на выбор: "Среднее", "Среднее специальное" и "Высшее".

    Задача HTML:

    Реши сам »

    Ваше образование:

    HTML-код: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <form action=""> <p>Ваше образование: <input type="text" list="teach" name="education"> ... </form> </body>
    </html>
  • Ниспадающее меню

    В задании представлена форма имеющая вид ниспадающего меню с перечнем профессий: "Учитель", "Слecapь", "Дизайнер", "Водитель", "Aктep". Дополните HTML-код, чтобы в результате получилась такая же форма. Присвойте имя списку name="profession", а значения пунктам списка: "Теасher", "Technic", "Designer", "Driver" и "Actor".

    Задача HTML:

    Реши сам »
    Ваша профессия?
    HTML-код: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <form action=""> <p>Ваша профессия?</p> ... </form> </body>
    </html>
  • Многофункциональная кнопка

    Доработайте HTML-код так, чтобы в результате получилась кнопка с изображением: "Star.png" и надписью - "Звезда".

    Задача HTML:

    Реши сам »
    HTML-код: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <button> Звезда </button> </body>
    </html>





Профессия‌ ‌веб-разработчик‌
Веб-разработчик с нуля‌
Старт в программировании‌
Курс HTML/CSS‌
Школа фриланса
Курс Верстальщик 2020 - HTML 5, CSS‌
Профессия‌ тестировщик‌