În HTML este un element important al formularului HTML. Atributul „tip” al elementului de intrare poate fi de diferite tipuri, ceea ce definește câmpul de informații. De exemplu, oferă o casetă de text.

Mai jos este o listă cu toate tipurile de elemente HTML.

HTML5 a adăugat noi tipuri pe element. Mai jos este lista de tipuri de elemente ale HTML5

Mai jos este descrierea tipurilor de elemente cu exemple.

1. :

elementele de tip „text” sunt folosite pentru a defini un câmp de text de intrare cu o singură linie.

Exemplu:

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

Ieșire:

Introduceți tipul „text”:

The 'text' câmp definește un câmp text de introducere pe o singură linie.

Notă: Lungimea maximă implicită a caracterului este 20.

2. :

Elementul de tip „parolă” permite unui utilizator să introducă parola în siguranță într-o pagină web. Textul introdus în parola a fost convertit în „*” sau „.”, astfel încât să nu poată fi citit de alt utilizator.

Exemplu:

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

Ieșire:

Introduceți tipul „parolă”:

The 'parola' câmp definește un câmp de introducere a parolei într-o singură linie pentru a introduce parola în siguranță.

3.:

Elementul de tip „submit” definește un buton de trimitere pentru a trimite formularul către server atunci când are loc evenimentul „clic”.

Exemplu:

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

Ieșire:

Introduceți tipul „trimitere”:

După ce faceți clic pe butonul de trimitere, acesta va trimite formularul pe server și va redirecționa pagina către acțiune valoare. Vom afla despre atributul „acțiune” în capitolele ulterioare

4. :

Tipul „resetare” este, de asemenea, definit ca un buton, dar atunci când utilizatorul efectuează un eveniment de clic, acesta resetează implicit toate valorile introduse.

Exemplu:

 User id: Password: <br> <br> 

Ieșire:

string.format în java

Tip de „resetare” de intrare:

Încercați să modificați valorile de intrare ale ID-ului utilizatorului și parolei, apoi când faceți clic pe resetare, va reseta câmpurile de introducere cu valorile implicite.

5. :

Tipul „radio” definește butoanele radio, care permit alegerea unei opțiuni între un set de opțiuni înrudite. La un moment dat, o singură opțiune de buton radio poate fi selectată la un moment dat.

Exemplu:

Vă rugăm să alegeți culoarea preferată

Ieșire:

Introduceți tipul „radio”.

Vă rugăm să alegeți culoarea preferată

6. :

Tipul „căsuță de selectare” sunt afișate ca casete pătrate care pot fi bifate sau debifate pentru a selecta opțiunile dintre opțiunile date.

Notă: butoanele „radio” sunt similare cu casetele de selectare, dar există o diferență importantă între ambele tipuri: butoanele radio permit utilizatorului să selecteze doar o opțiune la un moment dat, în timp ce caseta de selectare îi permite utilizatorului să selecteze de la zero la mai multe opțiuni simultan. .

Exemplu:

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

Ieșire:

Introduceți tipul „căsuță de selectare”.

Formular de înregistrare

Vă rugăm să alegeți sportul preferat

7. :

Tipul „buton” definește un simplu buton de apăsare, care poate fi programat pentru a controla funcțional orice eveniment, cum ar fi un eveniment de clic.

Notă: funcționează în principal cu JavaScript.

Exemplu:

Ieșire:

Introduceți tipul „buton”.

Faceți clic pe butonul pentru a vedea rezultatul:

Notă: În exemplul de mai sus am folosit „alerta” JS, pe care o veți învăța în tutorialul nostru JS. Este folosit pentru a afișa o fereastră pop.

8. :

Elementul cu tipul „fișier” este utilizat pentru a selecta unul sau mai multe fișiere din stocarea dispozitivului utilizatorului. Odată ce ați selectat fișierul și după trimitere, acest fișier poate fi încărcat pe server cu ajutorul codului JS și al fișierului API.

Exemplu:

 Select file to upload: 

Ieșire:

Introduceți tipul „fișier”.

Putem alege orice tip de fisier pana nu il specificam! Fișierul selectat va apărea lângă opțiunea „alege fișierul”.

9.:

Tipul „imagine” este folosit pentru a reprezenta un buton de trimitere sub formă de imagine.

Exemplu:

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

Element de tip HTML5 nou adăugat

1. :

Tipul „culoare” este folosit pentru a defini un câmp de intrare care conține o culoare. Acesta permite unui utilizator să specifice culoarea prin interfața vizuală de culoare a unui browser.

Notă: Tipul „culoare” acceptă doar valoarea culorii în format hexazecimal, iar valoarea implicită este #000000 (negru).

Exemplu:

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

Ieșire:

Tipuri de „culoare” de intrare:

Notă: Valoarea implicită a tipului „culoare” este #000000 (negru). Acceptă doar valoarea culorii în format hexazecimal.

2. :

Elementul de tip „data” generează un câmp de introducere, care permite unui utilizator să introducă data într-un format dat. Un utilizator poate introduce data după câmpul de text sau după interfața de selectare a datei.

Exemplu:

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

Ieșire:

Introduceți tipul „date”.

3.:

Elementul de tip „datetime-local” creează fișiere de intrare care permit unui utilizator să selecteze data, precum și ora locală în oră și minut, fără informații despre fusul orar.

Exemplu:

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

Ieșire:

Introduceți tipul „datetime-local”.

4. :

Tipul „e-mail” creează un fișier de intrare care permite unui utilizator să introducă adresa de e-mail cu validarea modelului. Atributele multiple permit unui utilizator să introducă mai multe adrese de e-mail.

Exemplu:

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

Ieșire:

Introduceți tipul „e-mail”.

Notă: De asemenea, utilizatorul poate introduce mai multe adrese de e-mail, separate prin virgulă sau spații albe, după cum urmează:

5. :

Tipul „lună” creează un câmp de introducere care permite utilizatorului să introducă cu ușurință luna și anul în formatul „LL, YYYY”, unde MM definește valoarea lunii și YYYY definește valoarea anului. Nou

Exemplu:

 Enter your Birth Month-year: 

Ieșire:

Introduceți tipul „lună”:

6. :

Numărul tipului de element creează un fișier de intrare care permite unui utilizator să introducă valoarea numerică. De asemenea, puteți restricționa introducerea unei valori minime și maxime folosind atributul min și max.

Exemplu:

 Enter your age: 

Ieșire:

Introduceți tipul „număr”.

Notă: Acesta va permite introducerea unui număr în intervalul 50-80. Dacă doriți să introduceți un număr diferit de interval, va afișa o eroare.

7. :

Elementul de tip „url” creează un fișier de intrare care permite utilizatorului să introducă adresa URL.

Exemplu:

 Enter your website URL: <br> 

Ieșire:

Introduceți tipul „url”.

8. :

Tipul de săptămână creează un câmp de introducere care permite utilizatorului să selecteze o săptămână și un an din calendarul drop-down fără fus orar.

Exemplu:

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

Ieșire:

Introduceți tipul „săptămână”.

9.:

Tipul „căutare” creează un fișier de intrare care permite unui utilizator să introducă un șir de căutare. Acestea sunt simetrice din punct de vedere funcțional cu tipul de introducere a textului, dar pot fi stilate diferit.

Exemplu:

 Search here: 

Ieșire:

Introduceți tipul „căutare”.

10.:

Elementul de tip ?tel? creează un fișier de intrare pentru a introduce numărul de telefon. Tipul „tel” nu are validare implicită, cum ar fi e-mailul, deoarece modelul numărului de telefon poate varia la nivel mondial.

Exemplu:

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

Ieșire:

Introduceți tipul „tel”.

Notă: Aici folosim două atribute care sunt „model” și „obligatoriu”, care vor permite utilizatorului să introducă numărul în formatul dat și este necesar să introducă numărul în câmpul de introducere.