TODOS los Elementos de formularios en HTML

El elemento <input>

El elemento <input> es el más importante y según el type puede ser visualizado de diferentes maneras

See the Pen HTML | 2.2 - Elementos de formularios - 1 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

 

El elemento <select>

El elemento <select> define una lista seleccionable.

See the Pen HTML | 2.2 - Elementos de formularios - 2 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

 

El elemento <option> define los elementos dentro del <select>

Por defecto se selecciona la primera opción, podemos usar el atributo selected para cambiar eso.

See the Pen HTML | 2.2 - Elementos de formularios - 3 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

 El atributo size especifica el número de opciones visibles.

See the Pen HTML | 2.2 - Elementos de formularios - 4 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

 El atributo múltiple nos permite seleccionar más de una opción

See the Pen HTML | 2.2 - Elementos de formularios - 5 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

 

El elemento <textarea>

Con el <textarea> tenemos un campo en el que podemos escribir varias líneas de texto.

El atributo rows especifica el número visible de líneas en un área de texto.

El atributo cols especifica el ancho visible de un área de texto.

También se puede usar el width y el height de CSS para definir el tamaño del textarea

See the Pen HTML | 2.2 - Elementos de formularios - textarea by Francisco Palomares Barrios (@kikopalomares) on CodePen.

 

El elemento <button>

El elemento <button> define un botón clicable.

Es importante definir siempre el type, porque es posible que los navegadores tengan comportamientos diferentes

See the Pen HTML | 2.2 - Elementos de formularios - button by Francisco Palomares Barrios (@kikopalomares) on CodePen.

 

Elementos de formularios de HTML5

HTML5 añade dos nuevos elementos a los formularios:

  • <datalist>
  • <output>

Si el navegador no soporta HTML5 y no reconoce los elementos no va a “romper” la web, simplemente no los muestra

El elemento <datalist>

El elemento <datalist> especifica una lista predefinida para un elemento <input>

See the Pen HTML | 2.2 - Elementos de formularios - datalist by Francisco Palomares Barrios (@kikopalomares) on CodePen.

 

El elemento <output>

El elemento <output> especifica el resultado de un cálculo

See the Pen HTML | 2.2 - Elementos de formularios - output by Francisco Palomares Barrios (@kikopalomares) on CodePen.

¿Quieres más?

Si estás interesado en el mundo de la programación y el desarrollo web, te recomiendo que te suscribas a mi canal de youtube donde tienes mucho más contenido gratuito

IR AL CANAL

¿Quieres convertirte en desarrollador web? [GRATIS]

Déjame aquí tu mejor email y te mandaré un curso para que puedas empezar en el desarrollo web totalmente GRATIS!

¡Prometo no enviarte SPAM! Sólo cosas relevantes que te interesen.