Html тег

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

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

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

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

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

Результат
HTML-код
Попробуй сам »

Ознакомтесь с соглашеием:Условия нашего соглашения…
Ваше мнение о этом соглашении:Введите свой комментарий…

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

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

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

Флажки (Checkbox) и Переключатели (Radio)

Элементы (флажки) и (переключатели) задаются в теге , и их поведение определено в стандарте HTML.
Самый простой флажок или переключатель — это элемент с атрибутом соответственно равным или:

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

При просмотре переключатели отображаются в виде круга (неотмечен) или заполненного круга (отмечен). Флажки отображаются как пустые кватраты (неотмечен) или квадраты с галочкой (отмечен). В зависимости от браузера и операционной системы квадрат иногда имеет закругленные углы.

флажки и переключатели имеют ряд атрибутов для управления их поведением:

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

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

Отсутствие атрибута является единственным допустимым синтаксисом для неотмечанного элемента:

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

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

или с элементом , имеющим атрибут , равный атрибуту элемента:

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

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

Примеры

В первом примере мы создадим форму с элементом управления textarea со всеми значениями по умолчанию. Также мы установим атрибут placeholder с подсказкой относительно того, контент какого типа должен вводиться в поле. Она будет отображаться, когда текстовая область пуста:

<form action="../../form-result.php" target="_blank">
  <p>Message to the author:</p>
  <p><textarea name="message" placeholder="Share your opinion with the author!"></textarea></p>
  <p><input type="submit" value="Send message"></p>
</form>

Во втором примере мы установим начальное значение в качестве содержимого HTML textarea. Оно будет использоваться для заполнения элемента управления сразу после загрузки документа, а также после сброса формы.

В отличие от поля для ввода однострочного текста элемент textarea использует начальное значение в качестве содержимого (вместо атрибута value):

<form action="../../form-result.php" target="_blank">
  <p>Edit your comment:</p>
  <p><textarea name="comment">Hi! I think you're all wrong!</textarea></p>
  <p>
    <input type="submit" value="Edit">
    <input type="reset" value="Reset">
  </p>
</form>

Далее мы используем атрибуты cols и rows, чтобы задать количество символов, которые могут одновременно отображаться в элементе управления. Браузеры рассчитывают ширину и высоту элемента, умножая эти значения на ширину и высоту символа используемого шрифта.

Ширина HTML input textarea вычисляется относительно ширины символа используемого шрифта. Так как символы не всегда имеют одинаковую ширину, то браузеры могут использовать различные методы, чтобы округлить это значение:

<form action="../../form-result.php" target="_blank">
  <p>Add a new description:</p>
  <p><textarea name="description" cols="40" rows="5"></textarea></p>
  <p><input type="submit" value="Submit"></p>
</form>

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

Соответствие minlength проверяется только при отправке данных формы, а в maxlength браузеры проверяют, чтобы пользователь не ввел больше символов, чем указано через этот атрибут.

Атрибут maxlength элемента textarea HTML хорошо поддерживается браузерами, а minlength – нет:

<form action="../../form-result.php" target="_blank">
  <p>Edit your biography:</p>
  <p><textarea name="biography" minlength="20" maxlength="50"></textarea></p>
  <p><input type="submit" value="Submit"></p>
</form>

Теперь мы используем атрибут required, который был введен в HTML5. Когда этот атрибут указан, браузер не позволяют отправить данные формы, пока соответствующее поле не будет заполнено.

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

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

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

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

Текстовая область может содержать неограниченное количество символов,
и текст отображается шрифтом фиксированной ширины (обычно Courier).

Размер текстовой области определяется атрибутами
и или (с помощью CSS).

Атрибут необходим для ссылки на данные формы после отправки
формы (если вы пропустите атрибут , данные из текстовой области не будут представлены).

Атрибут необходим для связывания текстовой области с меткой.

Совет: Всегда добавляйте тег <label> для лучших практик доступности!

HTML Теги

<!—…—><!DOCTYPE><a><abbr><acronym><address><applet><area><article><aside><audio><b><base><basefont><bdi><bdo><big><blockquote><body><br><button><canvas><caption><center><cite><code><col><colgroup><data><datalist><dd><del><details><dfn><dialog><dir><div><dl><dt><em><embed><fieldset><figcaption><figure><font><footer><form><frame><frameset><h1> — <h6><head><header><hr><html><i><iframe><img><input><ins><kbd><label><legend><li><link><main><map><mark><meta><meter><nav><noframes><noscript><object><ol><optgroup><option><output><p><param><picture><pre><progress><q><rp><rt><ruby><s><samp><script><section><select><small><source><span><strike><strong><style><sub><summary><sup><svg><table><tbody><td><template><textarea><tfoot><th><thead><time><title><tr><track><tt><u><ul><var><video>

HTML Tags

<!—><!DOCTYPE><a><abbr><acronym><address><applet><area><article><aside><audio><b><base><basefont><bdi><bdo><big><blockquote><body><br><button><canvas><caption><center><cite><code><col><colgroup><data><datalist><dd><del><details><dfn><dialog><dir><div><dl><dt><em><embed><fieldset><figcaption><figure><font><footer><form><frame><frameset><h1> — <h6><head><header><hr><html><i><iframe><img><input><ins><kbd><label><legend><li><link><main><map><mark><meta><meter><nav><noframes><noscript><object><ol><optgroup><option><output><p><param><picture><pre><progress><q><rp><rt><ruby><s><samp><script><section><select><small><source><span><strike><strong><style><sub><summary><sup><svg><table><tbody><td><template><textarea><tfoot><th><thead><time><title><tr><track><tt><u><ul><var><video>

Валидация элементов управления

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

Минимум/максимум длины
Используйте атрибуты и чтобы указать требования к длине. Большинство браузеров сразу не позволяют пользователю вводить в поле больше, чем указанное максимальное количество символов, что предотвращает их неправильность еще до отправки формы.

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

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

Вот сообщение, показанное в Google Chrome версии 51 при попытке отправить форму с недопустимым значением внутри этого поля:

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

Для полей типа можно задать ограничение на определенные типы файлов, такие как видео, изображения, аудио, определенные расширения файлов или определенные медиа типы. Например:

Через запятую могут быть заданы несколько значений, например:

Добавление атрибута к элементу или атрибута к кнопке отправки формы , предотвращает проверку элементов формы. Например:

Форма имеет поля, которые необходимо проверить для «публикации» проекта, но не требуют проверки для «сохранения» проекта.
или отключаем проверку формы:

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

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

HTML Справочник

HTML Теги по алфавитуHTML Теги по категорииHTML ПоддержкаHTML АтрибутыHTML ГлобальныеHTML СобытияHTML Названия цветаHTML ХолстHTML Аудио/ВидеоHTML ДекларацииHTML Набор кодировокHTML URL кодHTML Коды языкаHTML Коды странHTTP СообщенияHTTP методыКовертер PX в EMКлавишные комбинации

HTML Теги

<!—…—>
<!DOCTYPE>
<a>
<abbr>
<acronym>
<address>
<applet>
<area>
<article>
<aside>
<audio>
<b>
<base>
<basefont>
<bdi>
<bdo>
<big>
<blockquote>
<body>
<br>
<button>
<canvas>
<caption>
<center>
<cite>
<code>
<col>
<colgroup>
<data>
<datalist>
<dd>
<del>
<details>
<dfn>
<dialog>
<dir>
<div>
<dl>
<dt>
<em>
<embed>
<fieldset>
<figcaption>
<figure>
<font>
<footer>
<form>
<frame>
<frameset>
<h1> — <h6>
<head>
<header>
<hr>
<html>
<i>
<iframe>
<img>
<input>
<ins>
<kbd>
<label>
<legend>
<li>
<link>
<main>
<map>
<mark>
<meta>
<meter>
<nav>
<noframes>
<noscript>
<object>
<ol>
<optgroup>
<option>
<output>
<p>
<param>
<picture>
<pre>
<progress>
<q>
<rp>
<rt>
<ruby>
<s>
<samp>
<script>
<section>
<select>
<small>
<source>
<span>
<strike>
<strong>
<style>
<sub>
<summary>
<sup>
<svg>
<table>
<tbody>
<td>
<template>
<textarea>
<tfoot>
<th>
<thead>
<time>
<title>
<tr>
<track>
<tt>
<u>
<ul>
<var>
<video>
<wbr>

HTML тег

Все элементы тега форм создаются с помощью тега <input>.

Синтаксис <input>

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

name=»name_field» — параметр для задания имени конкретному input. Это нужно, чтобы при дальнейшей обработке данных формы можно было получить значение этого поля.
type=»значение» — отвечает за тип элемента, т.е. что именно будет представлять из себя поле. И здесь есть множество возможных значений:
- text — текстовое поле. Одно из самых часто используемых значений
- password — текстовое поле, но с той особенностью, что при вводе символы скрыты
- radio — радиокнопки
- checkbox — переключатели
- submit — кнопка для отправки значений формы (управление передается на адрес указанный в адрес, указанный в action атрибута формы)
- reset — кнопка для очистки всей формы
- hidden — скрытое поле
- button — кнопки для обработки каких-то действий (не путать с submit!)
- file — для загрузки файлов на сервер
- image — поле с изображением (используется крайне редко)
value=»значение» — указывается значение по умолчанию

Теперь разберем более подробно каждый элемент

Definition and Usage

The tag defines a multi-line text input control.

The element is often used in a form, to collect user inputs
like comments or reviews.

A text area can hold an unlimited number of characters, and the text renders in a fixed-width font (usually Courier).

The size of a text area is specified by the and attributes
(or with CSS).

The attribute is needed to reference
the form data after the form is submitted (if you omit the attribute, no data from the text area will be submitted).

The attribute is needed to associate the
text area with a label.

Tip: Always add the <label> tag
for best accessibility practices!

Файл (File)

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

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

Если добавить атрибут , то пользователь сможет выбрать несколько файлов:

Атрибут определяет типы файлов, которые пользователь может выбрать. Например. , ,

Attributes

Attribute	Value	Description
autofocus	autofocus	Specifies that a text area should automatically get focus when the page loads
cols	number	Specifies the visible width of a text area
dirname	textareaname.dir	Specifies that the text direction of the textarea will be submitted
disabled	disabled	Specifies that a text area should be disabled
form	form_id	Specifies which form the text area belongs to
maxlength	number	Specifies the maximum number of characters allowed in the text area
name	text	Specifies a name for a text area
placeholder	text	Specifies a short hint that describes the expected value of a text area
readonly	readonly	Specifies that a text area should be read-only
required	required	Specifies that a text area is required/must be filled out
rows	number	Specifies the visible number of lines in a text area
wrap	hard soft	Specifies how the text in a text area is to be wrapped when submitted in a form

HTML Reference

HTML by AlphabetHTML by CategoryHTML Browser SupportHTML AttributesHTML Global AttributesHTML EventsHTML ColorsHTML CanvasHTML Audio/VideoHTML Character SetsHTML DoctypesHTML URL EncodeHTML Language CodesHTML Country CodesHTTP MessagesHTTP MethodsPX to EM ConverterKeyboard Shortcuts