Manual de HTML: Formularios

Formularios

Etiquetas que suelen aparecer en los formularios (alfabéticamente):

<button>, <fieldset>, <form>, <input />, <label>, <legend>, <optgroup>, <option>, <select>, <textarea>.

Los formularios se utilizan para enviar información al servidor, donde será procesada. Están formados por una serie de controles cada uno de los cuales está asociado a un tipo concreto de datos o a una acción determinada: botones de envío y borrado de datos, cajas de entrada de texto, listas de selección, etc.

<form></form>
Esta etiqueta delimita el comienzo y el final de un formulario.

Atributos:
- action: indica el programa que va a procesar el formulario. Si no asignamos un valor a este atributo, la página se "autoprocesa", es decir, se vuelve a cargar pasándose a sí misma los datos del formulario.
- method: indica el método por el que se van a transferir las variables del formulario. Valores:
  - post: envía los datos codificados en el cuerpo de la petición HTTP.
  - get: añade las variables a la URL.
- enctype: indica el tipo de documento en formato MIME. Valores:
  - application/x-www-form-urlencoded: por defecto.
  - multipart/form-data: se usa cuando se utiliza un control <input type="file" />.
Ejemplo: este código:
```
<form method="post" action="test.php">
  Nombre: <input type="text" size="30" name="nombre" id="nombre" /><br />
  Email: <input type="text" size="30" name="email" id="email" />
</form>
```
... se ve así:

Nombre:
Email:

<fieldset></fieldset> y <legend></legend>
- <fieldset></fieldset>: agrupa controles en un formulario, haciéndolo más fácil de entender por el usuario (dibuja una caja alrededor de los controles incluidos).
- <legend></legend>: asigna un título a un <fieldset> (debe ser definido inmediatamente después del tag de apertura).
Ejemplo: este código:
```
<form method="post" action="test.php">
  <fieldset>
    <legend>Datos personales:</legend>
    Nombre: <input type="text" size="30" name="nombre" id="nombre" /><br />
    Email: <input type="text" size="30" name="email" id="email" />
  </fieldset>
</form>
```
... se ve así:

Datos personales: Nombre:
Email:

<label></label>
Asigna un texto a un control <input>. Esta etiqueta no se renderiza de ninguna forma visible para el usuario pero aporta usabilidad ya que al clickar el texto de una etiqueta <label> se activa el control <input> correspondiente.

Atributos:
- for: debe coincidir con el atributo "id" del control <input> relacionado.
Ejemplo: este código:
```
<form method="post" action="test.php">
  Mascota preferida:<br />
  <input type="radio" name="mascota" id="perro" value="p" checked />
  <label for="perro">Perro</label><br />
  <input type="radio" name="mascota" id="gato" value="g" />
  Gato
</form>
```
... se ve así (si clickas en el texto "Perro" se activa el control, si clickas en "Gato" no):

Mascota preferida:
Perro
Gato

<input type="text" />
Esta etiqueta define una caja de texto simple.

Atributos:
- name: asigna de forma unívoca un nombre identificador a la variable que se introduzca en la caja de texto.
- maxlenght: fija el número máximo de caracteres que se pueden introducir en la caja de texto.
- size: establece el tamaño de la caja de texto en pantalla.
- value: establece el valor por defecto del texto que aparecerá inicialmente en la caja de texto.
- disabled: desactiva la caja de texto, por lo que el usuario no podrá escribir.
- readonly: establece que el texto no puede ser modificado por el usuario.
- tabindex: especifica el orden de tabulador que tendrá el campo respecto del resto de elementos del formulario.
Ejemplo: este código:
```
<form method="post" action="test.php">
  <label for="nombre">Nombre:</label>
  <input type="text" size="30" name="nombre" id="nombre"
    value="Teclea tu nombre" /><br />
  <label for="email">Email:</label>
  <input type="text" size="30" name="email" id="email" />
</form>
```
... se ve así:

Nombre:
Email:

<input type="radio" />
Define un conjunto de elementos tipo "radio botón" donde el usuario debe optar por uno de ellos.

Atributos:
- name: asigna un nombre identificador único a la variable definida por el elemento. Este identificador debe ser el mismo para todos los elementos radio de un grupo.
- value: define un valor de la variable para cada uno de los radio botones.
- checked: marca por defecto uno de los radio botones del grupo.
- disabled: desactiva el radio botón, por lo que el usuario no podrá marcarlo.
- tabindex: especifica el orden de tabulador que tendrá el campo respecto del resto de elementos del formulario.
Ejemplo: este código:
```
<form method="post" action="test.php">
  Equipo favorito:<br />
  <input type="radio" name="equipo" id="madrid" value="m" checked />
  <label for="madrid">Real Madrid</label><br />
  <input type="radio" name="equipo" id="inter" value="i" />
  <label for="inter">Inter</label><br />
  <input type="radio" name="equipo" id="bcn" value="b">
  <label for="bcn">Barcelona</label>
</form>
```
... se ve así:

Equipo favorito:
Real Madrid
Inter
Barcelona

<input type="checkbox" />
Define una o más casillas de verificación, pudiendo marcar el usuario las que desee.

Atributos:
- name: asigna un nombre identificador único a la variable definida por el elemento. Este identificador debe ser el mismo para todos los elementos conjunto de casillas.
- value: define un valor de la variable para cada uno de casillas de verificación.
- checked: marca por defecto una o más de las casillas del grupo.
- disabled: desactiva la casilla de verificación, por lo que el usuario no podrá marcarla.
- tabindex: especifica el orden de tabulador que tendrá el campo respecto del resto de elementos del formulario.
Ejemplo: este código:
```
<form method="post" action="test.php">
  Musica favorita:<br />
  <input type="checkbox" name="music" id="rock" value="r" checked />
  <label for="rock">Rock</label><br />
  <input type="checkbox" name="music" id="pop" value="p" />
  <label for="pop">Pop</label><br />
  <input type="checkbox" name="music" id="heavy" value="h" checked />
  <label for="heavy">Heavy</label><br />
  <input type="checkbox" name="music" id="tecno" value="t" />
  <label for="tecno">Tecno</label>
</form>
```
... se ve así:

Musica favorita:
Rock
Pop
Heavy
Tecno

<input type="image" />
Inserta un botón de envío de datos (tipo submit) definido por una imagen.

Atributos:
- name: asigna un nombre al botón para identificarlo de forma única y poder así acceder luego a sus propiedades.
- src: establece la ruta donde localizar el fichero de imagen.
- width: fija la anchura del botón de imagen.
- height: fija la altura del botón de imagen.
- align: define la posición del texto que rodea el botón respecto de éste (left / middle / right / bottom / baseline).
- alt: texto alternativo.
- disabled: desactiva el botón, de tal forma que no se produce ninguna acción cuando se pulsa, pues permanece inactivo
- tabindex: especifica el orden de tabulador que tendrá el campo respecto del resto de elementos del formulario.
- usemap: permite el uso de un mapa de imágenes ("#nombre_mapa").
Ejemplo: este código:
```
<form method="post" action="test.php">
  <input type="image" src="submit.jpg" alt="Submit" name="s" id="s" />
</form>
```
... se ve así:

<input type="password" />
Define una caja de texto destinada a contener un password, por lo que el texto que introduzca el usuario aparecerá como asteriscos por motivos de seguridad.

Ejemplo: este código:
```
<form method="post" action="test.php">
  <label for="pass">Password:</label>
  <input type="password" size="15" maxlength="10" name="pass" id="pass" />
</form>
```
... se ve así (prueba a teclear algo de texto):

Password:

<input type="hidden" />
Define un campo invisible que no se muestra en pantalla.

Atributos:
- name: asigna un nombre identificador único al campo oculto.
- value: es el valor que se va a pasar al servidor. El usuario no puede modificarlo, por lo que si queremos modificarlo tendremos que hacerlo mediante código de script. Se utiliza para pasar variables ocultas de una página a otra.
Ejemplo:
```
<form method="post" action="test.php">
  <input type="hidden" name="ref" id="ref" value="123abc" />
</form>
```

<input type="file" />
Inserta una caja de texto y un botón "Examinar...", que nos permite seleccionar un archivo para enviarlo al servidor. Cuando se incluye este control en un formulario se debe establecer el atributo enctype="multipart/form-data" en la etiqueta <form>.

Atributos:
- accept: determina el tipo de archivo que se admite.
- disabled: desactiva tanto el botón como la caja de texto, impidiendo al usuario seleccionar un archivo.
- size: fija la anchura de la caja de texto asociada.
Ejemplo: este código:
```
<form method="post" action="test.php">
  <label for="datafile">Subir archivo:</label>
  <input type="file" name="datafile" id="datafile" size="20" />
</form>
```
... se ve así:

Subir archivo:

<input type="submit" />
Inserta un botón de envío de datos que al ser clickado por el usuario envía los datos del formulario al servidor.

Atributos:
- value: define el texto que va a aparecer en el botón de envío.
- disabled: desactiva el botón, de tal forma que no se produce ninguna acción cuando se pulsa, pues permanece inactivo.
- tabindex: especifica el orden de tabulador que tendrá el campo respecto del resto de elementos del formulario.
Ejemplo: este código:
```
<form method="post" action="test.php">
  <label for="nombre">Nombre:</label>
  <input type="text" size="30" name="nombre" id="nombre"
    value="Teclea tu nombre" /><br />
  <label for="email">Email:</label>
  <input type="text" size="30" name="email" id="email" /><br />
  <input type="submit" value="Enviar" name="enviar" />
</form>
```
... se ve así:

Nombre:
Email:

<input type="reset" />

Define un botón que al ser clickado por el usuario borra todos los datos que hubiera introducido en cualquiera de los campos del formulario.

Ejemplo: este código:

<form method="post" action="test.php">
  <label for="user">Usuario:</label>
  <input type="text" size="30" name="user" id="user"
    value="Teclea tu nombre de usuario" /><br />
  <input type="reset" value="Reset" name="reset" />
</form>

... se ve así (rellena el campo de texto y clicka en Reset):

<input type="button" />
Define un botón estándar al que normalmente se le da utilidad mediante JavaScript, evento OnClick.

Atributos:
- name: asigna un nombre al botón.
- value: define el texto que va a figurar en el botón.
- disabled: desactiva el botón, de tal forma que no se produce ninguna acción cuando se pulsa.
- tabindex: especifica el orden de tabulador que tendrá el campo respecto del resto de elementos del el formulario.
Ejemplo: este código:
```
<form method="post" action="test.php">
  <input type="button" name="boton" value="Pulsame" />
</form>
```
... se ve así:

<button></button>

Inserta un botón que permite poner código HTML dentro, por lo que puede contener texto o una imagen. Se le da utilidad mediante JavaScript, evento OnClick. Puede ser usado en cualquier parte del documento, no sólo dentro de un formulario.

Atributos:

type: tipo de botón. Valores:
- submit: equivalente a <input type="submit" />.
- reset: equivalente a <input type="reset" />.
- button: equivalente a <input type="button" />.
value: valor de la variable.

Ejemplo: este código:

<form method="post" action="test.php">
  <label for="enviar">Boton "button type=submit"
    con una imagen en su interior:</label><br />
  <button type="submit" name="enviar" id="enviar">
    <img src="/wp-content/uploads/image/html3.jpg" alt="Enviar">
  </button><br />
 
  <label for="reset">Boton "button type=reset"
    con un texto en su interior:</label><br />
  <button type="reset" name="reset" id="reset">
    Reset
  </button><br />
 
  <label for="button">Boton "button type=button"
    con un texto en su interior:</label><br />
  <button type="button" name="button" id="button">
    Pulsame
  </button>
</form>

... se ve así:

<select></select>, <option /> y <optgroup></optgroup>
- <select></select>: define una lista de selección que puede ser una lista desplegable o una lista con barra de desplazamiento (en este caso puede ser de selección simple o múltiple).
  Atributos:
  - size: define el número de opciones visibles. Si size=1 el campo de selección se presenta como una lista desplegable mientras que si se indica otro valor se presenta como una lista con barra de desplazamiento.
  - multiple: permite elegir varias de las opciones a la vez. Si no se especifica solamente se podrá escoger una de las opciones.
- <option />: define cada una de las opciones de la lista de selección.
  Atributos:
  - value: valor que será asociado al atributo name de <select> cuando se envíe el formulario. Este valor debe ser único para cada opción.
  - selected: establece la opción por defecto. Si no se especifica se tomará por defecto la primera.
- <optgroup></optgroup>: permite agrupar opciones en una lista de selección con el fin para facilitar su manejo.
  Atributos:
  - label: descriptión del grupo de opciones.
Ejemplo: lista desplegable:
```
<form method="post" action="test.php">
  Selecciona uno de los siguientes valores:<br />
  <select>
    <option value="uno">uno
    <option value="dos">dos
    <option value="tres">tres
  </select>
</form>
```
... se ve así:

Selecciona uno de los siguientes valores:

Ejemplo: lista con barra de desplazamiento con selección simple:
```
<form method="post" action="test.php">
  Selecciona uno de los siguientes valores:<br />
  <select size="3">
    <option value="uno">uno
    <option value="dos">dos
    <option value="tres">tres
  </select>
</form>
```
... se ve así:

Selecciona uno de los siguientes valores:

Ejemplo: lista con barra de desplazamiento con selección múltiple:
```
<form method="post" action="test.php">
  Selecciona uno o mas de los siguientes valores:<br />
  <select size="3" multiple>
    <option value="uno">uno
    <option value="dos">dos
    <option value="tres">tres
  </select>
</form>
```
... se ve así:

Selecciona uno o mas de los siguientes valores:

Ejemplo: lista desplegable que utiliza <optgroup> para agrupar las opciones:
```
<form method="post" action="test.php">
  Selecciona uno de los siguientes valores:<br />
  <select>
    <optgroup label="Swedish Cars">
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
    </optgroup>
    <optgroup label="German Cars">
      <option value="mercedes">Mercedes</option>
      <option value="audi">Audi</option>
  </optgroup>
 </select>
</form>
```
... se ve así:

Selecciona uno de los siguientes valores:

<textarea></textarea>
Inserta una caja de texto de línea múltiple, que normalmente se utiliza para introducir comentarios o datos largos en un formulario. Si introducimos texto entre ambas etiquetas éste aparecerá como texto por defecto. Si el texto supera el espacio disponible aparecerá una barra de desplazamiento vertical.
- name: asigna un nombre al campo.
- cols: número de columnas visibles.
- rows: número de filas visibles.
- wrap: justifica automáticamente el texto.
- disabled: desactiva la caja de texto.
- readonly: impide que el contenido de la caja sea modificado por el usuario.
- tabindex: especifica el orden de tabulador que tendrá el campo respecto del resto de elementos del formulario.
Ejemplo: caja de texto de línea múltiple vacía:
```
<form method="post" action="test.php">
  Introduce un comentario:
  <textarea name="comentario" cols="40" rows="5">
  </textarea>
</form>
```
... se ve así:

Introduce un comentario:

Ejemplo: caja de texto de línea múltiple con un texto por defecto:
```
<form method="post" action="test.php">
  <textarea name="comentario" cols="40" rows="5">
    Introduce un comentario:
  </textarea>
</form>
```
... se ve así:

Introduce un comentario

Ejemplo: caja de texto de línea múltiple de sólo lectura:
```
<form method="post" action="test.php">
  <textarea name="comentario" cols="40" rows="5" readonly>
    Ahora no puedes escribir nada.
  </textarea>
</form>
```
... se ve así:

Ahora no puedes escribir nada

Recursos

Etiquetas HTML 4.01: Tags ordered alphabetically

1 comentario en “Manual de HTML: Formularios”

zinbel dice:

08-Dic-2009 14:12:40

es mas una consulta,
lo que quiero realizar es una seria de campos de texto donde el usuario escriba algo ,, por ejemplo rojo y con un boton dicha casilla en la cual a escrito rojo quede desactivada y no pueda borrar ni escribir mas en ella.
y que dicha informacion la pase al servidor.
se puede realizar esto en codigo html sis se puede como se consigue

Deja un comentario

- Estréllate y Arde

Páginas

Meta