Elementos de Formularios HTML

Este capitulo describe los Elementos para los Formularios HTML.

El Elemento Input

El elemento de formulario más importante es el elemento <input>. El elemento <input> puede ser mostrado en varias formas, dependiendo del valor del atributo type.

<input name="nombre" type="text">

Nota: El valor predeterminado de un elemento input para el atributo type es text, así, si omite el atributo type, este se mostrará como un input de tipo text.

Todos los diferentes tipos del atributo type se esplicarán más adelante en el siguiente capitulo.

El Elemento Select

El etiqueta <select> define una lista desplegable. La etiqueta <option> define una opción seleccionable para el elemento select.

Código:

<select name="ciudades">
  <option value="cdmx">CDMX</option>
  <option value="guadalajara">Guadalajara</option>
  <option value="monterrey">Monterrey</option>
  <option value="tijuana">Tijuana</option>
</select>

Muestra:

CDMX Guadalajara Monterrey Tijuana

Predeterminadmente el primer elemento option es el seleccionado por la lista desplegable. Para establecer como predetermado algún otro elemento option se le debe agregar el atributo select.

<option value="guadalajara" selected>Guadalajara</opton>

Número de Opciones Visibles:

El atributo size establece el número de opciones visible de un elemento select.

Código:

<select name="ciudades" size="3">
  <option value="cdmx">CDMX</option>
  <option value="guadalajara">Guadalajara</option>
  <option value="monterrey">Monterrey</option>
  <option value="tijuana">Tijuana</option>
</select>

Muestra:

CDMX Guadalajara Monterrey Tijuana

Permitir Selección Multiple:

Ell atributo multiple permite al usuario más de una opción.

Código:

<select name="ciudades" multiple>
  <option value="cdmx">CDMX</option>
  <option value="guadalajara">Guadalajara</option>
  <option value="monterrey">Monterrey</option>
  <option value="tijuana">Tijuana</option>
</select>

Muestra:

CDMX Guadalajara Monterrey Tijuana

El elemento textarea

Una etiqueta <textarea> define un campo de entrada de varias líneas, es decir, un área de texto:

Código:

<textarea name="mensaje" rows="10" cols="30">
Los perros juegan en el pasto.
</textarea>

El atributo row establece el número de líneas visibles en un área de texto. El atributo cols establece el ancho ancho visible de un área de texto.

Muestra:

Los perros juegan en el pasto.

También es posible definir el tamaño del área de texto mediante CSS.

Código:

<textarea name="mensaje" style="width:200px; height:600px">
Los perros juegan en el pasto.
</textarea>

El elemento button

La etiqueta <button> define una botón cliqueable:

<button type="button" onclick="alert('hola mundo')">Clic Aquí</button>

Muestra:

Clic Aquí

Nota: especifique siempre el atributo type para el elemento button. Los diferentes navegadores pueden usar diferentes tipos predeterminados para el elemento del botón.

Nuevos elementos Form en HTML5

HTML5 agrego los siguientes elementos de formulario:

• <datalist>
• <output>

Nota: Los Navegadores Web no muestras las etiquetas HTML que no identifican. Así, los nuevos elementos no son soportados en Navegadores Web antiguos o en sus versiones anteriores.

El elemento datalist del HTML

La etiqueta <datalist> establece una lista de opciones para la etiqueta <input>. Los usuarios verán una lista desplegable de opciones predefinidas a medida que ingresan los datos. El atributo list de la etiqueta <input>, debe referirse al atributo id de la etiqueta <datalist>.

Código:

<form action="/pagina_manejadora.php">
  <input list="navegadores">
  <datalist id="navegadores">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
  </datalist> 
</form>

Muestra:

El elemento output

La etiqueta <output> representa el resultado de un cálculo (como uno realizado por un script). Realice un cálculo y muestre el resultado en un elemento <output>:

Código:

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
  0
  <input type="range" id="a" name="a" value="50">
  100 +
  <input type="number" id="b" name="b" value="50">
  =
  <output name="x" for="a b"></output>
  <br>
  <input type="submit">
</form>

Lista de Elementos Form del HTML

Etiqueta	Descripción
<form>	Define un Formulario HTML para entradas de usuario.
<input>	Define un control de entrada para el usuario.
<textarea>	Define un control de entrada multilínea para el usuario.
<label>	Define un rótulo para una etiqueta input.
<fieldset>	Define un área para relacionar elementos del formulario.
<legend>	Define un rótulo para un elemento fieldset.
<select>	Define una lista desplegable.
<optgroup>	Define un grupo de opciones relacionados en una lista desplegable.
<option>	Define una opción de una lista desplegable.
<button>	Define un botón cliqueable.
<datalist>	Define una lista de opciiones predefinidas para una etiqueta input.
<output>	Define el resultado de un calculo.