TechCodeview

V HTML je dôležitým prvkom HTML formulár. Atribút 'typ' vstupného prvku môže byť rôznych typov, ktorý definuje informačné pole. Ako napríklad dáva textové pole.

Nasleduje zoznam všetkých typov prvkov HTML.

HTML5 pridalo do prvku nové typy. Nasleduje zoznam typov prvkov HTML5

Nasleduje popis typov prvkov s príkladmi.

1. :

prvky typu 'text' sa používajú na definovanie jednoriadkového vstupného textového poľa.

Príklad:

 Enter first name <br> <br> Enter last name <br> <br> <p> <strong>Note:</strong> The default maximum cahracter lenght is 20.</p> 

Výkon:

Zadajte typ „textu“:

The 'text' pole definuje jednoriadkové textové pole.

.rovná sa java

Poznámka: Predvolená maximálna dĺžka znaku je 20.

2. :

Prvok typu „password“ umožňuje používateľovi bezpečne zadať heslo na webovej stránke. Zadaný text v hesle sa skonvertuje na '*' alebo '.', takže ho nemôže prečítať iný používateľ.

Príklad:

 Enter User name <br> <br> Enter Password <br> <br> <br> 

Výkon:

Zadajte typ „hesla“:

The 'heslo' pole definuje pole pre zadanie hesla na jeden riadok na bezpečné zadanie hesla.

3. :

Prvok typu 'submit' definuje tlačidlo odoslania na odoslanie formulára na server, keď nastane udalosť 'click'.

Príklad:

 Enter User name <br> <br> Enter Password <br> <br> <br> 

Výkon:

Zadajte typ „odoslať“:

Po kliknutí na tlačidlo odoslať sa formulár odošle na server a stránka sa presmeruje na akcie O atribúte „akcia“ sa dozvieme v ďalších kapitolách

4. :

Typ „reset“ je tiež definovaný ako tlačidlo, ale keď používateľ vykoná udalosť kliknutia, predvolene resetuje všetky zadané hodnoty.

Príklad:

 User id: Password: <br> <br> 

Výkon:

Typ vstupu „resetovať“:

Skúste zmeniť vstupné hodnoty ID užívateľa a hesla, potom keď kliknete na reset, obnoví vstupné polia na predvolené hodnoty.

5. :

Typ 'rádio' definuje prepínače, ktoré umožňujú výber možnosti medzi súborom súvisiacich možností. Naraz je možné vybrať len jednu možnosť prepínača.

Príklad:

Vyberte si svoju obľúbenú farbu

Výkon:

Typ vstupu „rádio“.

Vyberte si svoju obľúbenú farbu

6. :

Typ „zaškrtávacie políčko“ sa zobrazuje ako štvorcové políčka, ktoré možno začiarknuť alebo zrušiť, aby ste vybrali možnosti z daných možností.

Poznámka: „Prepínače“ sú podobné ako začiarkavacie políčka, ale medzi oboma typmi je dôležitý rozdiel: prepínače umožňujú používateľovi vybrať iba jednu možnosť naraz, zatiaľ čo začiarkavacie políčko umožňuje používateľovi vybrať nulu až viacero možností naraz. .

Príklad:

 Enter your Name: <p>Kindly Select your favourite sports</p> Cricket <br> Tennis <br> Football <br> Baseball <br> Badminton <br> <br> 

Výkon:

Zadajte typ začiarkavacieho políčka

Registračný formulár

Vyberte si svoje obľúbené športy

7. :

Typ „tlačidlo“ definuje jednoduché tlačidlo, ktoré možno naprogramovať tak, aby funkčne ovládalo akúkoľvek udalosť, ako je napríklad udalosť kliknutia.

Poznámka: Funguje hlavne s JavaScriptom.

Príklad:

Výkon:

Zadajte typ „tlačidla“.

Kliknutím na tlačidlo zobrazíte výsledok:

Poznámka: Vo vyššie uvedenom príklade sme použili „upozornenie“ JS, ktoré sa naučíte v našom návode na JS. Používa sa na zobrazenie vyskakovacieho okna.

8. :

Prvok typu 'file' sa používa na výber jedného alebo viacerých súborov z úložiska používateľského zariadenia. Po výbere súboru a po odoslaní je možné tento súbor nahrať na server pomocou kódu JS a API súboru.

Príklad:

 Select file to upload: 

Výkon:

Zadajte typ súboru.

Môžeme si vybrať akýkoľvek typ súboru, kým ho nešpecifikujeme! Vybraný súbor sa zobrazí vedľa možnosti „vybrať súbor“.

9. :

Typ 'image' sa používa na reprezentáciu tlačidla odoslania vo forme obrázka.

Príklad:

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

Novo pridaný prvok typov HTML5

1. :

Typ „farba“ sa používa na definovanie vstupného poľa, ktoré obsahuje farbu. Umožňuje používateľovi určiť farbu pomocou vizuálneho farebného rozhrania v prehliadači.

Poznámka: Typ „color“ podporuje hodnotu farby iba v hexadecimálnom formáte a predvolená hodnota je #000000 (čierna).

Príklad:

 Pick your Favorite color: <br> <br> Upclick <br> <br> Downclick 

Výkon:

Typy zadávania „farby“:

Poznámka: Predvolená hodnota typu „farba“ je #000000 (čierna). Podporuje iba hodnotu farby v hexadecimálnom formáte.

2. :

Prvok typu „dátum“ generuje vstupné pole, ktoré umožňuje používateľovi zadať dátum v danom formáte. Používateľ môže zadať dátum pomocou textového poľa alebo rozhrania výberu dátumu.

Príklad:

 Select Start and End Date: <br> <br> Start date: <br> <br> End date: <br> <br> 

Výkon:

Zadajte typ dátumu

3. :

Prvok typu 'datetime-local' vytvára vstupné pole, ktoré umožňuje užívateľovi vybrať dátum ako aj miestny čas v hodine a minúte bez informácií o časovom pásme.

Príklad:

 Select the meeting schedule: <br> <br> Select date &amp; time: <br> <br> 

Výkon:

Zadajte typ „datetime-local“.

4. :

Typ 'e-mail' vytvára vstupný súbor, ktorý umožňuje používateľovi zadať e-mailovú adresu s overením vzoru. Viaceré atribúty umožňujú používateľovi zadať viac ako jednu e-mailovú adresu.

Príklad:

 <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> 

Výkon:

Zadajte typ „e-mail“.

Poznámka: Používateľ môže tiež zadať viacero e-mailových adries oddelených čiarkou alebo medzerou nasledovne:

5. :

Typ 'mesiac' vytvára vstupné pole, ktoré umožňuje užívateľovi jednoducho zadať mesiac a rok vo formáte 'MM, YYYY', kde MM definuje hodnotu mesiaca a YYYY definuje hodnotu roka. Nový

Príklad:

 Enter your Birth Month-year: 

Výkon:

Zadajte typ mesiaca:

6. :

Číslo typu prvku vytvára vstupné pole, ktoré umožňuje užívateľovi zadať číselnú hodnotu. Môžete tiež obmedziť zadanie minimálnej a maximálnej hodnoty pomocou atribútu min a max.

Príklad:

 Enter your age: 

Výkon:

Zadajte typ „čísla“.

Poznámka: Umožní zadať číslo v rozsahu 50-80. Ak chcete zadať iné číslo ako rozsah, zobrazí sa chyba.

7. :

Prvok typu 'url' vytvára vstupné pole, ktoré umožňuje užívateľovi zadať URL.

Príklad:

 Enter your website URL: <br> 

Výkon:

Zadajte typ adresy URL

8. :

Typ týždeň vytvára vstupné pole, ktoré umožňuje používateľovi vybrať týždeň a rok z rozbaľovacieho kalendára bez časového pásma.

Príklad:

 <b>Select your best week of year:</b> <br> <br> 

Výkon:

Zadajte typ „týždeň“.

9. :

Typ 'search' vytvára vstupné pole, ktoré umožňuje užívateľovi zadať hľadaný reťazec. Tieto sú funkčne symetrické k typu zadávania textu, ale môžu mať odlišný štýl.

Príklad:

 Search here: 

Výkon:

Zadajte typ „hľadať“.

10. :

Prvok typu ?tel? vytvorí vstupné pole na zadanie telefónneho čísla. Typ „tel“ nemá predvolené overenie, ako napríklad e-mail, pretože vzor telefónneho čísla sa môže na celom svete líšiť.

Príklad:

 <b>Enter your Telephone Number(in format of xxx-xxx-xxxx):</b> <br> <br> 

Výkon:

Zadajte typ „tel“.

Poznámka: Tu používame dva atribúty, ktoré sú 'pattern' a 'required', ktoré umožnia užívateľovi zadať číslo v danom formáte a je potrebné zadať číslo do vstupného poľa.