Атрибуты input html: Атрибут form | htmlbook.ru

Что такое input в HTML5? Онлайн справочник на itProger

Справочники HTML5 input

HTML тег <input> позволяет создавать различные поля ввода или же выбора значения для html-форм. При использовании тега input без дополнительных атрибутов будет создано простейшее текстовое поле. Закрывающий тег не требуется. 

При помощи атрибута type вы можете указать каким полем будет этот input, к примеру:

  • password — создание поля для ввода пароля;
  • text — создания простейшего текстового поля;
  • email — создания поля для ввода email;
  • hidden — создания скрытого поля;
  • checkbox — создания поля для проставления галочки;
  • radio — создания поля с возможностью выбрать вариант;
  • button — создание кнопки;
  • submit — создание кнопки с перезагрузкой страницы;
  • reset — создание кнопки для очистки формы;
  • file — создание кнопки выбора файла с компьютера;
  • color — создание поля для выбора цвета;
  • time — создание поля для выбора даты;
  • image — создание поля с изображением;

Это лишь часть тех возможных значений атрибута type, которые вы можете применить на своем сайте.

Атрибуты:

  • type — задает значение (тип) поля;
  • form — нужен для связки поля с формой по id;
  • checked — устанавливает поставлена ли галочка или же выбрана radio кнопка по умолчанию;
  • disabled — отключает поле для ввода или любой другой взаимосвязи с ним;
  • placeholder — текст подсказки прямиком в поле;
  • readonly — возможно указать что поле не будет возможным для редактирования пользователем;
  • required — устанавливает обязательное ли это поле или нет;
  • value — устанавливается значение поля.

Пример:

<h3>Форма с полями</h3>
<form>
	<input type="text" name="name" placeholder="Ваше имя"><br>
	<label for="maleFemale">Выберите ваш пол</label><br>
	<input type="radio" name="maleFemale" value="male">
	<label>Мужчина</label>
	<input type="radio" name="maleFemale" value="female">
	<label>Женщина</label><br>
	<label>Ваш любимый цвет</label><br>
	<input type="color"><br>
	<input type="submit" value="Отправить">
	<input type="reset" value="Очистить">
</form>

Результат:


Выберите ваш пол
Мужчина Женщина
Ваш любимый цвет

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

Хорошо

Настройки

HTML тег

АтрибутОпис атрибута
acceptВстановлює фільтр на типи файлів, які ви можете надіслати через поле завантаження файлів.
alignВизначає вирівнювання зображення (для type =»image»).
altЗадає альтернативний текст для зображення (для type =»image»).
autocompleteВмикає чи вимикає автозаповнення.
autofocusАвтоматичне отримання фокусу елементом форми відразу після повного завантаження сторінки.
checkedАктивує прапорець/перемикач (для type=»checkbox» чи type=»radio»).
dirnameПередає на сервер напрямок тексту.
disabledБлокує доступ і зміну елемента.
formПов’язує поле з формою по її ідентифікатору.
formactionВказує URL-адресу обробника форми (для type =»submit» та `type =»image»).
formenctypeВстановлює спосіб кодування даних, що відправляються на сервер (для type =»submit» та `type =»image»).
formmethodВизначає HTTP метод передачі даних на сервер (для `type =»submit»` та `type =»image»`).
formnovalidateСкасовує вбудовану перевірку даних на коректність.
formtargetФрейм або вікно, в яке буде завантажено відповідь сервера (для `type =»submit»` та `type =»image»`).
heightЗадає висоту елемента форми.
listВстановлює список варіантів (<datalist>) тексту, що вводиться.
maxЗадає максимальне значення для введеного числа/дати.
maxlengthВстановлює максимальну кількість символів, що вводяться в текстове поле.
minЗадає мінімальне значення для введення числа/дати.
multipleДозволяє завантажити декілька файлів одночасно.
nameІм’я поля, призначене для того, щоб обробник форми міг його ідентифікувати.
pattern Задає регулярний вираз, за яким проходитиме перевірка введеного тексту.
placeholderВстановлює в текстовому полі текст-підказку.
readonlyВказує, що поле введення доступне тільки для читання.
requiredВказує що поле обов’язкове для заповнення.
sizeВстановлює ширину текстового поля за кількістю символів.
srcВказує URL-адресу зображення для використання її як кнопки надсилання (для `type =»image»`).
stepВстановлює інтервал збільшення значення числового поля або повзунка.
typeПовідомляє браузеру, до якого типу належить елемент форми.
valueЗадає значення елемента.
widthВстановлює ширину елемента форми. Тільки для <input type=»image»>

АтрибутОпис атрибута
title

Вказує додаткову текстову підказку

translate

Повідомляє браузеру переводити вказаний текст в елементі чи ні.

contextmenu

Контекстне меню для елемента

accesskey

Дозволяє активувати або сфокусуватись на елементі за допомогою заданого сполучення клавіш.

class

Визначає один або кілька класів, щоб зв’язати елемент з таблицею стилів (CSS).

draggable

Визначає чи можна перетягувати елемент.

contenteditable

Дозволяє редагувати текст в середні тегу.

dir

Вказує напрямок тексту.

dropzone

Вказує, що робити з перетягувати елементи.

hidden

Приховує вміст елемента від перегляду.

id

Задає унікальний ідентифікатор для елемента.

lang

Визначає основну мову вмісту елемента

spellcheck

Вказує браузеру перевіряти чи ні правопис і граматику в тексті елемента.

style

Задає вбудований (inline) CSS стиль для елемента.

tabindex

Встановлює порядок отримання фокусу при переході між елементами за допомогою клавіші `Tab`.

Більше інформації про загальні атрибути за посиланням Загальні атрибути в html.

ПодіяОпис події
onplayСкрипт викликається коли медіа дані готові почати відтворення.
onafterprintСкрипт виконується тільки після як документ надрукований.
onbeforeprintСкрипт виконується перед тим, як документ надрукований.
onbeforeunloadСкрипт виконується коли документ ось-ось буде вивантажений
onhashchangeСкрипт виконується коли там відбулися зміни до частини якоря в URL
onloadВикликається після того як завантаження елемента завершене.
onmessageСкрипт виконується коли викликане повідомлення.
onofflineСпрацьовує коли браузер починає працювати в автономному режимі
ononline
Спрацьовує коли браузер починає працювати в режимі онлай.
onpagehideСкрипт виконується коли користувач переходить на іншу сторінку сторінку.
onpageshowСкрипт виконується коли користувач заходить на сторінку.
onpopstateСкрипт виконується коли змінено історію одного вікна.
onresizeСкрипт виконується, коли розмір вікна браузера змінюється.
onstorageСкрипт виконується, коли вміст Web Storage оновлюється.
onunloadВикликається, коли сторінка розвантажена, або вікно браузера було зачинено.
onblurСкрипт виконується, коли елемент втрачає фокус.
onchangeВикликається в той момент, коли значення елемента змінюється.
oncontextmenuСкрипт виконується коли викликається контекстне меню.
onfocusВикликається в той момент, коли елемент отримує фокус.
oninputСкрипт викликається коли користувач вводить дані поле.
oninvalidСкрипт виконується, коли елемент недійсний.
onresetВикликається, коли натискається у формі кнопка типу Reset.
onsearchВикликається, коли користувач щось пише в поле пошуку (для &lt;input type=&quot;search&quot;&gt;)
onselectВикликаєтсья після того як будь-який текст був обраний в елементі.
onsubmitВикликається при відправленні форми.
onkeydownПодія викликається, коли користувач затис (натиснув та не відпускає) клавішу.
onkeypressВикликається коли корисрувач натиснув на клавішу.
onkeyupВикликається коли користувач відпускає клавішу.
ondblclickВиникає при подвійному клацанні ЛКМ на елементі.
ondragПеріодично викликається при операції перетягування.
ondragendВикликається коли користувач відпускає перелягуваний елемент.
ondragenterВикликається, коли перетягуваний елемент входить в цільову зону.
ondragleaveВикликається, коли перетягуваний елемент виходть з зони призначення.
ondragoverВикликається, коли перетягуваний елемент знаходиться в зоні призначення.
ondragstartВикликається, коли користувач починає перетягувати елемент, або виділений текст.
ondropВикликається, коли перетягуваний елемент падає до зони призначення.
onmousedownВикликається, коли користувач затискає ЛКМ на елементі.
onmousemoveВикликається, коли курсор миші переміщається над елементом.
onmouseoutВикликається, коли курсор виходить за межі елемента.
onmouseoverВиконується, коли курсор наводиться на елемент.
onmouseupВикликається, коли користувач відпускає кнопку миші.
onscrollВикликається при прокручуванні вмісту елемента (чи веб-сторінки).
onwheelВикликається, коли користувач прокручує коліщатко миші.
oncopyВикликається, коли користувач копіює вміст елемента.
oncutВикликається, коли користувач вирізає вміст елемента.
onpasteВикликається, коли користувач вставляє вміст в елемент.
onabortВиконується при перериванні якоїсь події.
oncanplayСкрипт виконується коли файл готовий, для початку відтворення (коли він буферизований достатньо, щоб почати відтворення)
oncanplaythroughСкрипт виконується, коли контент вже може бути відтворений без переривання на буферизацію.
oncuechangeСкрипт виконується коли змінюється кий в &lt;track&gt; елемента
ondurationchangeВикликається коли змінюється довжина медіа файлу.
onemptiedВикликається коли доступ до медіа контенту обривається (зникло з’єднання з мережею).
onendedВикликається коли медіа елемент повністю відтворив свій зміст.
onshowВикликається, коли елемент &lt;menu&gt; буде відображено як контекстне меню.
onloadedmetadataСкрипт виконується коли метадані (розміри чи тривалість) завантажуються.
onloadeddataВикликається коли медіа данні завантажено.
onloadstartВикликається коли браузер тільки починає завантажувати медіа дані з сервера.
onpauseВикликається коли відтворення медіа даних призупинено.
onplayingВикликається коли розпочато відтворення медіа даних.
onprogressПодія onprogress відбувається, коли браузер завантажує вказане аудіо / відео.
onratechangeВикликається коли змінюється швидкість відтворення медіа даних.
onseekedВикликається коли атрибут seeked у тега audio або video змінює значення з true на false.
onseekingВикликається коли атрибут seeking у тегів audio або video змінює значення з false на true
onstalledСкрипт виконується коли браузер з будь-якої причини не може отримати медіа дані.
onsuspendСкрипт виконується коли з будь-якої причини завантаження данних призупинено до його повного завантаження.
ontimeupdateВикликається коли змінилася позиція відтворення елемента &lt;audio&gt; або &lt;video&gt;.
onvolumechangeВикликається коли змінюється гучність звуку.
onwaitingВикликається коли наступний кадр при відтворенні медіа даних недоступний, але браузер очікує що він незабаром завантажиться.
ontoggleВикликається, коли користувач відкриває або закриває елемент &lt;details&gt;.
onerrorВикликається якщо при завантаженні елемента сталася помилка.
onclickПодія викликається коли користувач клацає ЛКМ по елементу.

Більше інформації про html події за посиланням Атрибути подій в html.

атрибутов формы ввода в HTML

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

Как входные атрибуты работают в HTML

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

Атрибут Type

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

  • текст : используется для описания текстового поля
  • число : используется для создания поля, которое принимает числовые значения
  • электронная почта : используется для ввода адреса электронной почты
  • цвет : определить цвет поля ввода
  • флажок : создать флажок
  • радио : для создания радиокнопки
  • тел : создает поле, которое принимает телефонные номера
  • изображение : используется для получения файла изображения от пользователя
  • скрыто : поле, которое не будет отображаться на экране пользователя
  • дата : создает поле, которое принимает дату
  • месяц : создает поле, содержащее месяц и год для выбора
  • submit : кнопка для отправки данных формы
  • сброс : это создает кнопку, которая сбрасывает все данные формы

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

Пример

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


 

 

 
 

В приведенном выше коде используются четыре различных типа ввода, которые используют значения text, email, submit и reset.

Вывод

Атрибут значения

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

Пример
Приведенный ниже код использует атрибут value для типов ввода=текст и тип ввода=отправить.


 

 

Вывод

Атрибут только для чтения

Этот атрибут запрещает запись в поле ввода.

Пример
Предоставленный код HTML использует атрибут только для чтения в поле ввода.


 

 

Вывод

Текстовое поле, показанное в выводе, не позволит вам писать, и щелчок мышью не будет выполнять никаких действий.

Отключенный атрибут

Тип ввода, содержащий этот атрибут, будет отображать только область, охватываемую полем ввода. Однако вы не можете выполнять какие-либо действия с этим элементом ввода.

Пример
Атрибут disabled элемента ввода применяется в следующем коде


 

 

Вывод

6 Примечание

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

Атрибут шаблона

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

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


 

 

Вывод

Для проверки атрибута шаблона мы попытались ввести заглавные буквы. Однако возникла ошибка с запросом соответствия запрошенному формату.

Атрибут-заполнитель

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

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


 

 

Вывод

Из вывода видно, что текстовое поле указывает пользователю ввести свое имя.

Обязательный атрибут

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

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


 

 

Вывод

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

Атрибут автофокуса

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

Пример
Следующий код устанавливает атрибут autofocus элемента ввода.


 

 

Output

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

Множественный атрибут

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

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


 

 

Вывод

Вывод показывает, что прикреплены три файла, которые описывают работу нескольких атрибутов.

Атрибуты высоты и ширины

Этот атрибут используется с типом изображения и устанавливает высоту и ширину изображения.

Пример
В качестве типа ввода задано изображение, и к нему применяются атрибуты высоты/ширины .



 

 

Вывод

Изображение в выводе будет скорректировано в соответствии со значением ширины и высоты.

Атрибут Min/Max

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

Пример
В приведенном ниже коде используются атрибуты min и max , где тип ввода установлен на номер .


 

 

Вывод

Как показано в выводе, числовое поле не принимает 21, так как предел был установлен на 20.

Атрибут Maxlength

Количество символов для типа ввода может быть указано с помощью атрибута maxlength.

Пример
Следующий код ограничивает число символов до 5 в текстовом поле.


 

 

Вывод

Выходные данные выше содержат 5 символов в текстовом поле, текстовое поле не допускает 6-й символ из-за атрибута maxlength .

Вывод

Элемент ввода имеет обширный список атрибутов для создания многофункциональной HTML-формы. В этом информативном посте перечислены атрибуты элемента ввода HTML-форм. Атрибуты, поддерживаемые элементом ввода: тип, значение, отключено, только для чтения, автофокус, несколько, высота и ширина, максимальная длина и т. д. Более того, каждый атрибут отрабатывается на примере, что поможет понять функциональность.

10 Чрезвычайно полезные входные атрибуты HTML Вы должны знать! — Сегун Адеринола

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

  1. Автофокус

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

Работает со всеми типами ввода, которые не скрыты.

 

Это поле ввода будет в фокусе после загрузки страницы

2. Автозаполнение

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

Работает со всеми типами ввода, требующими ввода текста.

 

3. Шаблон

Этот атрибут принимает регулярное выражение (RegEx) по которому значение элемента ввода проверяется при отправке формы.

Работает с телефоном, текстом и паролем. 9(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[a-zA-Z]).{8,}$» />

Это проверит пароль на наличие не менее 8 символов, 1 прописных и строчных символов и 1 числа

4. Принять

Этот атрибут позволяет указать, какие типы файлов можно получить в элементе управления загрузкой файлов

Работает только при вводе файлов

 

5. Capture

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

Работает только с файловым типом ввода.

Примечание. Этот атрибут работает только на Android и iOS и игнорируется на настольных компьютерах.

 

Вы можете установить Capture = «user», чтобы получать изображение с передней камеры, или capture = «environment», чтобы получать изображение с задней камеры

6

Логический атрибут, если он равен true, позволяет пользователю вводить более одного ввода.

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

Работает с типами ввода электронной почты и файлов.

 

Это позволяет пользователям добавлять более одного изображения

7. Только чтение

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

Работает со всеми типами ввода, кроме файлов.

 

Вы можете динамически добавлять атрибут только для чтения в соответствии с потребностями

8. Обязательный

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

Работает со всеми типами ввода.

 

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *