Html type number input: — HTML: HyperText Markup Language

Генератор HTML Number Input — Онлайн инструмент и C# код

Генерируйте HTML Number Input на лету!

Элемент input с type="number" определяет поле для ввода числа. Он включает встроенную проверку отклонения нечисловых записей. Вы также можете установить ограничения на принимаемые значения. Генератор HTML Number Input помогает вам генерировать HTML Number Input, который можно вставить в HTML документ. Просто выберите параметры и сгенерируйте поле ввода числа на лету!

Атрибуты

HTML Number Input обычно содержит атрибуты name, value, min, max и step.

• С помощью атрибутов min и max вы можете устанавливать минимальное и максимальное значения.
• Атрибут step представляет собой число, указывающее степень детализации. Значение step по умолчанию равно 1.
• Атрибут placeholder представляет собой строку, которая дает пользователю краткую подсказку о том, какая информация ожидается в поле.

Создать HTML Number Input на C#

Aspose.HTML для .NET API работает как автономный браузер, который позволяет создавать или открывать существующие HTML-документы из различных источников для выполнения операций редактирования, таких как удаление, добавление и замена узлов HTML. Если вы хотите использовать функции редактирования HTML в своем продукте или программно добавить HTML number input, рассмотрите приведенный ниже пример кода C#:

Шаги по созданию HTML Number Input на C#

1. Используйте метод CreateElement() класса Document для создания HTMLInputElement.
2. Установите значения для Type и Name атрибутов.
3. Используйте метод SetAttribute() , чтобы добавить value, min, max, placeholder, step атрибуты и их значения.
4. Скопируйте код C# для HTML Number Input и используйте его в своем проекте C#.

FAQ

1. Зачем использовать Генератор HTML Number Input?

Этот инструмент отлично подходит для людей, которые не умеют программировать и нуждаются в HTML number input для размещения на своем веб-сайте. Кроме того, этот Генератор HTML Number Input будет полезен разработчикам, которые хотят быстро и легко создавать и настраивать элементы для своих проектов HTML или C#. Генерируйте, предварительно просматривайте результат и используйте сгенерированный код там, где он вам нужен.

2. Какие браузеры я могу использовать?

Сгенерированный HTML код для HTML number input будет работать без проблем во всех современных браузерах, таких как Chrome, Opera, Firefox, Safari, Edge и IE, а также в других основных браузерах. Aspose.HTML for .NET API позволяет создавать код C#, который можно использовать в любом приложении .NET. Он работает на всех платформах, включая Windows, Linux, Mac OS, Android и iOS.

3. Как скопировать код для моего сайта?

После создания HTML number input перейдите к сгенерированному коду. Скопируйте HTML код и вставьте его туда, куда вам требуется, чтобы элемент отображался в нужном месте на вашем сайте. С другой стороны, вы можете получить код C# для HTML number input, скопируйте и используйте его в своем проекте C#.

Начало работы с .NET HTML API

Вы можете использовать несколько способов установки библиотеки Aspose.HTML для .NET в вашей системе:

• Установите пакет NuGet с помощью графического интерфейса диспетчера пакетов NuGet.
• Установите пакет NuGet с помощью консоли диспетчера пакетов.
• Установите Aspose.HTML для .NET через MSI.

Aspose.HTML для .NET поддерживает синтаксический анализ HTML5, CSS3, SVG и HTML Canvas для создания объектной модели документа (DOM) на основе стандарта WHATWG DOM. Библиотека полностью написана на C# и может использоваться для создания любого типа 32-битного или 64-битного приложения .NET, включая ASP.NET, WCF, WinForms и .NET Core. Прежде чем запускать код примера преобразования .NET, убедитесь, что у вас есть ОС, такая как Microsoft Windows, или совместимая с .NET Framework или .NET Standard, и среда разработки, такая как Microsoft Visual Studio. Дополнительные сведения об установке библиотеки C# и системных требованиях вы найдете в документации Aspose. HTML.

Другие поддерживаемые Генераторы HTML

С помощью Генераторов HTML-кода вся тяжелая работа уже сделана за вас. Все, что вам нужно сделать, это скопировать и вставить. Ясно, безопасно и просто!

HTML Button

HTML Checkbox

HTML Radio Button

HTML Email Input

HTML Color Input

HTML Date & Time Input

HTML File Input

HTML Image Input

HTML Number Input

HTML Password Input

HTML Range Input

HTML Search Input

HTML Submit Input

HTML Telephone Input

HTML Text Input

HTML Textarea

HTML URL Input

HTML Audio

HTML Image

HTML Video

HTML Table

HTML iFrame

HTML <bdo> Tag

HTML <code> Tag

HTML <cite> Tag

HTML <mark> Tag

HTML <strong> Tag

HTML Emphasize Text

HTML Strikethrough

HTML Superscript & Subscript

HTML Underline Text

HTML Quote & Blockquote

HTML Details

HTML Dialog

HTML Hyperlink

HTML List Tag

HTML Meter Tag

HTML Progress

Когда использовать ввод числа.

Это выдержка из Дизайна форм… | Адам Сильвер Фотография шаблонов дизайна форм Грэма Вила.

Это выдержка из Шаблоны проектирования форм . Мы находимся в середине главы 2, Форма оплаты, где мы рассмотрели форму платежных реквизитов, состоящую из номера карты, срока действия, кода безопасности из полей и т. д.

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

Ввод цифр с крошечными кнопками-вращателями внутри.

Вы можете подумать, что ввод числа подходит для номера карты, срока действия и номера CVC — в конце концов, все они состоят из цифр. Но это сложнее. Глядя на то, что говорит спецификация, что делают браузеры и чего хотят пользователи, мы можем легче определить, подходит ли ввод числа или нет.

Начнем с определений. Википедия говорит, что:

«Число — это математический объект, используемый для подсчета, измерения и обозначения. […] Цифры часто используются для меток (как в случае с телефонными номерами), для заказа (как в случае с серийными номерами) и для кодов (как в случае с ISBN)».

Большинство из нас думают о числах именно так. Мы используем их для подсчета и измерения, но в равной степени мы используем их в датах и ​​кодах. Однако спецификация HTML лишь частично согласуется с этим определением. В нем говорится, что:

«Состояние type=number не подходит для ввода, который состоит только из чисел, но, строго говоря, не является числом. […] Когда интерфейс счетчика не подходит, type=text, вероятно, будет правильным выбором (возможно, с атрибутом шаблона)».

Другими словами, числа и цифры разные. Цифры представляют собой количество чего-то вроде:

• мой возраст объявлено «тридцать четыре года»
• цена яблока объявлена ​​«сорок пять пенсов»
• время, которое мне потребовалось для приготовления завтрака объявлено «десять минут»

И наоборот, числа могут использоваться для дат и кодов, таких как:

• дата рождения объявлена ​​«девятнадцатое июня тысяча девятьсот восемьдесят третьего»
• пин-код объявлен «восемь, двойная пятерка, три, два, шесть»

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

Например, IE11 и Chrome будут игнорировать нечисловой ввод, такой как буква (кроме действительной e) или косая черта. Некоторые старые версии iOS автоматически преобразуют «1000» в «1000». Safari 6 удаляет ведущие нули. Каждый пример кажется нежелательным, но ни один из них не мешает пользователям вводить истинные цифры.

Для некоторых чисел требуется десятичная точка, например для цены; отрицательные числа нуждаются в знаке минус. К сожалению, некоторые браузеры не имеют кнопок для этих символов на клавиатуре. Если этого недостаточно, некоторые настольные версии Firefox округляют огромные числа.

В этих случаях безопаснее использовать обычное текстовое поле, чтобы избежать ненужного исключения пользователей. Помните, что пользователи по-прежнему могут набирать числа таким образом — просто кнопки на клавиатуре меньше. Чтобы еще больше смягчить удар, для пользователей iOS можно активировать цифровую клавиатуру с помощью атрибута шаблона.

Короче говоря, используйте числовой ввод, только если:

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

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

Мы рассмотрим подходящие варианты использования числового ввода в следующей главе.

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

Я хотел ввести число

Формы — это основа, на которой пользователи взаимодействуют с Интернетом. Долгое время формы контроля были застойными и надежными. HTML5 принес нам обновления, указав новый 9Типы 0012 связаны с новыми элементами управления интерфейсом, которые постепенно улучшаются по сравнению с ванильным текстовым вводом прошлых лет. Проверенная боем истина о новых веб-функциях и стандартах оказалась очень верной с этими новыми элементами управления формой: реализации браузеров различаются.

Эта изменчивость браузера особенно актуальна для сенсорных устройств, особенно в отношении основного нововведения клавиатуры с сенсорным экраном: ее гибкости или адаптации режима ввода в соответствии с контекстом. Например, когда на сайте указано, что пользователь должен ввести число, браузер может отобразить цифровую клавиатуру, похожую на клавиатуру (от 0 до 9).) с очень большими кнопками для более простого, быстрого и точного ввода чисел. Разница в удобстве использования клавиатур с маленькими и большими кнопками для ввода чисел огромна: )

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

Рассмотрим несколько примеров множества различных типов числового ввода, который нам может понадобиться для ввода в наши веб-формы:

1. Цены (иногда целые числа с разделителями тысяч, но часто используются как нецелые числа)
2. Почтовые индексы (в США они могут содержать ведущие нули)
3. Кредитные карты (очень длинные номера)
4. Коды безопасности кредитной карты: CVV, CVC или CSC (также могут иметь ведущие нули)
5. Подарочные карты (форматы различаются)
6. Возраст
7. Год
8. Раз (минуты или секунды могут иметь ведущие нули)
9. Номера телефонов

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

Давайте сверимся со спецификацией

Подожди, вернись! Спецификация HTML5 для input type="number" даст нам подсказки о том, какой тип ввода будет принят элементом управления, так что давайте установим этот уровень.

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

Числа с плавающей запятой состоят из одного или нескольких символов в диапазоне от 0 до 9 (цифры, да?), за которыми может следовать десятичная точка и другие символы от 0 до 9. Числа с плавающей запятой также могут иметь начальные числа – для обозначения отрицательного числа.

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

Важным и проблематичным моментом здесь является то, что значения, которые технически подчиняются приведенному выше определению спецификации с плавающей запятой, могут работать с . Обратите внимание на [последнее зеленое примечание в спецификации форм W3 HTML5](https://www.w3.org/TR/html5/forms.html#number-state-(type=number\)):

Состояние type=number не подходит для ввода, который состоит только из чисел, но, строго говоря, не является числом. Например, это было бы неуместно для номеров кредитных карт или почтовых индексов США. Простой способ определить, следует ли использовать type=number, состоит в том, чтобы рассмотреть, имеет ли смысл для элемента управления вводом иметь интерфейс счетчика (например, со стрелками «вверх» и «вниз»).

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

Из примечаний к спецификации мы можем понять, что type="number" предназначен для таких чисел, как Prices, Ages и Years; type="tel" для телефонных номеров; type="text" для всего остального. Остается много полей числового ввода с нежелательной маленькой кнопкой, по умолчанию тип="текст" клавиатура.

`type="text"` Клавиатура на Android 6 (Samsung Galaxy S7)

Полезный прагматизм

Существуют очень полезные способы подписки на цифровую клавиатуру с большими кнопками, доступные для использования в современных браузерах:

• type ="номер"
• Атрибут шаблона (только iOS)
• тип="тел"

type="number"

Мы можем выбирать между следованием спецификации и неоптимальной клавиатурой для числового ввода на большом количестве устройств, или мы можем изучить другие варианты, чтобы это работало. При тестировании на Android (как в Chrome, так и в старом браузере Android), Firefox для Android и Windows Phone единственный способ вызвать клавиатуру с большими кнопками — игнорировать спецификацию W3C и использовать тип="число" .

Попробуйте в браузере

тип = "число"

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

Без десятичной точки : Android 2.3 (Samsung Galaxy S2) с type="number" Похоже на телефонный ввод : Android 2.3 (Motorola Droid Razr) с type="number" Без знака "минус" : Android 6 (Samsung Galaxy S7) с type="number"

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

Выглядит великолепно : Firefox 47 на Android 5.1.1 (Motorola Nexus 6) с type="number"

Windows Phone также не поддерживает отрицательные числа на клавиатуре type="number" .

Без отрицательного знака : Windows Phone 8.1 (Lumia 930) с type="number"

В iOS клавиатура type="number" отличается от клавиатуры type="text" (и безопасна для используйте в соответствии со спецификацией: у него есть клавиши для отрицательных и десятичных точек), но это не та большая кнопка, к которой мы стремимся.

Маленькие кнопки : iOS 9 с type="number"

Шаблон

Атрибут

Цифровая клавиатура с большими кнопками на iOS (на iPhone) отображается, когда 9Атрибут шаблона 0011 имеет значение [0-9]* или \d* . iOS (на iPhone) не важно, какое значение атрибута типа . Это может быть текст , номер и так далее. Но если pattern="[0-9]*" или pattern="\d*" , iOS (на iPhone) покажет цифровую клавиатуру с большой кнопкой.

Цифровая клавиатура с большими кнопками отсутствует в версии iOS для iPad — только в версии для iPhone. Благодаря большему экранному пространству для работы на iPad с помощью одобренного pattern value, type="tel" или type="number" используют цифровую клавиатуру с маленькой кнопкой, показанную выше.

Похоже на телефонный ввод : iOS 9 (на iPhone) с type="text" pattern="[0-9]*

Следует отметить, что функционально эквивалентные регулярные выражения с одинаковым выводом не показать цифровую клавиатуру, например [0123456789]* или [0-9]{0,} или [0123456789]{0,} .

Логически, поскольку iOS (на iPhone) привязывает эту клавиатуру к регулярному выражению шаблона , состоящего только из чисел, кнопки для знака минус или десятичной точки просто не существуют на клавиатуре с большими кнопками.

Важно отметить, что iOS (на iPhone) не позволяет пользователю переключать типы клавиатуры, когда отображается цифровая клавиатура с большой кнопкой. Ввод истинных чисел с плавающей запятой просто не разрешен в соответствии с явно определенным шаблоном .

Попробуйте в браузере

тип="текст" шаблон="[0-9]*"

Обратите внимание, что атрибут шаблона перегружен для управления проверкой формы HTML5. Это заставляет разработчиков выбирать между цифровой клавиатурой или более точным шаблоном проверки, например. регулярное выражение для двузначного числа pattern="[0-9]{2}" не будет использовать цифровую клавиатуру.

К сожалению, трюк Pattern для цифровых клавиатур с большими кнопками работает только на iOS. Другие веб-браузеры будут отображать значение по умолчанию 9.0011 текст клавиатура, когда используются значения атрибута шаблона белого списка iOS, поэтому нам необходимо дополнить этот метод другими методами. К счастью, сочетание шаблона с type="number" активирует цифровую клавиатуру с большой кнопкой на всех платформах, которые мы обсуждали до сих пор.

Попробуйте в браузере

тип="число" шаблон="[0-9]*"

type="tel"

При использовании type="number" для некоторых из этих других форматов номеров в свободной форме противоречит духу спецификации, использование type="tel" для вещей, которые не являются телефонными номерами, является гораздо более вопиющим семантическим преступлением. Я бы не считал это жизнеспособной перспективной альтернативой type="number" для числового ввода.

Попробуйте в браузере

тип="тел"

Должен быть лучший способ

К счастью, люди, занимающиеся веб-стандартами, распознали этот беспорядок и стандартизировали аппетитную альтернативу: атрибут inputmode . inputmode позволяет напрямую указать, какой тип клавиатуры использовать, независимо от значения атрибута type . Например, в поле номера кредитной карты мы могли бы использовать type="text" и inputmode="numeric" вместе — проблема решена.

На момент написания inputmode нигде не поддерживается. Это действительно неудачно — это устранило бы большую часть несоответствия использования бодаются головой с определением спецификации. Это помогло бы, в частности, на Android, Firefox на Android и Windows Phone, где цифровая клавиатура с большими кнопками привязана к type="number" .

Дополнительное примечание: хотя inputmode="numeric" выглядит аппетитно и помогло бы решить некоторые проблемы, в спецификации по-прежнему отсутствует положение для нецелых чисел. Даже после того, как браузеры поддержат эту функцию, нам все равно придется использовать type="text" без inputmode для нецелых чисел, учитывая ненадежность кнопок десятичной точки на современных цифровых клавиатурах.

Попробуйте в браузере

тип = "текст" режим ввода = "числовой"

Обход наших ограничений

Когда мы исследовали эту проблему, стало ясно, что если мы хотим предоставить эффективный способ ввода чисел на самом широком диапазоне устройств, мы должны быть прагматичными и комбинировать шаблон , и 9.0011 тип=»число» . Поскольку мы используем type="number" в большем количестве мест, чем может быть одобрено спецификацией, мы должны путешествовать с большой осторожностью и сглаживать морщины по пути.

Мы обернули то, что узнали, в небольшую утилиту под названием numeric-input , которая позволяет нам сегодня использовать цифровую клавиатуру с большими кнопками, обходя при этом некоторые неприятные ошибки, с которыми мы столкнулись при вводе чисел. Вот что он делает:

Ограничить только числами

Поскольку это ввод предназначен для ввода только числовых значений, 9Плагин 0011 numeric-input отфильтровывает любые символы, отличные от 0-9, когда вы вводите, вставляете или значение автоматически заполняется браузером.

Примечание. Эта фильтрация означает «-» и «.» символы удаляются, поэтому отрицательных числа или десятичных знака не поддерживаются этим плагином. Несмотря на то, что это «числа», лучше не использовать для них цифровую клавиатуру из-за неравномерной поддержки кнопок с отрицательными числами и десятичной точкой на цифровой клавиатуре (как вы можете видеть на снимках экрана выше). Используйте type="text" для этих полей.

Поддержка начальных нулей

Начальные нули, используемые в почтовых индексах США, или минуты/секунды отбрасываются при размытии в Safari 6). Например, почтовый индекс будет изменен с «01234» на «1234». Наш плагин просто переключает поля type="number" на type="text" в старом Safari, поэтому значение остается в покое. К счастью, трюк с шаблоном по-прежнему обеспечивает большую клавиатуру на старых iOS.

Предотвращение округления больших чисел

Большие числа, длина которых превышает 16 цифр, округляются в Firefox (для ПК, а не для Android или iOS). Например, el.value = "9999999999999999"; рендерит 10000000000000000 . Это большая проблема для ввода 16-значных кредитных карт, поэтому плагин также переключает поля type="number" на type="text" в Firefox (Desktop), чтобы обойти эту ошибку.

Поддержка

maxlength

Если мы хотим установить определенную длину значения (скажем, 5 цифр для почтового индекса), нет способа указать maxlength="5" с собственным числовым вводом. Конечно, вы можете добавить атрибут max="99999" , но плагин также добавляет поддержку maxlength , чтобы указать, сколько символов вы хотите принять. Работает с вводом с клавиатуры, вставкой и автозаполнением.

Удалить счетчики и клавиши со стрелками

Браузеры для настольных ПК имеют полезные функции для увеличения или уменьшения значения в числовом поле: добавление маленьких крошечных «вращающихся» стрелок вверх/вниз внутри полей, привязка клавиш со стрелками вверх/вниз на клавиатуре и колесика мыши события. В некоторых случаях такое поведение может быть очень разрушительным — подумайте, насколько непредсказуемым было бы случайное нажатие клавиши со стрелкой в ​​поле кредитной карты. numeric-input включает параметр (атрибут data-numeric-input-nav-disabled ) для отключения поведения клавиш со стрелками увеличения и уменьшения, а небольшие стрелки счетчика, встроенные иногда в входы type="number" , легко скрыть с помощью CSS.

Стрелки Spinbox в Chrome с type="number"

Используя

numeric-input

Использовать плагин numeric-input довольно просто:

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

Попробуйте в браузере

числовой ввод данных

Несколько предостережений

Научное обозначение не поддерживается

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