Что такое input в html

19.04.202226.04.2022 admin 0 Comments

Что такое input в html

Это поле, которое позволяет выбрать цвет.

Пример

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

Поле ввода даты

Поле типа date позволяет ввести дату с помощью календаря.

Можно задать нижнюю и верхнюю границу диапазона дат атрибутами min и max.

Пример

Поле ввода адреса электронной почты

Для ввода нескольких адресов можно добавить атрибут multiple, при этом для разделения адресов используется запятая (,)

Пример

Файл FILE

Позволяет передать сценарию любой файл. Максимальный размер файла в байтах задается скрытым полем max_file_size.

Пример

Сценарий получения файла на PHP:

Браузер Chrome понимает дополнительные атрибуты «webkitdirectory directory«, указание которых у input позволяет выбирать целые папки:

Скрытое поле HIDDEN

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

Пример

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

Пример

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

Поле ввода чисел NUMBER

Поле предназначено для ввода чисел. Дробная часть при вводе может отделяться как точкой (2.5), так и запятой (2,5). Если пользователь введет буквы, то отправить форму на сервер не удастся.

Пример

Можно задать минимальное, максимальное значение поля и шаг изменения числа. Значение шага может быть как целым, так и дробным, но должно быть больше 0. Если введенное в поле число не будет отвечать заданным ограничениям, то отправка на сервер не произойдет.

Пример

Для задания любого шага используйте step=»any».

Пример

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

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

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

Поле ввода пароля PASSWORD

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

Пример

Переключатель RADIO

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

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

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

Пример

Ползунок RANGE

Поле предназначено для ввода числа в указанном диапазоне.

Можно задать минимальное значение (по умолчанию 0), максимальное значение (по умолчанию 100), шаг изменения числа (по умолчанию 1) и текущее значение (по умолчанию среднее арифметическое минимального и максимального значений).

Пример

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

Пример

Поле range отображается разными браузерами по-разному.

Если хотите своё оформление, задайте стили для ползунка:

Но победить до конца стили IE11 не удастся!

Кнопка RESET

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

Совет: осторожно относитесь к выбору надписи на кнопке RESET. Вполне наглядным (и, главное, интуитивно понятным даже чайнику из чайников) будет что-нибудь вроде «Очистить», «Начать сначала», «Удалить ввод» и т.п. В общем, надо, чтобы у пользователя не закралось и тени сомнения относительно предназначения этой клавиши.

Пример

Кнопка SUBMIT

Эта кнопка предназначена для передачи формы. В большинстве браузеров внешне почти не отличима от кнопки BUTTON. Сама она не передается, а служит только для управления.

Атрибут onclick для кнопки SUBMIT практически не используется, так как лучше использовать обработчик событий onsubmit, заданный в теге

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

Пример

Атрибут formnovalidate может быть применен, чтобы предотвратить проверку значений формы.

Пример

Поле ввода TEXT

Текстовое поле ввода используется в формах наиболее часто. Более того, его можно по праву считать основным и главнейшим элементом форм. Этот тип используется тегом по умолчанию, его можно не указывать, чтобы вывести текстовое поле. Однако, если возникнет необходимость задать стиль для селектора input[type=»text»], то тогда атрибут type=»text» пропускать нельзя.
Имя поля, задаваемое атрибутом name, всегда обязательно, так как базируясь именно на этом параметре, браузер передает сценарию пару имя=значение.

Пример

Текст «Иванов» помещается в созданное поле в качестве начального значения. Если пользователь не внесет изменений или нажмет кнопку RESET, то значение Иванов будет отправлено сценарию в качестве фамилии пользователя.

Источник

HTML Типы ввода

Вот различные типы ввода, которые вы можете использовать в HTML:

Тип ввода «text»

определяет однострочное поле ввода текста:

Пример

Именно так приведенный выше HTML код будет отображаться в браузере:

Тип ввода «password»

определяет поле пароля:

Пример

Именно так приведенный выше HTML код будет отображаться в браузере:

Имя пользователя:

Пароль:

Символы в поле пароля маскируются (отображаются в виде звездочек или кружочков).

Тип ввода «submit»

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

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

Обработчик формы задается в окне формы атрибут action :

Пример

Именно так приведенный выше HTML код будет отображаться в браузере:

Пример

Тип ввода «reset»

определяет кнопку сброса это приведет к сбросу всех значений формы к их значениям по умолчанию:

Пример

Именно так приведенный выше HTML код будет отображаться в браузере:

Если вы измените входные значения и затем нажмете кнопку «Сброс», то данные формы будут сброшены до значений по умолчанию.

Тип ввода «radio»

определяет переключатель.

Переключатели позволяют пользователю выбрать только один из ограниченного числа вариантов:

Пример

Именно так приведенный выше HTML код будет отображаться в браузере:

Мужчина
Женщина
другое

Тип ввода «checkbox»

определяет флажок.

Флажки позволяют пользователю выбрать ноль или более вариантов из ограниченного числа вариантов.

Пример

Именно так приведенный выше HTML код будет отображаться в браузере:

У меня есть велосипед
У меня есть машина
У меня есть лодка

Тип ввода «button»

определяет кнопку:

Пример

Именно так приведенный выше HTML код будет отображаться в браузере:

Тип ввода «color»

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

В зависимости от поддержки браузера в поле ввода может отображаться палитра цветов.

Пример

Тип ввода «date»

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

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

Пример

Вы также можете использовать атрибуты min и max для добавления ограничений к датам:

Пример

Тип ввода «datetime-local»

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

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

Пример

Тип ввода «email»

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

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

Некоторые смартфоны распознают тип электронной почты и добавляют «.com» к клавиатуре, чтобы соответствовать вводу электронной почты.

Пример

Тип ввода «file»

определяет поле выбор файла в «браузере» и кнопку для загрузки файла.

Пример

Тип ввода «month»

позволяет пользователю выбрать месяц и год.

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

Пример

Тип ввода «number»

определяет числовое поле ввода.

Вы также можете установить ограничения на то, какие номера принимаются.

В следующем примере отображается числовое поле ввода, в которое можно ввести значение от 1 до 5:

Пример

Входные ограничения

Вот список некоторых распространенных ограничений ввода:

Атрибут	Описание
checked	Указывает, что поле ввода должно быть предварительно выбрано при загрузке страницы (для type=»checkbox» или type=»radio»)
disabled	Указывает, что поле ввода должно быть отключено
max	Задает максимальное значение для поля ввода
maxlength	Задает максимальное количество символов для поля ввода
min	Задает минимальное значение для поля ввода
pattern	Задает регулярное выражение для проверки входного значения
readonly	Указывает, что поле ввода доступно только для чтения (не может быть изменено)
required	Указывает, что поле ввода является обязательным (должно быть заполнено)
size	Задает ширину (в символах) поля ввода
step	Задает допустимые интервалы чисел для поля ввода
value	Задает значение по умолчанию для поля ввода

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

В следующем примере показано числовое поле ввода, в которое можно ввести значение от 0 до 100 с шагом 10. Значение по умолчанию равно 30:

Пример

Тип ввода «range»

Пример

Тип ввода «search»

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

Пример

Тип ввода «tel»

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

Пример

Тип ввода «time»

позволяет пользователю выбрать время (без часового пояса).

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

Пример

Тип ввода «url»

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

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

Некоторые смартфоны распознают тип URL адреса, и добавляют, «.com» на клавиатуре, чтобы соответствовать ввода URL адреса.

Пример

Тип ввода «week»

позволяет пользователю выбрать неделю и год.

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

Источник

: The Input (Form Input) element

The HTML element is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and user agent. The element is one of the most powerful and complex in all of HTML due to the sheer number of combinations of input types and attributes.

types»> types

The available types are as follows:

Type

Description

Basic Examples

button

A push button with no default behavior displaying the value of the value attribute, empty by default.

color

A control for specifying a color; opening a color picker when active in supporting browsers.

date

A control for entering a date (year, month, and day, with no time). Opens a date picker or numeric wheels for year, month, day when active in supporting browsers.

datetime-local

A control for entering a date and time, with no time zone. Opens a date picker or numeric wheels for date- and time-components when active in supporting browsers.

A field for editing an email address. Looks like a text input, but has validation parameters and relevant keyboard in supporting browsers and devices with dynamic keyboards.

file

A control that lets the user select a file. Use the accept attribute to define the types of files that the control can select.

hidden

A control that is not displayed but whose value is submitted to the server. There is an example in the next column, but it’s hidden!

image

A graphical submit button. Displays an image defined by the src attribute. The alt attribute displays if the image src is missing.

number

A control for entering a number. Displays a spinner and adds default validation when supported. Displays a numeric keypad in some devices with dynamic keypads.

password

A single-line text field whose value is obscured. Will alert user if site is not secure.

radio

A radio button, allowing a single value to be selected out of multiple choices with the same name value.

range

A control for entering a number whose exact value is not important. Displays as a range widget defaulting to the middle value. Used in conjunction min and max to define the range of acceptable values.

reset

A button that resets the contents of the form to default values. Not recommended.

A single-line text field for entering search strings. Line-breaks are automatically removed from the input value. May include a delete icon in supporting browsers that can be used to clear the field. Displays a search icon instead of enter key on some devices with dynamic keypads.

tel

A control for entering a telephone number. Displays a telephone keypad in some devices with dynamic keypads.

text

The default value. A single-line text field. Line-breaks are automatically removed from the input value.

url

A field for entering a URL. Looks like a text input, but has validation parameters and relevant keyboard in supporting browsers and devices with dynamic keyboards.

week

A control for entering a date consisting of a week-year number and a week number with no time zone.

Obsolete values

datetime

A control for entering a date and time (hour, minute, second, and fraction of a second) based on UTC time zone.

Attributes

The element is so powerful because of its attributes; the type attribute, described with examples above, being the most important. Since every element, regardless of type, is based on the HTMLInputElement interface, they technically share the exact same set of attributes. However, in reality, most attributes have an effect on only a specific subset of input types. In addition, the way some attributes impact an input depends on the input type, impacting different input types in different ways.

This section provides a table listing all the attributes with a brief description. This table is followed by a list describing each attribute in greater detail, along with which input types they are associated with. Those that are common to most or all input types are defined in greater detail below. Attributes that are unique to particular input types—or attributes which are common to all input types but have special behaviors when used on a given input type—are instead documented on those types’ pages. This element includes the global attributes. Those with extra importance as it relates to are highlighted.

Attributes for the element include global HTML attributes and:

Attribute	Type or Types	Description
accept	file	Hint for expected file type in file upload controls
alt	image	alt attribute for the image type. Required for accessibility
autocomplete	all	Hint for form autofill feature
autofocus	all	Automatically focus the form control when the page is loaded
capture	file	Media capture input method in file upload controls
checked	radio, checkbox	Whether the command or control is checked
dirname	text, search	Name of form field to use for sending the element’s directionality in form submission
disabled	all	Whether the form control is disabled
form	all	Associates the control with a form element
formaction	image, submit	URL to use for form submission
formenctype	image, submit	Form data set encoding type to use for form submission
formmethod	image, submit	HTTP method to use for form submission
formnovalidate	image, submit	Bypass form control validation for form submission
formtarget	image, submit	Browsing context for form submission
height	image	Same as height attribute for ; vertical dimension
list	almost all	Value of the id attribute of the of autocomplete options
max	numeric types	Maximum value
maxlength	password, search, tel, text, url	Maximum length (number of characters) of value
min	numeric types	Minimum value
minlength	password, search, tel, text, url	Minimum length (number of characters) of value
multiple	email, file	Boolean. Whether to allow multiple values
name	all	Name of the form control. Submitted with the form as part of a name/value pair.
pattern	password, text, tel	Pattern the value must match to be valid
placeholder	password, search, tel, text, url	Text that appears in the form control when it has no value set
readonly	almost all	Boolean. The value is not editable
required	almost all	Boolean. A value is required or must be check for the form to be submittable
size	email, password, tel, text, url	Size of the control
src	image	Same as src attribute for ; address of image resource
step	numeric types	Incremental values that are valid.
type	all	Type of form control
value	all	The initial value of the control.
width	image	Same as width attribute for

A few additional non-standard attributes are listed following the descriptions of the standard attributes.

Individual attributes

Valid for the file input type only, the accept attribute defines which file types are selectable in a file upload control. See the file input type.

Valid for the image button only, the alt attribute provides alternative text for the image, displaying the value of the attribute if the image scr is missing or otherwise fails to load. See the image input type.

(Not a Boolean attribute!) The autocomplete attribute takes as its value a space-separated string that describes what, if any, type of autocomplete functionality the input should provide. A typical implementation of autocomplete recalls previous values entered in the same input field, but more complex forms of autocomplete can exist. For instance, a browser could integrate with a device’s contacts list to autocomplete email addresses in an email input field. See Values in The HTML autocomplete attribute for permitted values.

See The HTML autocomplete attribute for additional information, including information on password security and how autocomplete is slightly different for hidden than for other input types.

A Boolean attribute which, if present, indicates that the input should automatically have focus when the page has finished loading (or when the containing the element has been displayed).

Note: An element with the autofocus attribute may gain focus before the DOMContentLoaded event is fired.

No more than one element in the document may have the autofocus attribute. If put on more than one element, the first one with the attribute receives focus.

Warning: Automatically focusing a form control can confuse visually-impaired people using screen-reading technology and people with cognitive impairments. When autofocus is assigned, screen-readers «teleport» their user to the form control without warning them beforehand.

Use careful consideration for accessibility when applying the autofocus attribute. Automatically focusing on a control can cause the page to scroll on load. The focus can also cause dynamic keyboards to display on some touch devices. While a screen reader will announce the label of the form control receiving focus, the screen reader will not announce anything before the label, and the sighted user on a small device will equally miss the context created by the preceding content.

Introduced in the HTML Media Capture specification and valid for the file input type only, the capture attribute defines which media—microphone, video, or camera—should be used to capture a new file for upload with file upload control in supporting scenarios. See the file input type.

Valid for both radio and checkbox types, checked is a Boolean attribute. If present on a radio type, it indicates that the radio button is the currently selected one in the group of same-named radio buttons. If present on a checkbox type, it indicates that the checkbox is checked by default (when the page loads). It does not indicate whether this checkbox is currently checked: if the checkbox’s state is changed, this content attribute does not reflect the change. (Only the HTMLInputElement ’s checked IDL attribute is updated.)

When the form above is submitted, the input cause both the name / value pair of fruit=cherry and the dirname / direction pair of fruit.dir=ltr to be sent.

A Boolean attribute which, if present, indicates that the user should not be able to interact with the input. Disabled inputs are typically rendered with a dimmer color or using some other form of indication that the field is not available for use.

Specifically, disabled inputs do not receive the click event, and disabled inputs are not submitted with the form.

Note: Although not required by the specification, Firefox will by default persist the dynamic disabled state of an across page loads. Use the autocomplete attribute to control this feature.

Источник

Что такое input в html

Пример

Поле ввода даты

Пример

Поле ввода адреса электронной почты

Пример

Файл FILE

Пример

Скрытое поле HIDDEN

Пример

Пример

Поле ввода чисел NUMBER

Пример

Пример

Пример

Поле ввода пароля PASSWORD

Пример

Переключатель RADIO

Пример

Ползунок RANGE

Пример

Пример

Кнопка RESET

Пример

Кнопка SUBMIT

Пример

Пример

Поле ввода TEXT

Пример

HTML Типы ввода

HTML Типы ввода

Тип ввода «text»

Пример

Тип ввода «password»

Пример

Тип ввода «submit»

Пример

Пример

Тип ввода «reset»

Пример

Тип ввода «radio»

Пример

Тип ввода «checkbox»

Пример

Тип ввода «button»

Пример

Тип ввода «color»

Пример

Тип ввода «date»

Пример

Пример

Тип ввода «datetime-local»

Пример

Тип ввода «email»

Пример

Тип ввода «file»

Пример

Тип ввода «month»

Пример

Тип ввода «number»

Пример

Входные ограничения

Пример

Тип ввода «range»

Пример

Тип ввода «search»

Пример

Тип ввода «tel»

Пример

Тип ввода «time»

Пример

Тип ввода «url»

Пример

Тип ввода «week»

: The Input (Form Input) element

types»> types

Attributes

Individual attributes

Вам также понравится

Что сейчас в турции на курортах творится