Формулярите са незаменим елемент на всяка уеб страница. Те позволяват на потребителите да въвеждат информация ефективно и да я изпращат на сървъра. Особено важно е въвеждането на числа, било то за възрастови групи, измервания или числени идентификатори. В този учебник ще разгледаме различните начини за въвеждане на числа в уеб формуляри и как да използвате оптимално предимствата на HTML въвеждащите елементи от тип „number“.
Най-важните изводи
- HTML въвеждащият елемент от тип „number“ позволява числени въвеждания с функций за валидация.
- Може да се дефинират минимални и максимални стойности, както и стъпки за въвеждане, за да се предотвратят грешни въвеждания.
- Използването на Datalists помага да се предложат възможности за въвеждане на числа и да се помогне на потребителите при избора.
Въвеждащ елемент от тип Number
За създаване на област за въвеждане на числа използваме елемента за въвеждане с тип „number“. Това е особено полезно, когато се изисква да се приемат само определен тип въвеждания.
Първо трябва да се уверите, че атрибутът „type“ е зададен на „number“. Предимствата на този елемент включват възможността да се задават гранични стойности чрез атрибутите „min“ и „max“.
При посочване на минимум „0“ и опит за въвеждане на отрицателно число или прекомерно ниска стойност, при изпращане на формуляра се появява грешка при валидация. Това подобрява потребителското изживяване, като потребителят веднага бива информиран за проблема.
Елементът позволява и задаването на стъпка. Това ви позволява да увеличавате или намалявате стойностите в дефинирани стъпки. Например, може да работите със стъпка „1“, така че всяко увеличение да е с „1“.
За въвеждащия елемент може да се зададе „value“, който представлява стойност, която ще бъде показана при зареждане на формуляра.
Използване на Datalists за стойности по подразбиране
Полезна функция за въвеждащите елементи е използването на Datalists. Това ви позволява да създадете списък със съвети, които потребителят може да избере, когато въвежда стойност.
За да реализирате това, създавате елемент Datalist и му задавате идентификатор. Вътре в Datalist можете да добавите няколко елемента „Option“, които представят възможните стойности.
Във входното поле следва да добавите атрибут „list“ и да свържете идентификатора на Datalist с него. Това води до показване на предложенията, изброени в Datalist, когато потребителят кликне върху полето за въвеждане.
Например, ако имате предложения „10“, „100“ и „1000“ в Datalist, те ще се появят след като потребителят започне въвеждането. Това може да помогне за избягване на погрешки и ускоряване на процеса на въвеждане.
Филтрирането на тези предложения се извършва динамично, в зависимост от текстовия вход на потребителя. След като потребителят започне да пише, списъкът автоматично се променя и показва само съответните опции.
Това е особено полезно, когато искате да гарантирате, че потребителят въвежда само валидни стойности.
Стъпки за изпълнение
- Първо вграждате въвеждащия елемент с тип „number“ в HTML формуляра си.
- Добавете атрибутите „min“, „max“ и „step“, за да дефинирате въвеждането.
- Създайте Datalist с идентификатор и добавете няколко елемента „Option“.
- Задайте на вашето входно поле атрибута „list“ и го свържете с идентификатора на Datalist.
Завършек
Чрез използването на гореспоменатите функции можете да създадете потребителски приятна форма, която не само изисква правилни въведени данни, но и помага на потребителите да изберат правилните стойности.
Резюме
В този урок научихте как да валидирате числови въвеждания в уеб формуляри и как да използвате функционалността на Datalists за полетата за въвеждане.
Често задавани въпроси
Какъв е разликата между типа „текст“ и типа „число“?Типът „число“ позволява специфична валидация за числови въвеждания, докато типът „текст“ приема произволни символи.
Как мога да филтрирам стойностите в Datalist?Когато потребителят започне да въвежда в полето за въвеждане, списъкът с предложения се филтрира автоматично въз основа на въведените символи.
Мога ли да въведа и отрицателни числа?Да, можете да приемете и отрицателни числа, ако минимумът се настрои съответно.
Мога ли да използвам Datalists и с полета за въвеждане на текст?Да, Datalists могат да бъдат използвани както с полета за въвеждане от тип „число“, така и от тип „текст“.
Какво се случва при невалидни въвеждания?При невалидни въвеждания браузърът показва грешка при валидацията, и потребителят се подканва да поправи въвеждането.
