En HTML es un elemento importante del formulario HTML. El atributo 'tipo' del elemento de entrada puede ser de varios tipos, lo que define el campo de información. Como por ejemplo un cuadro de texto.

A continuación se muestra una lista de todos los tipos de elementos de HTML.

HTML5 agregó nuevos tipos de elemento. A continuación se muestra la lista de tipos de elementos de HTML5.

A continuación se muestra la descripción de los tipos de elementos con ejemplos.

1. :

El elemento de tipo 'texto' se utiliza para definir un campo de texto de entrada de una sola línea.

Ejemplo:

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

Producción:

Tipo de entrada de 'texto':

El 'texto' El campo define un campo de texto de entrada de una sola línea.

Nota: La longitud máxima predeterminada de caracteres es 20.

2. :

El elemento de tipo 'contraseña' permite al usuario ingresar la contraseña de forma segura en una página web. El texto ingresado en el archivo de contraseña se convierte en '*' o '.', para que otro usuario no pueda leerlo.

Ejemplo:

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

Producción:

ordenar por sql aleatorio

Introduzca el tipo de 'contraseña':

El 'contraseña' El campo define un campo de contraseña de entrada de una sola línea para ingresar la contraseña de forma segura.

3. :

El elemento de tipo 'enviar' define un botón de envío para enviar el formulario al servidor cuando ocurre el evento 'clic'.

Ejemplo:

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

Producción:

Tipo de entrada 'enviar':

Después de hacer clic en el botón Enviar, se enviará el formulario al servidor y se redirigirá la página a acción valor. Aprenderemos sobre el atributo 'acción' en capítulos posteriores.

4. :

El tipo 'restablecer' también se define como un botón, pero cuando el usuario realiza un evento de clic, de forma predeterminada restablece todos los valores ingresados.

Ejemplo:

 User id: Password: <br> <br> 

Producción:

Tipo de entrada 'restablecer':

Intente cambiar los valores de entrada de identificación de usuario y contraseña, luego, cuando haga clic en restablecer, se restablecerán los campos de entrada con los valores predeterminados.

5. :

El tipo 'radio' define los botones de opción, que permiten elegir una opción entre un conjunto de opciones relacionadas. A la vez, solo se puede seleccionar una opción de botón de opción a la vez.

Ejemplo:

Seleccione amablemente su color favorito

Producción:

Tipo de entrada 'radio'

Seleccione amablemente su color favorito

6. :

El tipo 'casilla de verificación' se muestra como cuadros cuadrados que se pueden marcar o desmarcar para seleccionar las opciones entre las opciones dadas.

Nota: Los botones de 'radio' son similares a las casillas de verificación, pero hay una diferencia importante entre ambos tipos: los botones de opción permiten al usuario seleccionar solo una opción a la vez, mientras que la casilla de verificación le permite al usuario seleccionar de cero a múltiples opciones a la vez. .

Ejemplo:

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

Producción:

Introduzca el tipo de 'casilla de verificación'

Formulario de inscripción

Seleccione amablemente sus deportes favoritos.

7. :

El tipo 'botón' define un botón pulsador simple, que se puede programar para controlar funcionalmente cualquier evento, como por ejemplo un evento de clic.

Nota: Funciona principalmente con JavaScript.

Ejemplo:

Producción:

Introduzca el tipo de 'botón'.

Haga clic en el botón para ver el resultado:

Nota: En el ejemplo anterior hemos utilizado la 'alerta' de JS, que aprenderá en nuestro tutorial de JS. Se utiliza para mostrar una ventana emergente.

8. :

El elemento de tipo 'archivo' se utiliza para seleccionar uno o más archivos del almacenamiento del dispositivo del usuario. Una vez que seleccione el archivo y después de enviarlo, este archivo se puede cargar en el servidor con la ayuda del código JS y la API de archivos.

Ejemplo:

 Select file to upload: 

Producción:

Introduzca el tipo de 'archivo'.

¡Podemos elegir cualquier tipo de archivo hasta que no lo especifiquemos! El archivo seleccionado aparecerá junto a la opción 'elegir archivo'

9. :

El tipo 'imagen' se utiliza para representar un botón de envío en forma de imagen.

Ejemplo:

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

Elemento de tipos HTML5 recién agregado

1. :

El tipo 'color' se utiliza para definir un campo de entrada que contiene un color. Permite al usuario especificar el color mediante la interfaz de color visual en un navegador.

Nota: El tipo 'color' solo admite valores de color en formato hexadecimal y el valor predeterminado es #000000 (negro).

Ejemplo:

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

Producción:

Tipos de 'color' de entrada:

Nota: El valor predeterminado del tipo 'color' es #000000 (negro). Solo admite valores de color en formato hexadecimal.

cuerda invertida en c

2. :

El elemento de tipo 'fecha' genera un campo de entrada que permite al usuario ingresar la fecha en un formato determinado. Un usuario puede ingresar la fecha por campo de texto o por interfaz de selección de fecha.

Ejemplo:

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

Producción:

Tipo de entrada 'fecha'

3. :

El elemento de tipo 'datetime-local' crea un archivo de entrada que permite al usuario seleccionar la fecha y la hora local en horas y minutos sin información de zona horaria.

Ejemplo:

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

Producción:

Introduzca el tipo 'fechahora-local'

4. :

El tipo 'correo electrónico' crea un archivo de entrada que permite al usuario ingresar la dirección de correo electrónico con validación de patrón. Los múltiples atributos permiten a un usuario ingresar más de una dirección de correo electrónico.

Ejemplo:

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

Producción:

Introduzca el tipo de 'correo electrónico'

Nota: El usuario también puede ingresar varias direcciones de correo electrónico separadas por comas o espacios en blanco de la siguiente manera:

5. :

El tipo 'mes' crea un campo de entrada que permite al usuario ingresar fácilmente el mes y el año en el formato 'MM, AAAA' donde MM define el valor del mes y AAAA define el valor del año. Nuevo

Ejemplo:

 Enter your Birth Month-year: 

Producción:

Tipo de entrada 'mes':

6. :

El número de tipo de elemento crea un campo de entrada que permite al usuario ingresar el valor numérico. También puede restringir el ingreso de un valor mínimo y máximo utilizando los atributos mínimo y máximo.

Ejemplo:

 Enter your age: 

Producción:

Tipo de entrada 'número'

Nota: Permitirá ingresar un número en el rango de 50-80. Si desea ingresar un número que no sea el rango, se mostrará un error.

7. :

El elemento de tipo 'url' crea un campo de entrada que permite al usuario ingresar la URL.

Ejemplo:

 Enter your website URL: <br> 

Producción:

Introduzca el tipo de 'url'

8. :

El tipo semana crea un campo de entrada que permite al usuario seleccionar una semana y un año en el calendario desplegable sin zona horaria.

Ejemplo:

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

Producción:

Tipo de entrada 'semana'

9. :

El tipo 'búsqueda' crea un campo de entrada que permite al usuario ingresar una cadena de búsqueda. Estos son funcionalmente simétricos al tipo de entrada de texto, pero pueden tener un estilo diferente.

ordenar montón

Ejemplo:

 Search here: 

Producción:

Tipo de entrada 'búsqueda'

10. :

El elemento de tipo ?tel? crea un campo de entrada para ingresar el número de teléfono. El tipo 'tel' no tiene validación predeterminada, como correo electrónico, porque el patrón de número de teléfono puede variar en todo el mundo.

Ejemplo:

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

Producción:

Tipo de entrada 'tel'

Nota: Aquí estamos usando dos atributos que son 'patrón' y 'obligatorio' que permitirán al usuario ingresar el número en un formato determinado y es obligatorio ingresar el número en el campo de entrada.