Formularios en HTML

Ahora que hemos visto la estructura más fácil de un formulario hecho en html empezaremos a ver todas las posibilidades que se nos brindan. Empecemos viendo los cuadros de texto que podemos insertar:

<form> <input type="text"> <input type="password"> <textarea cols="15" rows="5">Aquí el texto</textarea> </form>

Aquí vemos tres tipos distintos de cuadros. El primero es el cuadro de texto que ya conocemos un post anterior al que podeis acceder clicando aquí. El segundo crea un campo de tipo password, lo que es muy útil cuando queremos hacer un formulario con usuario y contraseña por ejemplo ya que oculta los caracteres escritos. Finalmente tenemos un recuadro de tipo textarea, más apropiado para crear textos largos, en su interior vemos las propiedades rows y cols que sirven para marcar el número de filas y columnas respectivamente. El resultado:
 

Prueba a escribir en todos los campos para ver el resultado más claro. Aquí el texto

A veces en los formularios también tenemos que dar opciones predeterminadas a los usuarios, para esto existen los controles checkbox, radio y select. Veamos el código de todos antes de empezar con cada uno individualmente:

<form> <input type="checkbox" name="primera opcion"> <input type="checkbox" name="segunda opcion"> <input type="radio" name="ejemplo" value="1"> <input type="radio" name="ejemplo" value="2"> <select name="pais"> <option value="a">Argentina</option> <option value="e">España</option> <option value="m">México</option> </select> </form>

y como resultado:

Argentina España México

Analicemos el código por partes:

<input type="checkbox" name="primera opcion">

<input type="checkbox" name="segunda opcion">

En esta primera parte lo que vemos son dos cuadros en los que podemos marcar uno, dos, ambos o ninguno. El valor enviado al servidor se distingue por el parámetro name que le asignamoss al recuadro. Se enviara la información al servidor según las opciones que hayamos marcado.

<input type="radio" name="ejemplo" value="1">

<input type="radio" name="ejemplo" value="2">

En cambio en estos dos el parámetro name es el mismo, por eso tan sólo deja marcar una única opción. El servidor distinguirá cual hemos marcado según el parámetro value que hemos insertado en ambas opciones y que como podemos ver es distinto.

<select name="pais">

<option value="a">Argentina</option>

<option value="e">España</option>

<option value="m">México</option>

</select>

Finalmente hemos creado un cuadro de selección con un nombre que nos permitirá distinguirlo en caso de haber más cuadros en un mismo formulario. También se nos permitirá marcar único valor y al igual que radio el servidor lo distinguirá por el parámetro value que le hemos dado a cada país (a para Argentina, e para España y m para México).