Elementos de formulario

Los elementos de formulario como botones y cuadros de texto también se denominan "campos de formulario" y "controles de formulario". La mayoría de controles se crean con la etiqueta <input>. Para listas desplegables y áreas de texto se utilizarán las etiquetas <select> y <textarea> respectivamente.

TODOS los controles de formulario se crearán con alguno de estos 3 tags:
1.- INPUT (se especificará qué tipo de elemento es mediante el atributo type)
2.- TEXTAREA
3.- SELECT

El atributo obligatorio para todos los controles: NAME

Independientemente del tag con el que se cree el formulario deberá definirse el atributo name.

Es el atributo más importante en los campos del formulario. De hecho, si un campo no incluye el atributo name, sus datos no se envían al servidor. El valor que se indica en el atributo name es el nombre que utiliza la aplicación del servidor para obtener el valor de este campo de formulario.

Cuando el usuario pulsa el botón de envío del formulario, el navegador envía los datos a una aplicación del servidor para que procese la información y genere una respuesta adecuada. En el servidor, la aplicación que procesa los datos debe obtener en primer lugar toda la información introducida por el usuario. Para ello, utiliza el valor del atributo name para obtener los datos de cada control del formulario.

El valor del atributo name no debe contener caracteres problemáticos en programación (espacios en blanco, acentos y caracteres como ñ o ç).

Tabla de elementos de formulario (XHTML)
Elemento y tipo Orden de aparición Ejemplo
input type="text" 1.- Etiqueta descriptiva
2.- Elemento HTML 		Tu nombre<br />
<input type="text" name="txtNombre" />
input type="password" 1.- Etiqueta descriptiva
2.- Elemento HTML 		Código de usuario<br />
<input type="password" name="txtPassword" />
input type="button" Elemento HTML <input type="button" name="disponibilidad" value="Comprobar disponibilidad" />
input type="submit" Elemento HTML <input type="submit" name="reservar" value="Reservar vuelo" />
input type="radio" 1.- Elemento HTML
2.- Etiqueta descriptiva		 <input type="radio" name="esta-casado" value="si" /> Sí, casado<br />
<input type="radio" name="esta-casado" value="No" /> No, soltero<br />
input type="checkbox" 1.- Elemento HTML
2.- Etiqueta descriptiva		 <input type="checkbox" name="suscripcion" value="Suscribirse" /> Suscribirse al boletín de noticias
select 1.- Etiqueta descriptiva
2.- Elemento HTML

Aficiones<br />
<select name="aficiones-usuario">
...
...
</select>

textarea 1.- Etiqueta descriptiva
2.- Elemento HTML 		Comentarios<br />
<textarea name="comentarios-usuario"></textarea>
button Elemento HTML <button name="boton-entrar">Click aquí!</button>

El tag <input>

Cuando se define este tag son obligatorios dos atributos:

Atributo "type": Según el valor que contenga se creará un tipo de control o otro. Las posibilidades para este atributo son:
text | password | checkbox | radio | submit | reset | file | hidden | image | button

El tag input es un tag individual. Una vez definidos sus atributos deberá cerrarse:


<input type="tipo-de-input" name="nombre-unico" value="valor-por-defecto" />




Ejemplo: 

<input type="password" name="password-usuario" value="" />

El tag <textarea>

Este tag definirá un cuadro de texto el cual puede contener gran cantidad de caracteres. Las áreas de texto son útiles cuando se debe introducir una gran cantidad de texto, pues permiten múltiples líneas. Conceptualmente es como un <input type="text" ... /> pero con más capacidad para almacenar información.

El tag <select>

Este tag definirá una lista desplegable. Estos controles permiten agrupar sus opciones (o items) de forma que el usuario pueda encontrarlos fácilmente.

<< Formularios
Formularios: Campos de texto >>

HTML

ARCHIVOS HTML

TEXTO

LISTAS

CARÁCTERES ESPECIALES

VÍNCULOS

IMÁGENES

TABLAS

FORMULARIOS

METAINFORMACIÓN

ALOJAMIENTO

PRÁCTICAS