HTML Form

Formulario

Podemos definir un formulario utilizando la etiqueta HTML form 

<form></form>

Dentro podemos definir los contenidos del formulario, ya sean, botones, cuadros de texto, listas desplegables, etc.

Input

La mayoría de los elementos del formulario son creados a partir de la etiqueta HTML  input

<input>

Podemos entender al input como a la entrada del formulario y por lo tanto debemos indicar que "tipo" de entrada sera.

Tipos de Input

Existen diez tipos de inputs. El atributo type diferencia a cada uno de ellos.

<input type="unTipo">

Podemos diferenciar entre inputs mediante el atributo name. Este atributo debe ser único.

<input type="unTipo" name="unNombre">

Cuadro de Texto

Consiste en un cuadro de texto vació donde el usuario puede ingresar cualquier texto

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

Podemos indicar un texto por defecto al cuadro de texto utilizando el atributo value.

<input type="text" name="unNombre" value="unValor">

Cuadro de Contraseña

Consiste en un cuadro de texto que no mostrara de forma directa el texto ingresado

<input type="password" name="contraseña">

Podemos indicar un texto por defecto al cuadro de texto utilizando el atributo value.

<input type="password" name="contraseña" value="123">

Checkbox

Consiste en entradas donde el usuario puede seleccionar o deseleccionar opciones.

<input type="checkbox" name="opcion1" value="perro"> Perro
<input type="checkbox" name="opcion2" value="gato"> Gato
<input type="checkbox" name="opcion3" value="pez"> Pez

Podemos indicar que un checkbox se va a encontrar seleccionado por defecto mediante el atributo checked.

<input type="checkbox" name="opcion1" value="perro" checked="checked">

Radio

Consiste en entradas donde el usuario puede seleccionar una opción de varias disponibles.

<input type="radio" name="sexo" value="m"> Hombre
<input type="radio" name="sexo" value="f"> Mujer

Podemos indicar que un checkbox se va a encontrar seleccionado por defecto mediante el atributo checked.

<input type="radio" name="sexo" value="m" checked="checked"> Hombre

Los radios que representan el conjunto de opciones llevan el mismo atributo name.

Botón

Consiste en un botón con el cual se puede tomar una acción determinada.

<input type="button" name="guardar" value="guardar"> Guardar

La funcionalidad del botón puede estar dada por código JavaScript.

Archivos

Consiste en un cuadro de texto seguido de un botón mediante los cuales podemos obtener un archivo. 

<input type="file" name="archivo"> Adjuntar Archivo

Al presionar el boton podemos seleccionar un archivo. Al hacerlo el nombre del archivo sera mostrado el cuadro de texto.

Ocultos

Consiste en un campo el cual no tiene ninguna representación visual para el navegador. 

<input type="hidden" name="algo" value="unValor">

Son utilizados para incluir información la cual no debe ser visible para el usuario pero es importante para el formulario.

Botón Imagen

Consiste en un botón cuya representación visual sera una imagen.

<input type="image" name="guardar" src="disco.png">

Son utilizados para incluir información la cual no debe ser visible para el usuario pero es importante para el formulario.

Botón Reset

Consiste en un botón el cual tiene como funcionalidad por defecto borrar todos los valores ingresados en los campos del formulario.

<input type="reset" name="borrar" value="Borrar Formulario">

El atributo value permite determinar el texto visible del botón.

Botón Submit

Consiste en un botón el cual tiene como funcionalidad por defecto enviar los datos del formulario al servidor.

<input type="submit" name="guardar" value="Guardar">

El navegador se encarga de enviar los datos contenidos por el formulario en el momento que se presiona el boton cuyo tipo sea submit.

Fieldset

Consiste en una estructura que permite agrupar varios campos del formulario según un criterio dado.

<fieldset>
    ...
</fieldset>

El navegador encierra el conjunto de campos que se encuentren dentro del fieldset mediante un borde.

Leyendas

Consiste en una leyenda o titulo de un conjunto de campos dados. 

<legend>Soy Leyenda</legend>

Si es utilizada dentro de un fieldset, la leyenda sera puesta en linea con el borde que agrupa sus campos.

Etiquetas

Consiste en una leyenda o titulo de un campo del formulario.

<label for="nombre">Ingrese el Nombre</legend>

Podemos indicar de que campo sera titulo mediante el uso del atributo for. El valor del atributo for debe coincidir con el valor del atributo name del campo.

Área de Textos

Consiste en un cuadro de texto el cual puede ser redimensionado por el usuario.

<textarea name="descripcion"></textarea>

Podemos indicar el numero de filas maximas que podra contener mediante el atributo rows. De la misma manera limitamos el numero de columnas de la fila con el atributo cols.

Listas desplegables

Consiste en una lista la cual tiene un conjunto de opciones sobre las que se puede seleccionar.

<select>
    <option value="">Seleccione el sexo</option>
    <option value="m">Masculino</option>
    <option value="f">Femenino</option>
</select>

Podemos indicar el numero de opciones a mostrar mediante el atributo size. También es posible indicar si es posible seleccionar mas de una opción con el atributo multiple.

Grupos en Listas desplegables

Podemos agrupar opciones dentro de una lista desplegable mediante la etiqueta HTML optgroup.

<select>
    <option value="">Seleccione un auto</option>
    <optgroup label="Ford">
        <option value="ka">Ka</option>
        <option value="focus">Focus</option>
    </optgroup>
    <optgroup label="Chevrolet">
        <option value="agile">Agile</option>
        <option value="onix">Onix</option>
    </optgroup>
</select>

El atributo label indica la leyenda del grupo de opciones

Grupos en Listas desplegables

Podemos agrupar opciones dentro de una lista desplegable mediante la etiqueta HTML optgroup.

<select>
    <option value="">Seleccione un auto</option>
    <optgroup label="Ford">
        <option value="ka">Ka</option>
        <option value="focus">Focus</option>
    </optgroup>
    <optgroup label="Chevrolet">
        <option value="agile">Agile</option>
        <option value="onix">Onix</option>
    </optgroup>
</select>

El atributo label indica la leyenda del grupo de opciones

¿Envió al servidor?

Los formularios permiten enviar la información contenida en sus campos al servidor. Esto lo realiza gracias a los siguientes atributos