Manos a la obra con ...: Lección n

Un formulario web es una colección de elementos HTML que permiten a los usuarios enviar información a través de una página web. La información puede ser enviada a un servidor web que ejecute una aplicación web. Los formularios proporcionan a HTML lo que necesita para crear una interfaz de usuario para aplicaciones web.

Sin embargo, sin una aplicación para recibir los datos, los formularios HTML no son muy útiles. Para solucionar ese problema para este tutorial, hemos añadido un pequeño programa en PHP a nuestro sitio web, el cual retorna una copia de los datos que se han enviado mediante el formulario, para que se pueda ver cómo se ve y empezar a pensar acerca del proceso de envío de datos a un servidor.

Estructura básica

Los formularios consisten en el elemento <form></form> que contiene una colección de elementos input y otras marcas descriptivas:

<form>
...
elementos form y otros elementos de marcado html
...
</form>

Aquí hay un formulario que contiene algunos elementos input comunes en formularios:

Aquí está el código fuente para el formulario de encima:

<form method="GET"
action="http://openbookproject.net/tutorials/getdown/resources/getecho.php">
<fieldset>
<legend>Información personal</legend>
<label>Nombre: <input type="text" name="fname" size="30"></label><br>
<label>Apellidos:  <input type="text" name="lname" size="30"></label>
</fieldset>

<fieldset>
<legend>Información del curso</legend>
<label>Curso:</label><br>
<input type="radio" name="course" value="webdesign"> Diseño Web<br>
<input type="radio" name="course" value="sql" checked> SQL<br> 
<input type="radio" name="course" value="programming"> Programación<br>
<label>Objetivo profesional:</label><br>
<select name="goal">
  <option>Diseñador web</option>
  <option>Administrador de bases de datos</option>
  <option selected>Programador</option>
  <option>otro</option>
</select>
<br>
<label>Habilidades (marque todas las que sean correctas):</label><br>
<input type="checkbox" name="unix" value="1"> UNIX
<input type="checkbox" name="vim" value="1"> VIM<br>
<input type="checkbox" name="html" value="1"> HTML
<input type="checkbox" name="css" value="1"> CSS<br>
<input type="checkbox" name="python" value="1"> Python
<input type="checkbox" name="javascript" value="1"> JavaScript
<br>
<label>Describa otras habilidades adicionales que usted tenga:</label><br>
<textarea name="skills" cols="70" rows="4"></textarea>
</fieldset>
<button type="submit">Introducir mi información</button>
</form>

Tipos de input

Estos son los tipos de input más comunes:

Text: Los inputs de texto dan predeterminadamente 20 caracteres, los cuales pueden cambiar estableciendo el atributo width a un valor distinto.
Radio buttons: Los botones de radio nos permiten ofrecer al usuario una elección entre algunos valores para una clave (name). Solo se puede seleccionar una de las opciones.
Checkbox: El tipo checkbox nos permite que el usuario seleccione cualquier número de opciones entre las distintas que se le ofrecen. Cada opción debe tener los atributos name y su correspondiente value. El nombre y el valor se envían como un par al servidor.
Select-one: El tipo select da al usuario la opción de elegir entre unos cuantos valores para una clave (name), como el tipo botón de radio, pero las opciones aparecen en un menú desplegable.
Textarea: Los inputs textarea contienen varias líneas de texto. El tamaño mostrado de la caja input puede ser modificado estableciendo los atributos cols y rows, para el número de columnas y filas respectivamente.
Password: Esta variación del input de texto no muestra las contraseñas que el usuario está escribiendo. En su lugar muestra un punto por cada caracter tecleado.

Ejercicios:

Cree un documento llamado formas1.html con el título y una cabecera de primer nivel establecidos a Formulario Pizza. Después añada todo lo siguiente en el cuerpo:
- un elemento form como en la sección anterior Estructura Básica.
- method="GET" como un atributo en el elemento form.
- action="http://openbookproject.net/tutorials/getdown/resources/getecho.php" como un atributo en el elemento form.
- Los siguientes tres elementos:
```
    Nombre: <input type="text" name="fname" size="25"><br>
    Apellidos: <input type="text" name="lname" size="25"><br>
    Teléfono: <input type="text" name="phone" size="25"><br>
```
- un elemento button con el atributo type="submit" y el texto Introducir mi información dentro del elemento.
Cuando haya finalizado su página debería parecerse a esto.
Copie forms1.html del ejercicio previo a un nuevo documento llamado forms2.html. Añada todo lo siguiente al formulario:
- Incluya los tres elementos input (Nombre, Apellidos y Teléfono) del ejercicio previo entre elementos label.
- Añada un elemento fieldset alrededor de estos tres elementos lable y un elemento legend que contenga Información personal. El producto finalizado de estos dos pasos debería verse como esto:
```
    <fieldset>
    <legend>Información personal</legend>
    <label>Nombre: <input type="text" name="nombre" size="25"></label><br>
    <label>Apellidos: <input type="text" name="apellidos" size="25"></label><br>
    <label>Teléfono: <input type="text" name="telefono" size="25"></label><br>
    </fieldset>
```
Cuando haya finalizado, su página deberá verse como esto.
Copie formas2.html del ejercicio previo a un nuevo documento llamado formas3.html. Añada un nuevo elemento fieldset con legend establecido a Pizza. Añada elementos input con el atributo type establecido a radio para las opciones Pequeño, Mediano, y Grande. Coloque el elemento label precediendo los tres elementos input conteniendo Tamaño:. Cuando haya finalizado debería verse como algo parecido a esto.
Finalmente, copie formas3.html a formas4.html y añada elementos input de checkbox y una etiqueta para ingredientes para que quede un formulario que se parezca a esto.

Lección n:

Estructura básica

Tipos de input

Ejercicios: