html поле ввода чисел
Ввод чисел
Для ввода чисел предназначено специальное поле, которое допускает ограничения по нижней и верхней границе, а также устанавливает шаг приращения. Само поле для ввода чисел похоже на обычное текстовое поле, но со стрелками, которые позволяют увеличивать и уменьшать значение (рис. 1).
Рис. 1. Вид поля для ввода чисел
Синтаксис создания поля следующий:
Допустимые атрибуты перечислены в табл. 1.
| Атрибут | Описание |
|---|---|
| min | Минимальное значение. |
| max | Максимальное значение. |
| size | Ширина поля. |
| step | Шаг приращения числа. Может быть как целым (2), так и дробным (0.2). |
| name | Имя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать. |
| value | Начальное число, которое выводится в поле. |
Пример 1. Ограничение ввода чисел
HTML5 IE Cr Op Sa Fx
Атрибут step задаёт шаг приращения и по умолчанию равен 1. В то же время значение может быть и дробным числом, как показано в примере 2.
Пример 2. Шаг приращения
HTML5 IE Cr Op Sa Fx
Результат примера продемонстрирован на рис. 2.
Рис. 2. Ввод дробных чисел в поле
Браузеры плохо поддерживают это поле, пока лишь это делает Chrome и Opera. В остальных браузерах поле для ввода числа приобретает вид обычного текстового поля.
Html поле ввода чисел
Программирование на C++ с Нуля до Гуру
Данный курс научит Вас программировать на языке C++, который, несмотря на свой почтенный возраст, необычайно сильно востребован. Курс состоит из 6 разделов, посмотрев которые и выполнив все упражнения, Вы с нуля освоите этот язык и сможете создавать самые разные проекты любой сложности на C++.
Для закрепления материала из уроков к ним идёт множество упражнений.
Дополнительно к курсу идёт вспомогательная система, которая не даст Вам забросить начатое на полпути.
Также вместе с курсов Вы получаете Бонус «Программирование на C++ в Unreal Engine», в котором Вы научитесь создавать игры на C++ с использованием этого движка.
Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.
Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.
Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.
Зачем Вы изучаете программирование/создание сайтов?
Программирование на C++ для начинающих
Бесплатный курс по C++ даст Вам отличный старт для начала программирования на этом языке. В курсе Вас ждёт множество уроков (больше 4-х часов видео), исходников и упражнений.
Чтобы получить Видеокурс,
заполните форму
5 шагов и профессиональный сайт готов
— Вы будете иметь чёткий план действий.
— Вы сможете начать создавать сайт.
— Вы сможете легко ориентироваться в информации по созданию сайтов.
Html поле ввода чисел
элементы типа number используются для того, чтобы дать возможность пользователю ввести число. У них есть встроенная валидация, запрещающая вводить нечисловые значения. Браузер может предоставить возможность увеличить или уменьшить значение специальными стрелками, используя мышь или просто двигая пальцем по экрану.
Value
Additional attributes
In addition to the attributes commonly supported by all types, inputs of type number support these attributes:
| Attribute | Description |
|---|---|
| max | The maximum value to accept for this input |
| min | The minimum value to accept for this input |
| placeholder | An example value to display inside the field when it’s empty |
| readonly | A Boolean attribute controlling whether or not the value is read-only |
| step | A stepping interval to use when using up and down arrows to adjust the value, as well as for validation |
The maximum value to accept for this input. If the value entered into the element exceeds this, the element fails constraint validation. If the value of the max attribute isn’t a number, then the element has no maximum value.
This value must be greater than or equal to the value of the min attribute.
The minimum value to accept for this input. If the value of the element is less than this, the element fails constraint validation. If a value is specified for min that isn’t a valid number, the input has no minimum value.
This value must be less than or equal to the value of the max attribute.
placeholder
The placeholder attribute is a string that provides a brief hint to the user as to what kind of information is expected in the field. It should be a word or short phrase that demonstrates the expected type of data, rather than an explanatory message. The text must not include carriage returns or line feeds.
If the control’s content has one directionality (LTR or RTL) but needs to present the placeholder in the opposite directionality, you can use Unicode bidirectional algorithm formatting characters to override directionality within the placeholder; see Overriding BiDi using Unicode control characters in The Unicode Bidirectional Text Algorithm for those characters.
Note: Avoid using the placeholder attribute if you can. It is not as semantically useful as other ways to explain your form, and can cause unexpected technical issues with your content. See Labels and placeholders in : The Input (Form Input) element for more information.
readonly
A Boolean attribute which, if present, means this field cannot be edited by the user. Its value can, however, still be changed by JavaScript code directly setting the HTMLInputElement value property.
Note: Because a read-only field cannot have a value, required does not have any effect on inputs with the readonly attribute also specified.
Строковое значение any означает, что никакое значение шага не задано и допустимо любое значение (в пределах других ограничений, таких как min и max ).
Примечание: Когда значение, введённое пользователем, не подходит под заданное значение шага, user agent может округлить его до ближайшего допустимого значения с приоритетом в большую сторону в том случае, если значение находится ровно посередине шага.
Using number inputs
Important: Bear in mind that logically you should not be able to enter characters inside a number of input other than numbers. There seems to be some disagreement about this among browsers; see баг 1398528.
Note: It’s crucial to remember that a user can tinker with your HTML behind the scenes, so your site must not use simple client-side validation for any security purposes. You must verify on the server side any transaction in which the provided value may have any security implications of any kind.
Mobile browsers further help with the user experience by showing a special keyboard more suited for entering numbers when the user tries to enter a value. The following screenshot is taken from Firefox for Android:
A simple number input
In its most basic form, a number input can be implemented like this:
A number input is considered valid when empty and when a single number is entered, but is otherwise invalid. If the required attribute is used, the input is no longer considered valid when empty.
Note: Any number is an acceptable value, as long as it is a valid floating point number (i.e. not NaN or Infinity).
Placeholders
Controlling step size
By default, the up and down buttons provided for you to step the number up and down will step the value up and down by 1. You can change this by providing a step attribute, which takes as its value a number specifying the step amount. Our above example contains a placeholder saying that the value should be a multiple of 10, so it makes sense to add a step value of 10:
In this example you should find that the up and down step arrows will increase and decrease the value by 10 each time, not 1. You can still manually enter a number that’s not a multiple of 10, but it will be considered invalid.
Specifying minimum and maximum values
You can use the min and max attributes to specify a minimum and maximum value that the field can have. For example, let’s give our example a minimum of 0, and a maximum of 100:
In this updated version, you should find that the up and down step buttons will not allow you to go below 0 or above 100. You can still manually enter a number outside these bounds, but it will be considered invalid.
Allowing decimal values
One issue with number inputs is that their step size is 1 by default — if you try to enter a number with a decimal, such as «1.0», it will be considered invalid. If you want to enter a value that requires decimals, you’ll need to reflect this in the step value (e.g. step=»0.01″ to allow decimals to two decimal places). Here’s a simple example:
See that this example allows any value between 0.0 and 10.0, with decimals to two places. «9.52» is valid, but «9.521» is not, for example.
Controlling input size
For example, to adjust the width of the input to be only as wide as is needed to enter a three-digit number, we can change our HTML to include an ID and to shorten our placeholder since the field will be too narrow for the text we have been using so far:
Then we add some CSS to narrow the width of the element with the ID number :
The result looks like this:
Offering suggested values
Use of the list attribute with number inputs is not supported in all browsers. It works in Chrome and Opera, for example, but not in Firefox.
Validation
We have already mentioned a number of validation features of number inputs, but let’s review them now:
The following example exhibits all of the above features, as well as using some CSS to display valid and invalid icons when the input value is valid/invalid:
Try submitting the form with different invalid values entered — e.g. no value, a value below 0 or above 100, a value that is not a multiple of 10, or a non-numerical value — and see how the error messages the browser gives you differ with different ones.
The CSS applied to this example is as follows:
Here we use the :invalid and :valid pseudo classes to display an appropriate invalid or valid icon as generated content on the adjacent element, indicating if the current value is valid. We put it on a separate element for added flexibility; some browsers don’t display generated content very effectively on some types of form inputs (read for example the section on validation).
Important: HTML form validation is not a substitute for server-side scripts that ensure that the entered data is in the proper format. It’s far too easy for someone to make adjustments to the HTML that allow them to bypass the validation, or to remove it entirely. It’s also possible for someone to bypass your HTML and submit the data directly to your server. If your server-side code fails to validate the data it receives, disaster could strike when improperly-formatted data is submitted (or data which is too large, is of the wrong type, and so forth).
Pattern validation
elements do not support use of the pattern attribute for making entered values conform to a specific regex pattern. The rationale for this is that number inputs won’t be valid if they contain anything except numbers, and you can constrain the minimum and maximum number of valid digits using the min and max attributes, as explained above.
Examples
We’ve already covered the fact that by default, the increment is 1, and you can use the step attribute to allow decimal inputs. Let’s take a closer look. In the following example we’ve set up a form for entering the user’s height; it defaults to accepting a height in meters, but you can click the relevant button to change the form to accept feet and inches instead. The input for the height in meters accepts decimals to two places.
The HTML looks like this:
We’ve hidden the feet and inches inputs initially using class=»hidden» so that meters is the default entry type.
Now on to the CSS — this looks very similar to the validation styling we saw before; nothing remarkable here:
And finally, the JavaScript:
After declaring a few variables, we add an event listener to the button to control the switching mechanism. This is pretty simple, mostly involving changing over the button class and label, and updating the display values of the two sets of inputs when the button is pressed. Note that we’re not converting back and forth between meters and feet/inches here, which a real-life web application would probably do.
Note that when the user clicks the button, we remove the required attribute(s) from the input(s) we are hiding, and empty the value attribute(s). This is so that we can submit the form if both input sets aren’t filled in, and won’t submit data that we didn’t mean to submit. If we didn’t do this, you’d have to fill in both feet/inches and meters to submit the form!
Html поле ввода чисел
elements of type number are used to let the user enter a number. They include built-in validation to reject non-numerical entries.
The browser may opt to provide stepper arrows to let the user increase and decrease the value using their mouse or by tapping with a fingertip.
Value
A Number representing the value of the number entered into the input. You can set a default value for the input by including a number inside the value attribute, like so:
Additional attributes
In addition to the attributes commonly supported by all types, inputs of type number support these attributes.
The values of the list attribute is the id of a element located in the same document. The provides a list of predefined values to suggest to the user for this input. Any values in the list that are not compatible with the type are not included in the suggested options. The values provided are suggestions, not requirements: users can select from this predefined list or provide a different value.
The maximum value to accept for this input. If the value entered into the element exceeds this, the element fails constraint validation. If the value of the max attribute isn’t a number, then the element has no maximum value.
This value must be greater than or equal to the value of the min attribute.
The minimum value to accept for this input. If the value of the element is less than this, the element fails constraint validation. If a value is specified for min that isn’t a valid number, the input has no minimum value.
This value must be less than or equal to the value of the max attribute.
placeholder
The placeholder attribute is a string that provides a brief hint to the user as to what kind of information is expected in the field. It should be a word or short phrase that demonstrates the expected type of data, rather than an explanatory message. The text must not include carriage returns or line feeds.
If the control’s content has one directionality (LTR or RTL) but needs to present the placeholder in the opposite directionality, you can use Unicode bidirectional algorithm formatting characters to override directionality within the placeholder; see Overriding BiDi using Unicode control characters in The Unicode Bidirectional Text Algorithm for those characters.
Note: Avoid using the placeholder attribute if you can. It is not as semantically useful as other ways to explain your form, and can cause unexpected technical issues with your content. See Labels and placeholders in : The Input (Form Input) element for more information.
readonly
A Boolean attribute which, if present, means this field cannot be edited by the user. Its value can, however, still be changed by JavaScript code directly setting the HTMLInputElement value property.
Note: Because a read-only field cannot have a value, required does not have any effect on inputs with the readonly attribute also specified.
A string value of any means that no stepping is implied, and any value is allowed (barring other constraints, such as min and max ).
Note: When the data entered by the user doesn’t adhere to the stepping configuration, the user agent may round to the nearest valid value, preferring numbers in the positive direction when there are two equally close options.
Using number inputs
Important: Bear in mind that, logically, you should not be able to enter characters inside a number input other than numbers. There seems to be some disagreement about this among browsers; see bug 1398528.
Note: It’s crucial to remember that a user can tinker with your HTML behind the scenes, so your site must not use simple client-side validation for any security purposes. You must verify on the server side any transaction in which the provided value may have security implications of any kind.
Mobile browsers further help with the user experience by showing a special keyboard more suited for entering numbers when the user tries to enter a value.
A simple number input
In its most basic form, a number input can be implemented like this:
A number input is considered valid when empty and when a single number is entered, but is otherwise invalid. If the required attribute is used, the input is no longer considered valid when empty.
Note: Any number is an acceptable value, as long as it is a valid floating point number (that is, not NaN or Infinity).
Placeholders
Here, we have an number input with the placeholder » Multiple of 10 «. Note how the placeholder disappears and reappears as you manipulate the contents of the edit field.
Controlling step size
By default, the up and down buttons provided for you to step the number up and down will step the value up and down by 1. You can change this by providing a step attribute, which takes as its value a number specifying the step amount. Our above example contains a placeholder saying that the value should be a multiple of 10, so it makes sense to add a step value of 10 :
In this example, you should find that the up and down step arrows will increase and decrease the value by 10 each time, not 1. You can still manually enter a number that’s not a multiple of 10, but it will be considered invalid.
Specifying minimum and maximum values
In this updated version, you should find that the up and down step buttons will not allow you to go below 0 or above 100. You can still manually enter a number outside these bounds, but it will be considered invalid.
Allowing decimal values
One issue with number inputs is that their step size is 1 by default. If you try to enter a number with a decimal (such as «1.0»), it will be considered invalid. If you want to enter a value that requires decimals, you’ll need to reflect this in the step value (e.g. step=»0.01″ to allow decimals to two decimal places). Here’s a simple example:
Controlling input size
For example, to adjust the width of the input to be only as wide as is needed to enter a three-digit number, we can change our HTML to include an id and to shorten our placeholder since the field will be too narrow for the text we have been using so far:
Then we add some CSS to narrow the width of the element with the id selector #number :
The result looks like this:
Offering suggested values
Validation
We have already mentioned a number of validation features of number inputs, but let’s review them now:
The following example exhibits all of the above features, as well as using some CSS to display valid and invalid icons, depending on the input ‘s value:
Try submitting the form with different invalid values entered — e.g., no value; a value below 0 or above 100; a value that is not a multiple of 10; or a non-numerical value — and see how the error messages the browser gives you differ with different ones.
The CSS applied to this example is as follows:
Here we use the :invalid and :valid pseudo classes to display an appropriate invalid or valid icon as generated content on the adjacent element, as a visual indicator of validity.
We put it on a separate element for added flexibility. Some browsers don’t display generated content very effectively on some types of form inputs. (Read, for example, the section on validation.)
Important: HTML form validation is not a substitute for server-side scripts that ensure that the entered data is in the proper format!
It’s far too easy for someone to make adjustments to the HTML that allow them to bypass the validation, or to remove it entirely. It’s also possible for someone to bypass your HTML and submit the data directly to your server.
If your server-side code fails to validate the data it receives, disaster could strike when improperly-formatted data is submitted (or data which is too large, is of the wrong type, and so forth).
Pattern validation
elements do not support use of the pattern attribute for making entered values conform to a specific regex pattern.
The rationale for this is that number inputs won’t be valid if they contain anything except numbers, and you can constrain the minimum and maximum number of valid digits using the min and max attributes (as explained above).
Examples
In the following example is a form for entering the user’s height. It defaults to accepting a height in meters, but you can click the relevant button to change the form to accept feet and inches instead. The input for the height in meters accepts decimals to two places.
The HTML looks like this:
Now, onto the CSS. This looks very similar to the validation styling we saw before; nothing remarkable here.
And finally, the JavaScript:
(Note that we’re not converting back and forth between meters and feet/inches here, which a real-life web application would probably do.)
Note: When the user clicks the button, the required attribute(s) are removed from the input(s) we are hiding, and empty the value attribute(s). This is so the form can be submitted if both input sets aren’t filled in. It also ensures that the form won’t submit data that the user didn’t mean to.
If you didn’t do this, you’d have to fill in both feet/inches and meters to submit the form!
HTML Типы ввода
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»
позволяет пользователю выбрать неделю и год.
В зависимости от поддержки браузера в поле ввода может отображаться средство выбора даты.