Uno de los principales componentes de la web son los Formularios . Sería muy difícil recopilar datos sin ellos. Y para hacer un buen formulario debemos conocer el tipo de entrada básico en HTML .
En este artículo, hablaremos sobre los tipos de entrada en HTML. Los formularios HTML se utilizan para recopilar datos de un usuario que visita su sitio web con la ayuda de etiquetas de entrada. Estas etiquetas de entrada mejoran la experiencia del usuario y hacen que los formularios sean más interactivos.
Tipos de entrada de uso común:
- Botón : El botón es generalmente un botón pulsador, que se presiona para activar.
- casilla de verificación : La casilla de verificación debe estar marcada para activarla.
- color : Interfaz utilizada para elegir el color de nuestra elección.
- date : Interfaz utilizada para elegir una fecha.
- Correo electrónico : interfaz utilizada para aceptar direcciones de correo electrónico.
- Archivo : interfaz utilizada para cargar archivos.
- Imagen : Interfaz utilizada para ingresar una imagen.
- Mes : Interfaz utilizada para ingresar años y meses. El formato es “AAAA-MM”.
- Número : Interfaz que permite al usuario introducir un número.
- Contraseña : la interfaz define un campo de contraseña (los caracteres están enmascarados por seguridad).
- Radio : colección de botones de radio que ingresan un conjunto de opciones).
- Rango : la interfaz de control deslizante con el rango predeterminado es de 0 a 100.
- Restablecer : interfaz utilizada para restablecer el formulario a los valores predeterminados.
- Buscar : interfaz para ingresar una string de búsqueda.
- Enviar : interfaz para enviar todos los valores del formulario a un controlador de formulario.
- Texto : interfaz para ingresar un campo de texto de una sola línea.
Sintaxis:
<input type="type">
El atributo «tipo» del elemento de entrada puede ser de varios tipos, como se describe anteriormente.
Por ejemplo, si queremos hacer un botón de tipo de entrada, escribiremos,
<input type="Button">
Atributos utilizados en el código:
placeholder="sample text"
El atributo de marcador de posición especifica una sugerencia breve que describe el valor esperado de un campo de entrada (por ejemplo, un valor de muestra o una descripción breve del formato esperado).
Veamos algunos ejemplos para saber cómo funcionan estos tipos de entrada.
Ejemplo 1:
HTML
<!DOCTYPE html> <html> <head> <title>List Of Inputs in HTML</title> </head> <body> <h1 style="color: green"> GeeksForGeeks </h1> <h2> List Of Inputs in HTML </h2> <input type="button">click Button if You agree<br><br> <input type="checkbox">Check If you are 18+<br><br> <input type="color">Chose the color of cloth<br><br> <input type="date">Chose You birth date<br><br> <input type="email" placeholder="Enter Your Mail"><br><br> <input type="file">Input the required file<br><br> <input type="image">Input You Image<br><br> <input type="month">Month Of admission<br><br> <input type="number" placeholder="Enter Your Age"><br><br> </body> </html>
Producción:
Ejemplo 2:
HTML
<!DOCTYPE html> <html> <head> <title>List Of Inputs in HTML</title> </head> <body> <h1 style="color: green"> GeeksForGeeks </h1> <h2> List Of Inputs in HTML </h2> <input type="password">Enter the password<br><br> <input type="radio">Click If You agree<br><br> <input type="range">Enter your experience level<br><br> <input type="reset">Reset the form<br><br> <input type="search" placeholder="Search the word"><br><br> <input type="submit">Submit the form<br><br> <input type="text" > Enter your views<br><br> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por ayushcoding100 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA