Formularios

La etiqueta principal para crear un formulario es la etiqueta “<form></form>”.

Las etiquetas que pueden ir en conjunto con <form> son:

name: No se puede repetir, es el nombre con el que se va a guardar el formulario.
action: Indica la url donde se va a procesar el formulario.
method: Indica el formato de envío. Esta etiqueta tiene dos opciones:
- post: Es el más usado, transmite la información de forma oculta.
- get: Transmite la información como parte de la url.
enctype: Esta etiqueta la usaremos unicamente si vamos a enviar algún archivo. Se utiliza para indicar el formato de codificación de los datos.

enctype=“multipart/form-data” → Si vamos a enviar fotos.

Asociar el nombre de un campo con su cuadro:

La etiqueta <label></label>:

Dentro de la etiqueta <label> ponemos el nombre que queremos que aparezca en la página junto al cuadro. Tiene que ir acompañado de un «for=’ ‘ » con el mismo valor que el id de la etiqueta <input>.

Ejemplo: <label for=»nombre»>Nombre:</label>

Campos:

La etiqueta <input/>, que tiene como valores:

name: Indica el nombre del cuadro creado. Nota: Es obligatorio. No siempre van a tener distinto nombre, pero tampoco siempre lo tendrán igual. Más adelante lo explico.
type: Sirve para elegir el tipo de cuadro que vamos a crear. Ejemplo: text, password, checkbox, radiobutton, submit, reset, file… Más adelante explico con más detalle los más importantes.
value: Se utiliza para establecer el valor inicial por defecto, si se deja en blanco no mostrará ningún valor inicial.
size: Establece el tamaño en caracteres que se va a mostrar el cuadro.
maxlength: Establece el tamaño máximo de caracteres que se pueden introducir en el cuadro.
readonly: No se pueden modificar los datos del cuadro.
disabled: No se pueden modificar los datos del cuadro, y además los datos no se envían.
checked: Tiene el valor “checked”, se muestra seleccionado por defecto.
required: Indicamos que el campo no puede quedar vacío

Opciones del «type»:

Checkbox:

name: El valor del atributo “name” tiene que ser distinto de los demás que creemos.
type: “checkbox” en todos.
value: El valor del atributo “value” tiene que ser distinto de los demás que creemos.

Radiobutton:

name: El valor del atributo “name” tiene que ser igual de los que creemos.
type: “radio” en todos.
value: El valor del atributo “value” tiene que ser distinto todos los que creemos.

Enviar formulario:

name: El valor del atributo “name” ponemos algo relacionado con el cuadro.
type: “submit”
value: El valor del atributo “value” aparecerá en el cuadro. Ejemplo: “Enviar formulario”

Borrar datos del formulario:

name: El valor del atributo “name” ponemos algo relacionado con el cuadro.
type: “reset”
value: El valor del atributo “value” aparecerá en el cuadro. Ejemplo: “Borrar todos los datos”

Insertar fichero adjunto:

name: El valor del atributo “name” ponemos algo relacionado con el cuadro.
type: “file”
value: El valor del atributo “value” aparecerá en el cuadro. Ejemplo: “Meter archivos”

Listas:

Listas desplegables:

La etiqueta <select></select>:

Se utiliza para crear una lista desplegable de opciones, donde podemos seleccionar una de ellas. También va acompañada de «name=’ ‘ «.

Cada opción de la lista desplegable se engloba con la etiqueta <option></option>, cada opción acompañada de su «value=’ x ‘ «.

Para que aparezca una opción seleccionada por defecto usamos el parámetro «selected» dentro de la opción elegida.

Si queremos que al principio de las opciones aparezca un texto que referencia a las demás la opción «value=’ ‘ » irá vacía.

A veces necesitamos que la lista salga desplegada por defecto, para eso tenemos el atributo size, que va en la etiqueta <select>. Este atributo tiene que ser el total de número de opciones que tenga la lista.

Si queremos que en la lista se puedan seleccionar varios valores de la lista a la vez se utiliza el atributo multiple, que funciona dejando pulsada la tecla «ctrl» y seleccionando los valores que queramos.

Grupos de opciones:

Los grupos de opciones también van dentro de la etiqueta <select></select>.

En este caso cada grupos de opciones de la lista desplegable se engloba con la etiqueta <optgroup></optgroup>, que hace referencia a cada opción <option></option> dentro de cada grupo de opciones.

Puede tener los mismo atributos que las listas, ejm: size, multiple…

Otros elementos:

<fieldset></fieldset> -> Representa un conjunto de elementos agrupados por un nombre <legend></legend>.

Otros ejemplos:

http://lmsgi.iesvjp.es/~nadiacm2000/b6p2/Ejercicio01/Ejercicio01.html