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:

    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í:


  • <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:


  • <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:



  • <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):

  • <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í:

  • <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í:



  • <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í:

    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í:

Recursos

1 comentario en “Manual de HTML: Formularios”

  • zinbel dice:

    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