Элементы формы 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>
Разрешить множественный выбор:
Используйте атрибут 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 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
для элементов
или<раздел>
, если есть хотя бы один, в противном случае ближайший родственный брат или предок-потомок к следующему.-
канонический
Действителен для
-
предварительная выборка DNS
Актуально для элемента
-
внешний
Относится к
,
-
помощь
Относится к
<форма>
,<ссылка>
,<область>
, ключевое словоhelp
указывает, что ссылка на содержимое предоставляет контекстно-зависимую справку, предоставляя информацию для родительского элемента, определяющего гиперссылку, и его дочерних элементов. При использовании внутри<ссылка>
справка предназначена для всего документа. При включении с<область>
и поддержке курсорпо умолчанию
будетhelp
вместо указателя-
значок
Действителен с
<ссылка>
, связанный ресурс представляет собой значок, ресурс для представления страницы в пользовательском интерфейсе для текущего документа.Наиболее распространенное использование значка
.<ссылка rel="icon" href="favicon.ico" />
Если имеется несколько
медиа
атрибут,тип
иразмеры
атрибутов, чтобы выбрать наиболее подходящий значок. Если несколько значков одинаково подходят, используется последний из них. Если впоследствии наиболее подходящий значок оказывается неподходящим, например, из-за того, что он использует неподдерживаемый формат, браузер переходит к следующему наиболее подходящему и так далее.Примечание: До 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» — это те элементы, которые используются внутри тега «
php"> Введите имя:Введите возраст:
Коды:
<тело> <форма action="/action_page.php"> Введите имя:
Введите возраст:
форма> тело>
Вывод: