logo

Типови уноса ХТМЛ образаца

У ХТМЛ-у је важан елемент ХТМЛ форме. Атрибут 'типе' елемента уноса може бити различитих типова, што дефинише информационо поље. Као што даје оквир за текст.

Следи листа свих типова елемената ХТМЛ-а.

типе=' ' Опис
текст Дефинише једнолинијско поље за унос текста
Лозинка Дефинише једнолинијско поље за унос лозинке
прихвати Дефинише дугме за слање за слање обрасца на сервер
ресетовати Дефинише дугме за ресетовање за ресетовање свих вредности у обрасцу.
радио Дефинише радио дугме које омогућава одабир једне опције.
поље за потврду Дефинише поља за потврду која омогућавају избор више опција у облику.
дугме Дефинише једноставно дугме које се може програмирати да изврши задатак на догађају.
фајл Дефинише избор датотеке из складишта уређаја.
слика Дефинише графичко дугме за слање.

ХТМЛ5 је додао нове типове на елемент. Следи листа типова елемената ХТМЛ5

типе=' ' Опис
боја Дефинише поље за унос одређеном бојом.
датум Дефинише поље за унос за избор датума.
датетиме-лоцал Дефинише поље за унос за унос датума без временске зоне.
емаил Дефинише поље за унос за унос адресе е-поште.
месец дана Дефинише контролу са месецом и годином, без временске зоне.
број Дефинише поље за унос за унос броја.
урл Дефинише поље за унос УРЛ адресе
Недеља Дефинише поље за унос датума са седмичном годином, без временске зоне.
Претрага Дефинише текстуално поље у једном реду за унос стринга за претрагу.
тел Дефинише поље за унос за унос телефонског броја.

Следи опис типова елемената са примерима.

1. :

елемент типа 'тект' се користи за дефинисање једноредног поља за унос текста.

Пример:

 Enter first name <br> <br> Enter last name <br> <br> <p> <strong>Note:</strong> The default maximum cahracter lenght is 20.</p> 
Тестирајте одмах

Излаз:

Унесите тип 'текста':

Тхе 'текст' поље дефинише једноструко поље за унос текста.

дфс алгоритам
Унесите име

Унесите презиме

Белешка: Подразумевана максимална дужина цахрацтера је 20.


2. :

Елемент типа 'пассворд' омогућава кориснику да безбедно унесе лозинку на веб страници. Унети текст у пољу лозинке конвертован је у '*' или '.', тако да други корисник не може да га прочита.

Пример:

 Enter User name <br> <br> Enter Password <br> <br> <br> 
Тестирајте одмах

Излаз:

Унесите тип 'лозинке':

Тхе 'Лозинка' поље дефинише поље за унос лозинке у једној линији за сигуран унос лозинке.

Унесите име

Унесите лозинку



3. :

Елемент типа 'субмит' дефинише дугме за слање за слање обрасца серверу када дође до догађаја 'клик'.

Пример:

 Enter User name <br> <br> Enter Password <br> <br> <br> 
Тестирајте одмах

Излаз:

Унесите тип 'пошаљи':

Унесите име

Унесите лозинку


Након што кликнете на дугме за слање, ово ће послати образац на сервер и преусмерити страницу на поступак валуе. Научићемо о атрибуту 'ацтион' у каснијим поглављима


4. :

Тип 'ресет' је такође дефинисан као дугме, али када корисник изврши догађај клика, он подразумевано ресетује све унете вредности.

Пример:

 User id: Password: <br> <br> 
Тестирајте одмах

Излаз:

Унесите тип 'ресетовања':

ИД корисника: Лозинка:

Покушајте да промените улазне вредности корисничког ИД-а и лозинке, а затим када кликнете на ресетовање, вратиће се поља за унос са подразумеваним вредностима.


5. :

Тип 'радио' дефинише радио дугмад, која омогућавају избор опције између скупа повезаних опција. Истовремено се може изабрати само једна опција радио дугмета.

Пример:

Молимо одаберите своју омиљену боју

Црвени
Плави
зелен
розе
Тестирајте одмах

Излаз:

Унесите тип 'радио'

Молимо одаберите своју омиљену боју

Црвени
Плави
зелен
розе

6. :

Тип 'цхецкбок' се приказује као квадратна поља која се могу означити или опозвати да бисте изабрали изборе из датих опција.

Напомена: 'радио' дугмад су слична пољима за потврду, али постоји битна разлика између оба типа: радио дугмад омогућавају кориснику да изабере само једну опцију у исто време, док поље за потврду омогућава кориснику да изабере нула до више опција истовремено .

Пример:

 Enter your Name: <p>Kindly Select your favourite sports</p> Cricket <br> Tennis <br> Football <br> Baseball <br> Badminton <br> <br> 
Тестирајте одмах

Излаз:

Унесите тип поља за потврду


Образац за регистрацију

Унесите своје име:

Молимо одаберите свој омиљени спорт

крикет
Тенис
Фудбал
бејзбол
Бадминтон


7. :

Тип 'дугме' дефинише једноставно дугме које се може програмирати да функционално контролише било који догађај као што је клик догађај.

Напомена: Углавном ради са ЈаваСцрипт-ом.

Пример:

 
Тестирајте одмах

Излаз:

Унесите тип 'дугме'.

Кликните на дугме да видите резултат:

Напомена: У горњем примеру смо користили 'упозорење' ЈС-а, које ћете научити у нашем ЈС туторијалу. Користи се за приказ поп прозора.


8. :

Елемент са типом 'филе' се користи за одабир једне или више датотека из складишта корисничког уређаја. Када изаберете датотеку, и након слања, ова датотека се може отпремити на сервер уз помоћ ЈС кода и АПИ датотеке.

Пример:

 Select file to upload: 
Тестирајте одмах

Излаз:

Унесите тип 'фајла'.

Можемо изабрати било коју врсту датотеке све док је не наведемо! Изабрана датотека ће се појавити поред опције 'одабери датотеку'

Изаберите датотеку за отпремање:

9. :

Тип 'имаге' се користи за представљање дугмета за слање у облику слике.

Пример:

 <h2>Input &apos;image&apos; type.</h2> <p>We can create an image as submit button</p> User id: <br> <br> <br> 

ХТМЛ5 новододати елемент типа

1. :

Тип 'цолор' се користи за дефинисање поља за унос које садржи боју. Омогућава кориснику да одреди боју помоћу визуелног интерфејса боја у претраживачу.

Напомена: Тип 'цолор' подржава само вредност боје у хексадецималном формату, а подразумевана вредност је #000000 (црна).

Пример:

 Pick your Favorite color: <br> <br> Upclick <br> <br> Downclick 
Тестирајте одмах

Излаз:

Унесите типове 'боја':

Изаберите своју омиљену боју:

Клик нагоре

Кликните на доле

Белешка: Подразумевана вредност типа 'цолор' је #000000 (црна). Подржава само вредност боје у хексадецималном формату.

поверсхелл админ

2. :

Елемент типа 'дате' генерише поље за унос, које омогућава кориснику да унесе датум у датом формату. Корисник може да унесе датум преко текстуалног поља или интерфејса бирача датума.

Пример:

 Select Start and End Date: <br> <br> Start date: <br> <br> End date: <br> <br> 
Тестирајте одмах

Излаз:

Унесите тип 'датум'

Изаберите датум почетка и завршетка:

Датум почетка:

Крајњи датум:


3. :

Елемент типа 'датетиме-лоцал' креира улазно поље које омогућава кориснику да изабере датум као и локално време у сату и минуту без информација о временској зони.

Пример:

 Select the meeting schedule: <br> <br> Select date &amp; time: <br> <br> 
Тестирајте одмах

Излаз:

Унесите тип 'датетиме-лоцал'

Изаберите распоред састанка:

Изаберите датум и време:


4. :

Тип 'е-пошта' креира поље за унос који омогућава кориснику да унесе адресу е-поште са валидацијом узорка. Вишеструки атрибути омогућавају кориснику да унесе више од једне адресе е-поште.

Пример:

 <b>Enter your Email-address</b> <p> <strong>Note:</strong> User can also enter multiple email addresses separating by comma or whitespace as following: </p> <b>Enter multiple Email-addresses</b> 
Тестирајте одмах

Излаз:

Унесите тип е-поште

Унесите своју имејл адресу

Белешка: Корисник такође може да унесе више адреса е-поште раздвојених зарезом или размаком на следећи начин:

Унесите више адреса е-поште

5. :

Тип 'месец' креира поље за унос које омогућава кориснику да лако унесе месец и годину у формату 'ММ, ГГГГ' где ММ дефинише вредност месеца, а ГГГГ дефинише вредност године. Нова

Пример:

 Enter your Birth Month-year: 
Тестирајте одмах

Излаз:

боол у ​​стринг јава

Унесите тип 'месец':

Унесите годину свог рођења:

6. :

Број типа елемента ствара улазно поље које омогућава кориснику да унесе нумеричку вредност. Такође можете ограничити унос минималне и максималне вредности помоћу атрибута мин и мак.

Пример:

 Enter your age: 
Тестирајте одмах

Излаз:

Унесите тип „броја“.

Унесите своје године:

Белешка: Омогућава унос броја у распону од 50-80. Ако желите да унесете број који није опсег, приказаће се грешка.


7. :

Елемент типа 'урл' креира улазно поље које омогућава кориснику да унесе УРЛ.

Пример:

 Enter your website URL: <br> 
Тестирајте одмах

Излаз:

Унесите тип 'урл'

Унесите УРЛ вашег веб сајта:

8. :

Тип недеље креира поље за унос које омогућава кориснику да изабере недељу и годину из падајућег календара без временске зоне.

Пример:

 <b>Select your best week of year:</b> <br> <br> 
Тестирајте одмах

Излаз:

Унесите тип „седмица“.

Изаберите своју најбољу недељу у години:


9. :

Тип 'сеарцх' креира улазно поље које омогућава кориснику да унесе стринг за претрагу. Они су функционално симетрични у односу на тип уноса текста, али могу бити другачије стилизовани.

Пример:

 Search here: 
Тестирајте одмах

Излаз:

Унесите тип 'тражи'

Тражење овде:

10. :

Елемент типа ?тел? креира поље уноса за унос телефонског броја. Тип 'тел' нема подразумевану проверу ваљаности као што је е-пошта, јер образац телефонског броја може да варира широм света.

Пример:

 <b>Enter your Telephone Number(in format of xxx-xxx-xxxx):</b> <br> <br> 
Тестирајте одмах

Излаз:

Унесите тип 'тел'

Унесите свој број телефона (у формату ккк-ккк-кккк):

Белешка: Овде користимо два атрибута који су 'паттерн' и 'рекуиред' који ће омогућити кориснику да унесе број у датом формату и потребно је да унесе број у поље за унос.