Формы элементы html: Элементы форм — Учебник HTML — Schoolsw3.com

Leave a Comment / Html / By /

Элементы формы HTML уроки для начинающих академия

HTML5CSS.ru

ЛУЧШИЙ САЙТ ДЛЯ РАЗРАБОТЧИКОВ

❮ Назад Дальше ❯

В этой главе описаны все элементы HTML-формы.

Элемент <input>

Наиболее важным элементом формы является элемент <input>.

Элемент <input> может отображаться несколькими способами в зависимости от атрибута type.

Пример

<input name=»firstname» type=»text»>

Если атрибут type опущен, поле ввода получает тип по умолчанию: «Text».

Все различные типы входных данных рассматриваются в следующей главе.

Элемент <select>

<select>элемент определяет раскрывающийся список:

Пример

<select name=»cars»>
  <option value=»volvo»>Volvo</option>
  <option value=»saab»>Saab</option>
  <option value=»fiat»>Fiat</option>
  <option value=»audi»>Audi</option>
</select>

Элементы <option> определяют параметр, который может быть выбран.

По умолчанию выбирается первый элемент в раскрывающемся списке.

Чтобы определить предварительно выбранный параметр, добавьте атрибут selected к параметру:

Пример

<option value=»fiat» selected>Fiat</option>

Видимые значения:

Используйте атрибут size для указания количества видимых значений:

Пример

<select name=»cars» size=»3″>
  <option value=»volvo»>Volvo</option>
  <option value=»saab»>Saab</option>
  <option value=»fiat»>Fiat</option>
  <option value=»audi»>Audi</option>

</select>

Разрешить множественный выбор:

Используйте атрибут multiple, чтобы позволить пользователю выбрать более одного значения:

Пример

<select name=»cars» size=»4″ multiple>
  <option value=»volvo»>Volvo</option>
  <option value=»saab»>Saab</option>
  <option value=»fiat»>Fiat</option>
  <option value=»audi»>Audi</option>
</select>

Элемент <textarea>

<textarea> элемент определяет многострочное поле ввода (область текста):

Пример

<textarea name=»message» rows=»10″ cols=»30″>
Кошка играла в саду.
</textarea>

Атрибут rows указывает видимое число строк в текстовой области.

Атрибут cols определяет видимую ширину текстовой области.

Таким образом, HTML-код выше будет отображаться в браузере:

Кошка играла в саду.

Можно также определить размер текстовой области с помощью CSS:

Пример

<textarea name=»message» style=»width:200px; height:600px»>
Кошка играла в саду.
</textarea>

Элемент <Button>

<button> элемент определяет нажатую кнопку:

Example

<button type=»button» onclick=»alert(‘Hello World!’)»>Click Me!</button>

Click Me!

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

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

Для проведения тестов с отображением элементов управления html-формы создайте файл test.

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

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

<input>

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

<input type=»text» name=»a» size=»6″ value=»0″>

Элемент <form>

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

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

Элемент <label>

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

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

<form>

<label>Моя первая метка</label>

</form>

Результат:

Моя первая метка

Элемент <input>

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

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

<form>

<label>Элемент input по умолчанию:</label> <input><br><br>

<label>Элемент input с type=»text»:</label> <input type=»text»><br><br>

<label>Элемент input с type=»button»:</label> <input type=»button» value=»Это кнопка»>

</form>

Результат:

Элемент input по умолчанию:

Элемент input с type=»text»:


Элемент input с type=»button»:

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

Элемент <button>

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

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

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

<form>

<label>Элемент button:</label><button type=»button»>Нажмите меня!</button>

</form>

Результат:

Элемент button:

Элемент <select>

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

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

1

2

3

4

5

6

7

8

9

10

<form>

<label>Выберите фрукт:</label>

<select>

<option>Апельсин</option>

<option>Гранат</option>

<option>Груша</option>

<option>Мандарин</option>

<option>Яблоко</option>

</select>

</form>

Результат:

Выберите фрукт: АпельсинГранатГрушаМандаринЯблоко

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

<option selected>Груша</option>

Элемент <datalist>

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

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

1

2

3

4

5

6

7

8

9

10

11

<form>

<label>Выберите овощ:</label>

<input list=»list1″ placeholder=»Раскройте список»>

<datalist>

<option value=»Огурец»>

<option value=»Петрушка»>

<option value=»Свекла»>

<option value=»Томат»>

<option value=»Тыква»>

</datalist>

</form>

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

Результат:

Выберите овощ:


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

Элемент <textarea>

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

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

<form>

<textarea rows=»7″ cols=»40″>

Материал из Википедии: «Дарвинизм — по имени английского натуралиста Чарльза Дарвина — в узком смысле — направление эволюционной мысли, приверженцы которого согласны с основными идеями Дарвина в вопросе эволюции (современная их форма, порой с существенным переосмыслением некоторых аспектов представлена в синтетической теории эволюции), согласно которым главным (хотя и не единственным) фактором эволюции является естественный отбор.»

</textarea>

</form>

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

Если строк больше, появляется полоса прокрутки.

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

Результат:

Материал из Википедии: «Дарвинизм — по имени английского натуралиста Чарльза Дарвина — в узком смысле — направление эволюционной мысли, приверженцы которого согласны с основными идеями Дарвина в вопросе эволюции (современная их форма, порой с существенным переосмыслением некоторых аспектов представлена в синтетической теории эволюции), согласно которым главным (хотя и не единственным) фактором эволюции является естественный отбор.»

Элемент <fieldset>

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

1

2

3

4

5

6

7

8

9

10

11

<form>

<fieldset>

<legend>Работник</legend><br>

<label>Имя:</label>

<input type=»text» value=»Иван»><br><br>

<label>Фамилия:</label>

<input type=»text» value=»Иванов»><br><br>

<label>Должность:</label>

<input type=»text» value=»Главный инженер»><br><br>

</fieldset>

</form>

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

Элемент <output>

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

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

атрибутов HTML: отн. — HTML: Язык гипертекстовой разметки

Атрибут rel определяет связь между связанным ресурсом и текущим документом. Действителен для , , и

, поддерживаемые значения зависят от элемента, для которого найден атрибут.

Тип отношений задается значением атрибута rel , который, если он присутствует, должен иметь значение, представляющее собой неупорядоченный набор уникальных ключевых слов, разделенных пробелами. В отличие от имя класса , которое не выражает семантику, атрибут rel должен выражать токены, семантически допустимые как для машин, так и для людей. Текущие реестры для возможных значений атрибута rel — это реестр отношений ссылок IANA, HTML Living Standard и свободно редактируемая страница с существующими значениями в вики-микроформатах, предложенная Living Standard. Если используется атрибут rel , отсутствующий в одном из трех вышеперечисленных источников, некоторые средства проверки HTML (например, служба проверки разметки W3C) выдадут предупреждение.

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

Атрибут rel относится к элементам , , и , но некоторые значения относятся только к подмножеству этих элементов. Как и все значения атрибутов ключевых слов HTML, эти значения нечувствительны к регистру.

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

альтернативный

Указывает альтернативное представление текущего документа. Допустимо для <ссылка> , и <область> , значение зависит от значений других атрибутов.

Примечание: Устаревший rev="made" рассматривается как отн = "альтернативный"

автор

Указывает автора текущего документа или статьи. Релевантно для элементов , и , ключевое слово author создает гиперссылку. С и указывает, что связанный документ (или mailto: ) предоставляет информацию об авторе ближайших <статья> предок, если он есть, иначе весь документ. Для он представляет автора всего документа.

закладка

Относится к значению атрибута rel для элементов и , закладка предоставляет постоянную ссылку для раздела предка, который является ближайшим предком

канонический

Действителен для , он определяет предпочтительный URL-адрес для текущего документа, что полезно для поисковых систем.

предварительная выборка DNS

Актуально для элемента как в и , он указывает браузеру заранее выполнить разрешение DNS для источника целевого ресурса. Полезно для ресурсов, которые, вероятно, потребуются пользователю, это помогает уменьшить задержку и тем самым повысить производительность, когда пользователь обращается к ресурсам, поскольку браузер упреждающе выполняет разрешение DNS для источника указанного ресурса. См. описание dns-prefetch в подсказках ресурсов.

внешний

Относится к , и , указывает, что указанный документ не является частью текущего сайта. Это можно использовать с селекторами атрибутов для оформления внешних ссылок таким образом, чтобы они указывали пользователю, что он покинет текущий сайт.

помощь

Относится к <форма> , <ссылка> , и <область> , ключевое слово help указывает, что ссылка на содержимое предоставляет контекстно-зависимую справку, предоставляя информацию для родительского элемента, определяющего гиперссылку, и его дочерних элементов. При использовании внутри <ссылка> справка предназначена для всего документа. При включении с и <область> и поддержке курсор по умолчанию будет help вместо указателя .

значок

Действителен с <ссылка> , связанный ресурс представляет собой значок, ресурс для представления страницы в пользовательском интерфейсе для текущего документа.

Наиболее распространенное использование значка — это фавикон:

.
 <ссылка rel="icon" href="favicon.ico" />

Если имеется несколько s, браузер использует их медиа атрибут, тип и размеры атрибутов, чтобы выбрать наиболее подходящий значок. Если несколько значков одинаково подходят, используется последний из них. Если впоследствии наиболее подходящий значок оказывается неподходящим, например, из-за того, что он использует неподдерживаемый формат, браузер переходит к следующему наиболее подходящему и так далее.

Примечание: До Firefox 83 атрибут crossorigin не поддерживался для rel="icon" , есть также открытая проблема для Chrome.

Примечание. iOS от Apple не использует этот тип ссылки, а также атрибут размеров , как это делают другие мобильные браузеры, для выбора значка веб-страницы для веб-клипа или начального заполнителя. Вместо этого он использует нестандартные apple-touch-icon и apple-touch-startup-image соответственно.

Примечание: Тип ссылки ярлык часто встречается перед значком , но этот тип ссылки не соответствует требованиям, игнорируется и веб-авторы не должны больше его использовать .

лицензия

Действительно для элементов , , , , значение license указывает, что гиперссылка ведет на документ, описывающий лицензионную информацию; что основное содержание текущего документа защищено лицензией на авторское право, описанной в документе, на который делается ссылка. Если не внутри , стандарт не различает гиперссылку, относящуюся к определенной части документа или к документу в целом. Об этом могут свидетельствовать только данные на странице.

 <ссылка rel="license" href="#license" />

Примечание: Хотя синоним авторское право распознается, он неверен, и его следует избегать.

манифест

Манифест веб-приложения. Требуется использование протокола CORS для выборки из разных источников.

модуль предварительной загрузки

Полезно для повышения производительности и имеет отношение к в любом месте документа, установка rel="modulepreload" указывает браузеру упреждающе загружать скрипт (и зависимости) и сохранять его в карте модуля документа для дальнейшего использования. оценка. Ссылки modulepreload могут гарантировать, что сетевая выборка будет выполнена с готовым (но не оцененным) модулем в карте модуля до того, как он обязательно понадобится. См. также типы ссылок: предварительная загрузка модуля .

следующий

Относится к , , и , значения next указывают, что текущий документ является частью серии и что следующий документ в серии является ссылочным документом. При включении в браузеры могут предположить, что документ будет выбран следующим, и рассматривать его как подсказку ресурса.

nofollow

Относится к , и , ключевое слово nofollow указывает поисковым роботам игнорировать отношения ссылок. Отношение nofollow может указывать на то, что владелец текущего документа не поддерживает указанный документ. Его часто включают оптимизаторы поисковых систем, делая вид, что их фермы ссылок не являются спам-страницами.

открывалка

Относится к , и , создает контекст просмотра верхнего уровня, который не является вспомогательным контекстом просмотра, если гиперссылка создает любой из них с самого начала (т. е. имеет соответствующее значение атрибута target ). Другими словами, это заставляет ссылку вести себя так, как если бы window.opener были нулевыми и были установлены target="_parent" .

Это противоположность опенеру.

нереферер

Относится к , и , включая это значение, делает реферер неизвестным (заголовок Referer не будет включен) и создает контекст просмотра верхнего уровня, как если бы Также были установлены noopener .

открывалка

Создает вспомогательный контекст просмотра, если в противном случае гиперссылка создала бы контекст просмотра верхнего уровня, который не является вспомогательным контекстом просмотра (т. е. имеет « _blank » в качестве значения атрибута target ). По сути, противоположность noopener.

pingback

Указывает адрес сервера проверки связи, который обрабатывает запросы проверки связи для текущего документа.

предварительное соединение

Указывает, что пользовательский агент должен заблаговременно подключаться к источнику целевого ресурса.

предварительная выборка

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

предварительная нагрузка

Указывает, что пользовательский агент должен упреждающе извлекать и кэшировать целевой ресурс для текущей навигации в соответствии с потенциальным пунктом назначения, заданным параметром 9. 0004 как атрибут (и приоритет, связанный с соответствующим пунктом назначения).

пререндеринг

Указывает, что пользовательский агент должен заблаговременно получить целевой ресурс и обработать его таким образом, чтобы в будущем обеспечить более быстрый ответ.

предыд.

Аналогично следующему ключевому слову, релевантному , , и , значения prev указывают, что текущий документ является частью серии, а ссылка ссылается на предыдущий документ в серии и является ссылочным документом.

Примечание. Синоним предыдущего неверен и не должен использоваться.

поиск

Относится к <форма> , <ссылка> , и , ключевые слова search указывают, что гиперссылка ссылается на документ, интерфейс которого специально разработан для поиска в текущем документе, сайте и связанных ресурсах, предоставляя ссылку на ресурс, который можно использовать искать.

Если для атрибута type установлено значение application/opensearchdescription+xml , ресурс представляет собой подключаемый модуль OpenSearch, который можно легко добавить в интерфейс некоторых браузеров, таких как Firefox или Internet Explorer.

таблица стилей

Допустимо для элемента , он импортирует внешний ресурс для использования в качестве таблицы стилей. Атрибут type не нужен, так как это таблица стилей text/css , так как это значение по умолчанию. Если это не таблица стилей типа text/css , то лучше объявить тип.

Хотя этот атрибут определяет ссылку как таблицу стилей, взаимодействие с другими атрибутами и другими ключевыми терминами в значении rel влияет на загрузку и/или использование таблицы стилей.

При использовании с ключевым словом alter определяет альтернативную таблицу стилей. В этом случае включите непустой заголовок .

Внешняя таблица стилей не будет использоваться или даже загружаться, если носитель не соответствует значению атрибута media .

Требуется использование протокола CORS для выборки из разных источников.

бирка

Действительно для и элементов, он дает тег (идентифицируемый по заданному адресу), который применяется к текущему документу. Значение тега означает, что ссылка относится к документу, описывающему тег, применяемый к документу, в котором он расположен. Этот тип ссылки не предназначен для тегов в облаке тегов, поскольку эти теги применяются к группе страниц, тогда как значение тега атрибута rel относится к одному документу.

Нестандартные значения

сенсорный значок Apple

Указывает значок для веб-приложения на устройстве iOS.

Specification
HTML Standard
# linkTypes

html.elements.link.rel

BCD tables only load in the browser

with JavaScript enabled. Включите JavaScript для просмотра данных.

html.elements.a.rel

Таблицы BCD загружаются только в браузере

с включенным JavaScript. Включите JavaScript для просмотра данных.

html.elements.area.rel

Таблицы BCD загружаются только в браузере

с включенным JavaScript. Включите JavaScript для просмотра данных.
  • HTMLLinkElement.relList
  • HTMLAnchorElement.relList
  • HTMLAreaElement.relList

Последнее изменение: , участниками MDN

HTML-элементы формы | Полное руководство по элементам HTML-форм

В технологиях веб-разработки (особенно для внешнего интерфейса) «HTML» — это основной или основной язык разметки, который мы используем для отображения веб-страниц (страницы, которую мы видим на веб-сайте). ). Иногда на HTML-странице, наряду с отображением другого контента, нам также необходимо принимать некоторые пользовательские данные (особенно на динамических веб-сайтах). И чтобы принять пользовательский ввод на HTML-странице, нам нужно использовать несколько элементов формы для правильного создания этих форм, и с помощью этих форм мы правильно принимаем пользовательский ввод и помещаем эти вводы (данные) в наши внутренние базы данных по адресу задняя часть. Теперь, когда мы знаем, что HTML-коды записываются под различными элементами тега (<>), то, по сути, «элементы формы HTML» — это те элементы, которые используются внутри тега «», и эти элементы вместе с другими стандартные и уникальные атрибуты также дают форму и структуру, которые позволяют пользователям знать, что делать с формой и как действовать структурно.

Объяснение элементов формы HTML 

(включая синтаксис и примеры с выводом)

Поскольку существует несколько элементов формы HTML для создания формы и придания ей надлежащего вида в структурированном виде, ниже некоторые из них объясняются по одному .

SL № Метки Значения/описания

1

 <форма> Чтобы определить HTML-форму для ввода данных пользователем

2

 <ввод> Чтобы определить управление вводом

3

 <список данных> Чтобы указать список предустановленных параметров

4

 <набор полей> Чтобы определить элементы, связанные с группой

5

 <кейген> Чтобы определить безопасный вход

6

 <метка> Чтобы определить метку ввода

7

 <легенда> Чтобы определить заголовок для набора полей

8

 <оптгруппа>

Для определения группы похожих опций.

 

9

  

<опция>

Чтобы определить параметр раскрывающегося списка.

 

10

  

<выход>

  

Чтобы определить результат

 

11

  

<выбрать>

  

Чтобы определить список раскрывающегося списка.

 

12

<текстовое поле>

  

Для определения области многострочного ввода.

Примечание: Большинство обсуждаемых здесь элементов тегов HTML предназначены для HTML5, последней версии языка HTML. Элемент тега больше не поддерживается в HTML5; на самом деле он использовался для предыдущей версии HTML.

Синтаксис и пример

Некоторые синтаксис и примеры элементов форм HTML с выводами обсуждаются ниже:

1.
Элемент «»

Этот элемент может содержать множество других элементов, включая следующие:

  • <выход>
  • <метка>
  • <выбрать>
  • <кнопка>
  • <опция>
  • <текстовое поле>
  • <оптгруппа>
  • <набор полей>

Пример элемента «» с кнопкой ввода и отправки:

Синтаксис: 

 
Ваше имя:

Коды: 

 

<тело>
<форма action="/test_page.php">
Ваше имя:

Вывод:

2. Элемент «
»

  Этот элемент является встроенным и принадлежит к группе элементов формы.

Синтаксис: 

  php">
Введите имя: 

Введите возраст:

Коды: 

 

<тело>
<форма action="/action_page.php">
Введите имя: 

Введите возраст:

Вывод:

       

3. Элемент «
»

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

Синтаксис: 

 
<список данных>

Коды: 

 

<тело>

 php" method="get">

<список данных>

Вывод:

4. Элемент «
»

Этот элемент в основном используется для группировки связанных элементов в формах и рисует рамку вокруг похожих элементов.

Синтаксис: 

 <форма>
<набор полей>
Знаменитость:
Имя: 

Телефон: 

Возраст:

Коды: 

 

<тело>
<форма>
<набор полей>
Знаменитость:
Имя: 

Телефон: 

Возраст:

Вывод:

5.
Элемент «»

Этот элемент может находиться вне формы, но может быть ее частью. Обычно этот элемент используется для указания одной или нескольких форм. Этот элемент недавно используется в версии HTML5 для создания ключа шифрования для передачи зашифрованных данных через форму на веб-сайте на основе HTML.

Синтаксис:

Коды: 

 

<тело>

Имя пользователя: 
<тип ввода="отправить">


Упомянутое ниже поле генератора ключей находится за пределами формы, но по-прежнему является ее частью.

Шифрование:

Вывод:

6. Элемент «