¿Sabías que el elemento input de html permite diseñar formularios para diferentes tipos de entrada, por ejemplo para definir una fecha, un correo, una hora, etc? En este articulo te comparto una serie de tipos de input html con el fin de que comiences a hacer más profesionales y funcionales tus formularios html.

Revisaremos dos grupos de input, en primer lugar aquellos de toda la vida y un segundo grupo de input que surgieron con html5, cabe resaltar que estos últimos pueden no ser compatibles con todos los navegadores.

En la entrada mandar información de html a php con jquery puedes aprender cómo procesar la información que se obtiene desde algún formulario y podrías comenzar a implementar los diferentes tipos de input que veremos a continuación.

Algunos tipos de input html tradicionales

Este grupo de input son de los más comunes y los que siempre han existido, más de alguna vez los debes haber usado.

  • Input tipo text

Este es quizá uno de los tipos de input más conocido y usado, practicamente se usa para ingresar alguna cadena de texto.

<input type="text" placeholder="Aquí puedes ingresar texto">
  • Input tipo password

Un input tipo password comúnmente se usa en algún formulario en el que desees que el usuario ingrese una contraseña, al elegir este tipo de input la cadena que se ingrese aparecerá en un formato de puntos o asteriscos permitiendo darle mayor seguridad.

<input type="password" placeholder="Ingresa una contraseña">
  • Input tipo submit

Cuando trabajes sobre algún formulario los input tipo submit te permiten enviar información a algún archivo externo que te permita procesar la información.

<input type="submit" value="Enviar información">
  • Input tipo radio

El input tipo radio te permite poner una serie de opciones pero elegir solo una, para esto puedes observar que se debe compartir el atributo name entre todas las opciones que se incluyan.

<input type="radio" name="opc" value="opc1"> Opción 1
<input type="radio" name="opc" value="opc2"> Opción 2
  • Input tipo checkbox

A diferencia del anterior, el input tipo checkbox permite a los usuarios poder elegir más de alguna opción, en este caso cada opción tienen su propio name.

<input type="checkbox" name="opc1" value="opc1"> Opción 1
<input type="checkbox" name="opc2" value="opc2"> Opción 2
  • Input tipo button

Si deseas incluir algún botón para realizar alguna función  podrías usar el input tipo button.

<input type="button" value="Clic aquí">

Algunos tipos de input en html5

A continuación te menciono algunos tipos de input que surgieron con html5, es muy importante resaltar que algunos de estos input no son compatibles con todos los navegadores y su comportamiento sería como si fueran un input tipo text.

  • Input tipo date

Si deseas obtener alguna fecha, el input tipo date muestra un minicalendario para que los usuarios elijan alguna fecha en específico, puedes determinar un mínimo y máximo de fecha.

<input type="date" min="2017-01-01">
  • Input tipo email

Para capturar algún correo electrónico lo ideal sería que usaras un input tipo email, este input se encarga de validar que la cadena que se ingrese en efecto sea un correo electrónico.

<input type="email">
  • Input tipo number

Para un tipo de dato donde solo se deban ingresar caracteres tipo número puedes usar el input tipo number, puedes determinar también algún mínimo y un máximo.

<input type="number" min="1" max="25">
  • Input tipo time

Este tipo de input permite a los usuarios elegir alguna hora en específico.

<input type="time">
  • Input tipo url

Este input lo puedes usar para campos que requieran ingresar alguna url, dependiendo de los navegadores que lo soporten se podría validar que en efecto la cadena que se ingresa sea una url válida.

<input type="url">

💡 Estos son solo algunos de los tipos de input html que más se suelen usar y que sin duda pueden ayudar a que tus formularios sen más profesionales y con un funcionamiento más definido.

Si te ha sido de ayuda esta entrada compartela en tus redes sociales.

¡Saludos! 🙂

Tipos de input html
5 (100%) 5 votos

Etiquetas: , , , ,

Leave a Comment

Sígueme en redes sociales
  • como hacer un blog personal desde cero - denisse estrada
    Suscríbete al blog