V HTML je důležitým prvkem HTML formulář. Atribut 'type' vstupního prvku může být různých typů, který definuje informační pole. Například dává textové pole.

Následuje seznam všech typů prvků HTML.

HTML5 přidalo do prvku nové typy. Následuje seznam typů prvků HTML5

Následuje popis typů prvků s příklady.

1.:

prvky typu 'text' se používají k definování jednořádkového vstupního textového pole.

Příklad:

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

Výstup:

ahoj světe java

Zadejte typ „text“:

The 'text' pole definuje jednořádkové vstupní textové pole.

Poznámka: Výchozí maximální délka znaku je 20.

2.:

Prvek typu 'password' umožňuje uživateli bezpečně zadat heslo na webové stránce. Zadaný text v hesle se převede na '*' nebo '.', takže jej nemůže přečíst jiný uživatel.

Příklad:

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

Výstup:

Zadejte typ „hesla“:

The 'Heslo' pole definuje pole pro zadání hesla pro jeden řádek pro bezpečné zadání hesla.

3.:

Prvek typu 'submit' definuje tlačítko pro odeslání pro odeslání formuláře na server, když dojde k události 'click'.

Příklad:

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

Výstup:

Zadejte typ „odeslat“:

Po kliknutí na tlačítko Odeslat se formulář odešle na server a stránka se přesměruje akce value.O atributu 'action' se dozvíme v dalších kapitolách

4.:

Typ 'reset' je také definován jako tlačítko, ale když uživatel provede událost kliknutí, ve výchozím nastavení resetuje všechny zadané hodnoty.

Příklad:

 User id: Password: <br> <br> 

Výstup:

Typ vstupu „reset“:

Zkuste změnit vstupní hodnoty uživatelského jména a hesla, poté když kliknete na reset, obnoví vstupní pole na výchozí hodnoty.

5.:

Typ 'radio' definuje přepínače, které umožňují výběr volby mezi sadou souvisejících voleb. Najednou lze vybrat pouze jednu možnost přepínače.

rujira banerjee

Příklad:

Vyberte si prosím svou oblíbenou barvu

Výstup:

Typ vstupu „rádio“.

Vyberte si prosím svou oblíbenou barvu

6.:

Typ 'checkbox' se zobrazuje jako čtvercová políčka, která lze zaškrtnout nebo zrušit zaškrtnutí pro výběr možností z daných možností.

Poznámka: Přepínače jsou podobné zaškrtávacím políčkům, ale mezi oběma typy je důležitý rozdíl: přepínací tlačítka umožňují uživateli vybrat pouze jednu možnost najednou, zatímco zaškrtávací políčko umožňuje uživateli vybrat nulu až více možností najednou. .

Příklad:

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

Výstup:

python program pro binární vyhledávání

Zadejte typ „zaškrtávacího políčka“.

Registrační formulář

Vyberte si své oblíbené sporty

7.:

Typ „tlačítko“ definuje jednoduché tlačítko, které lze naprogramovat tak, aby funkčně ovládalo jakoukoli událost, jako je událost kliknutí.

Poznámka: Pracuje hlavně s JavaScriptem.

Příklad:

Výstup:

Zadejte typ tlačítka.

Kliknutím na tlačítko zobrazíte výsledek:

Poznámka: Ve výše uvedeném příkladu jsme použili „upozornění“ JS, které se naučíte v našem tutoriálu JS. Používá se k zobrazení vyskakovacího okna.

8.:

Prvek s typem 'file' se používá k výběru jednoho nebo více souborů z úložiště uživatelského zařízení. Jakmile soubor vyberete a po odeslání, lze tento soubor nahrát na server pomocí kódu JS a souborového API.

Příklad:

 Select file to upload: 

Výstup:

Zadejte typ souboru.

Můžeme si vybrat jakýkoli typ souboru, dokud jej nespecifikujeme! Vybraný soubor se objeví vedle možnosti 'vybrat soubor'

9.:

Typ 'image' se používá k reprezentaci tlačítka pro odeslání ve formě obrázku.

Příklad:

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

HTML5 nově přidaný prvek typů

1.:

Typ 'barva' se používá k definování vstupního pole, které obsahuje barvu. Umožňuje uživateli určit barvu pomocí vizuálního barevného rozhraní v prohlížeči.

co je mapa java

Poznámka: Typ 'barva' podporuje hodnotu barvy pouze v hexadecimálním formátu a výchozí hodnota je #000000 (černá).

Příklad:

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

Výstup:

Typy zadávání 'barvy':

Poznámka: Výchozí hodnota typu 'barva' je #000000 (černá). Podporuje pouze hodnotu barvy v hexadecimálním formátu.

2.:

Prvek typu 'date' generuje vstupní pole, které umožňuje uživateli zadat datum v daném formátu. Uživatel může zadat datum pomocí textového pole nebo rozhraní pro výběr data.

Příklad:

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

Výstup:

Zadejte typ „datum“.

3.:

Prvek typu 'datetime-local' vytváří vstupní pole, které umožňuje uživateli vybrat datum a také místní čas v hodině a minutě bez informací o časovém pásmu.

Příklad:

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

Výstup:

Zadejte typ „datetime-local“.

4.:

Typ 'e-mail' vytváří vstupní soubor, který umožňuje uživateli zadat e-mailovou adresu s ověřením vzoru. Více atributů umožňuje uživateli zadat více než jednu e-mailovou adresu.

Pří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ýstup:

Zadejte typ „e-mail“.

Poznámka: Uživatel může také zadat více e-mailových adres oddělených čárkou nebo mezerou následovně:

5.:

Typ 'měsíc' vytváří vstupní pole, které umožňuje uživateli snadno zadat měsíc a rok ve formátu 'MM, YYYY', kde MM definuje hodnotu měsíce a YYYY definuje hodnotu roku. Nový

Příklad:

 Enter your Birth Month-year: 

Výstup:

Zadejte typ „měsíc“:

6.:

Číslo typu prvku vytváří vstupní pole, které umožňuje uživateli zadat číselnou hodnotu. Můžete také omezit zadání minimální a maximální hodnoty pomocí atributů min a max.

Příklad:

 Enter your age: 

Výstup:

Zadejte typ čísla

Poznámka: Umožní zadat číslo v rozsahu 50-80. Pokud chcete zadat jiné číslo než rozsah, zobrazí se chyba.

7.:

Prvek typu 'url' vytváří vstupní pole, které umožňuje uživateli zadat URL.

Příklad:

 Enter your website URL: <br> 

Výstup:

Zadejte typ „url“.

8.:

Typ týden vytváří vstupní pole, které umožňuje uživateli vybrat týden a rok z rozevíracího kalendáře bez časového pásma.

Příklad:

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

Výstup:

javafx na Eclipse

Zadejte typ „týden“.

9.:

Typ 'search' vytváří vstupní pole, které umožňuje uživateli zadat hledaný řetězec. Ty jsou funkčně symetrické k typu zadávání textu, ale mohou mít jiný styl.

Příklad:

 Search here: 

Výstup:

Zadejte typ vyhledávání

10.:

Prvek typu ?tel? vytvoří vstupní pole pro zadání telefonního čísla. Typ „tel“ nemá výchozí ověření, jako je e-mail, protože vzor telefonních čísel se může po celém světě lišit.

Příklad:

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

Výstup:

Zadejte typ „tel“.

Poznámka: Zde používáme dva atributy, které jsou 'pattern' a 'required', které uživateli umožní zadat číslo v daném formátu a je nutné zadat číslo do vstupního pole.