En HTML és un element important del formulari HTML. L'atribut 'tipus' de l'element d'entrada pot ser de diversos tipus, que defineix el camp d'informació. Com per exemple, dóna un quadre de text.

A continuació es mostra una llista de tots els tipus d'elements d'HTML.

HTML5 ha afegit nous tipus a l'element. A continuació es mostra la llista de tipus d'elements d'HTML5

A continuació es descriu els tipus d'elements amb exemples.

1. :

L'element de tipus 'text' s'utilitza per definir un camp de text d'entrada d'una sola línia.

Exemple:

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

Sortida:

Tipus d'entrada 'text':

El 'text' El camp defineix un camp de text d'entrada d'una sola línia.

Nota: La longitud màxima de caràcters per defecte és 20.

2. :

L'element de tipus 'contrasenya' permet a un usuari introduir la contrasenya de manera segura en una pàgina web. El text introduït a la contrasenya arxivada es converteix en '*' o '.', de manera que no pot ser llegit per un altre usuari.

Exemple:

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

Sortida:

Introduïu el tipus de 'contrasenya':

El 'contrasenya' El camp defineix un camp d'entrada de contrasenya d'una sola línia per introduir la contrasenya de manera segura.

3. :

L'element de tipus 'enviament' defineix un botó d'enviament per enviar el formulari al servidor quan es produeix l'esdeveniment 'clic'.

Exemple:

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

Sortida:

java do while bucle

Tipus d'enviament d'entrada:

Després de fer clic al botó d'enviament, s'enviarà el formulari al servidor i redirigirà la pàgina a acció valor. Aprendrem sobre l'atribut 'acció' en capítols posteriors

4. :

El tipus 'restabliment' també es defineix com un botó, però quan l'usuari realitza un esdeveniment de clic, per defecte restableix tots els valors introduïts.

Exemple:

 User id: Password: <br> <br> 

Sortida:

Tipus de 'restabliment' d'entrada:

Intenteu canviar els valors d'entrada de l'identificador d'usuari i la contrasenya, i quan feu clic a restabliment, es restablirà els camps d'entrada amb els valors predeterminats.

5. :

El tipus 'ràdio' defineix els botons d'opció, que permeten triar una opció entre un conjunt d'opcions relacionades. Al mateix temps, només es pot seleccionar una opció de botó d'opció alhora.

Exemple:

Si us plau, seleccioneu el vostre color preferit

Sortida:

Tipus d'entrada 'ràdio'.

Si us plau, seleccioneu el vostre color preferit

6. :

El tipus 'casella de verificació' es mostren com a quadres quadrats que es poden marcar o desmarcar per seleccionar les opcions de les opcions donades.

Nota: els botons de 'ràdio' són semblants a les caselles de selecció, però hi ha una diferència important entre ambdós tipus: els botons de ràdio permeten a l'usuari seleccionar només una opció alhora, mentre que la casella de selecció permet a l'usuari seleccionar entre zero i diverses opcions alhora. .

Exemple:

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

Sortida:

Introduïu el tipus de 'caixa de verificació'.

Formulari d'inscripció

Si us plau, seleccioneu els vostres esports preferits

7. :

El tipus 'botó' defineix un simple polsador, que es pot programar per controlar un esdeveniment funcional en qualsevol esdeveniment, com ara un esdeveniment de clic.

Nota: Funciona principalment amb JavaScript.

Exemple:

Sortida:

Introduïu el tipus de 'botó'.

Feu clic al botó per veure el resultat:

Nota: a l'exemple anterior hem utilitzat l''alerta' de JS, que aprendràs al nostre tutorial de JS. S'utilitza per mostrar una finestra emergent.

8. :

L'element amb el tipus 'fitxer' s'utilitza per seleccionar un o més fitxers de l'emmagatzematge del dispositiu de l'usuari. Un cop seleccionat el fitxer i després de l'enviament, aquest fitxer es pot carregar al servidor amb l'ajuda del codi JS i l'API de fitxers.

Exemple:

 Select file to upload: 

Sortida:

Introduïu el tipus 'fitxer'.

Podem triar qualsevol tipus de fitxer fins que no ho especifiquem! El fitxer seleccionat apareixerà al costat de l'opció 'triar fitxer'.

9. :

El tipus 'imatge' s'utilitza per representar un botó d'enviament en forma d'imatge.

Exemple:

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

Element de tipus HTML5 recentment afegit

1. :

El tipus 'color' s'utilitza per definir un camp d'entrada que conté un color. Permet a un usuari especificar el color mitjançant la interfície de color visual d'un navegador.

Nota: el tipus 'color' només admet valors de color en format hexadecimal i el valor predeterminat és #000000 (negre).

Exemple:

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

Sortida:

Tipus de 'color' d'entrada:

Nota: El valor predeterminat del tipus 'color' és #000000 (negre). Només admet valors de color en format hexadecimal.

què és una pila en java

2. :

L'element de tipus 'data' genera un camp d'entrada, que permet a un usuari introduir la data en un format determinat. Un usuari pot introduir la data per camp de text o per interfície de selecció de dates.

Exemple:

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

Sortida:

Introduïu el tipus de 'data'.

3. :

L'element de tipus 'datetime-local' crea un fitxer d'entrada que permet a l'usuari seleccionar la data i l'hora local a l'hora i el minut sense informació de la zona horària.

Exemple:

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

Sortida:

Introduïu el tipus 'datetime-local'.

4. :

El tipus 'correu electrònic' crea un fitxer d'entrada que permet a un usuari introduir l'adreça de correu electrònic amb la validació del patró. Els múltiples atributs permeten a un usuari introduir més d'una adreça de correu electrònic.

Exemple:

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

Sortida:

Introduïu el tipus 'correu electrònic'.

Nota: L'usuari també pot introduir diverses adreces de correu electrònic separades per comes o espais en blanc de la següent manera:

5. :

El tipus 'mes' crea un camp d'entrada que permet a l'usuari introduir fàcilment el mes i l'any en el format 'MM, AAAA' on MM defineix el valor del mes i AAAA defineix el valor de l'any. Nou

Exemple:

 Enter your Birth Month-year: 

Sortida:

Introduïu el tipus de 'mes':

6. :

El número de tipus d'element crea un fitxer d'entrada que permet a l'usuari introduir el valor numèric. També podeu restringir la introducció d'un valor mínim i màxim mitjançant l'atribut min i max.

Exemple:

 Enter your age: 

Sortida:

Introduïu el tipus de 'número'.

Nota: Permetrà introduir un nombre entre 50 i 80. Si voleu introduir un número diferent de l'interval, mostrarà un error.

7. :

L'element de tipus 'url' crea un fitxer d'entrada que permet a l'usuari introduir l'URL.

Exemple:

 Enter your website URL: <br> 

Sortida:

Introduïu el tipus 'url'.

8. :

El tipus de setmana crea un camp d'entrada que permet a l'usuari seleccionar una setmana i un any del calendari desplegable sense la zona horària.

Exemple:

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

Sortida:

Introduïu el tipus 'setmana'.

9. :

El tipus 'cerca' crea un fitxer d'entrada que permet a un usuari introduir una cadena de cerca. Aquests són funcionalment simètrics al tipus d'entrada de text, però poden tenir un estil diferent.

Exemple:

 Search here: 

Sortida:

Introduïu el tipus de 'cerca'.

10. :

L'element de tipus ?tel? crea una entrada arxivada per introduir el número de telèfon. El tipus 'tel' no té validació predeterminada, com ara el correu electrònic, perquè el patró del número de telèfon pot variar a tot el món.

processament paral·lel

Exemple:

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

Sortida:

Introduïu el tipus 'tel'.

Nota: Aquí estem utilitzant dos atributs que són 'patró' i 'obligatoris' que permetran a l'usuari introduir el número en el format donat i cal que introduïu el número al camp d'entrada.