Ir directamente al contenido de esta página

codexexempla.org

Elementos de formulario

Tabla de contenidos

  1. button
  2. fieldset
  3. form
  4. input
  5. label
  6. legend
  7. optgroup
  8. option
  9. select
  10. textarea

button

Descripción
Incluye un botón en un formulario.
Atributos
¿Vacío?
No.
Modelo de contenido
Puede contener texto y/o cualquier número de encabezados, elementos de bloque excepto form y fieldset, elementos en línea excepto button, input, label, select, y textarea, y listas.
Eventos
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup, onfocus, onblur.

fieldset

Descripción
Agrupa varios elementos de formulario relacionados semánticamente.
Atributos
¿Vacío?
No.
Modelo de contenido
Puede contener texto y/o cero o más encabezados, elementos de bloque, elementos de línea y listas, y un elemento legend.
Eventos
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.

form

Descripción
Crea un formulario en el documento.
Atributos
  • accept: Una lista de tipos MIME —separados por comas— que acepta el servidor al que se envía el formulario.
  • accept-charset: Una lista de conjuntos de caracteres que acepta el servidor al que se envía el formulario.
  • action [obligatorio]: El URL de la página que va a procesar los datos enviados.
  • class: Uno o más identificadores de clase.
  • dir: Un sentido de lectura.
  • enctype: El tipo MIME empleado para enviar los datos del formulario, cuando el valor de method es post. Por defecto el valor es application/x-www-form-urlencoded, pero se debe especificar multipart/form-data cuando exista un input con el valor file.
  • id: Un identificador.
  • method:
    • get: Es el valor por defecto, y envía al servidor una URL compuesta por el valor de action, un separador que es el signo de cierre de interrogación (?), y la lista de campos y/o controles del formulario con name y sus valores —asociados por un igual (=)—, separados por comas (,), sustituyendo cada espacio en blanco por un signo más (+), y codificado los caracteres no ASCII por medio de un signo de porcentaje (%) y un valor hexadecimal. Se verá más claro si se prueba el siguiente codificador:

      get se debería emplear cuando los datos enviados no provocan cambios en el servidor, por ejemplo cuando se hace una petición en un buscador.

    • post: Por medio de este valor los datos se envían como el cuerpo de un mensaje. Se debería emplear cuando los datos provoquen cambios en el lado del servidor, por ejemplo cuando modifiquen los contenidos de una base de datos.
  • style: Una o varias declaraciones de CSS.
  • title: Un texto plano.
  • xml:lang: Un código de idioma.
¿Vacío?
No.
Modelo de contenido
Debe contener al menos un encabezado, un elemento de bloque excepto form, una lista o un fieldset.
Eventos
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup, onreset, onsubmit.

input

Descripción
Crea campos o controles en un formulario.
Atributos
  • accept: Una lista de tipos MIME —separados por comas— que acepta el servidor al que se envía el formulario y que se permiten para un campo.
  • accesskey: Un caracter que sirve como tecla de acceso rápido.
  • alt: Un texto plano alternativo que cumpla la misma función que la imagen. Se emplea cuando el tipo del input es image.
  • checked: checked [obligatorio]. Activa por defecto un radiobotón o una casilla, por lo que se emplea cuando el tipo es radio o checkbox, respectivamente.1
  • dir: Un sentido de lectura.
  • disabled: disabled [obligatorio]. Especifica que el campo o control está deshabilitado; en este estado, el campo o control no recibe el foco, no se incluye en la secuencia de tabulación y no genera ninguna acción.
  • class: Uno o más identificadores de clase.
  • id: Un identificador.
  • maxlength: Un número natural que representa el número total de caracteres permitidos cuando los tipos son text o password.
  • name: Un identificador. Es obligatorio para todo input salvo para los tipos submit y reset.
  • readonly: readonly [obligatorio]. El campo no puede modificarse, aunque a diferencia de disabled puede recibir el foco y afecta a la secuencia de tabulación.
  • size: Es pecifica el ancho inicial del campo o control, y es un número natural que representa una medida en píxeles, excepto para los tipos text y password, para los que representa el número de caracteres visibles en el campo.
  • src: El URL que apunta a la ubicación de la imagen que se quiere emplear como botón. Se emplea cuando el tipo del input es image.
  • style: Una o varias declaraciones de CSS.
  • tabindex: Un número natural que indica su posición en el orden de tabulación. Sobre este atributo, ver la nota del elemento a.
  • title: Un texto plano.
  • type:
    • button: Crea un botón sin comportamiento definido. Se especifica luego por medio de un script.
    • checkbox: Crea casillas de selección. Se agrupan por medio del atributo name.
    • file: Crea un campo de selección para archivos que el usuario puede enviar al servidor.
    • hidden: Envía datos ocultos que deben procesarse junto con la entrada del usuario.
    • image: Convierte una imagen en un botón de envío.
    • password: Como text, pero destinado a contraseñas; los valores se sustituyen por caracteres neutrales, pero esto sólo es un aspecto visual, no se realiza encriptación de ningún tipo.
    • radio: Crea casillas de selección excluyentes entre sí. Se agrupan por medio del atributo name.
    • reset: Crea un botón de reinicio. Al activarse los demás campos se restablecen al valor por defecto inicial.
    • submit: Crea un botón de envío.
    • text: Crea un campo de entrada de datos donde el usuario puede introducir una línea de texto. Si no se especifica type, éste es el valor implícito de input.
  • usemap: El valor del id asignado al elemento map que se quiere aplicar a una imagen que se va a emplear como botón. Se emplea cuando el tipo del input es image.
  • value: Una cadena de caracteres que asigna el valor por defecto del elemento. Es obligatorio cuando el tipo es chackbox o radio.
  • xml:lang: Un código de idioma.
¿Vacío?
Sí.
Modelo de contenido
No aplicable.
Eventos
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup, onfocus, onblur, onchange, onselect.
Notas
En el caso de type="radio" y type="checkbox" no se puede asignar el mismo valor para id que para name, puesto que, por un lado, los name de cada radiobotón o de cada casilla que forman un grupo deben ser el mismo, y por otro por definición un id ha de ser único en un documento.
Además, como todo campo de formulario, por cuestiones de accesibilidad un radiobotón o una casilla necesitan de un label que los defina, y éste se debe asociar al input haciendo referencia a su id específico.
En estos casos, personalmente creo que la forma más correcta de marcado sería la siguiente:

    <input name="radioboton" type="radio" id="radio_01" /> <label for="radio_01">Opción 1</label>
    <input name="radioboton" type="radio" id="radio_02" /> <label for="radio_02">Opción 2</label>
    <input name="radioboton" type="radio" id="radio_03" /> <label for="radio_03">Opción 3</label>
    
    <input name="casilla" type="checkbox" id="casilla_01" /> <label for="casilla_01">Opción 1</label>
    <input name="casilla" type="checkbox" id="casilla_02" /> <label for="casilla_02">Opción 2</label>
    <input name="casilla" type="checkbox" id="casilla_03" /> <label for="casilla_03">Opción 3</label>
                    

label

Descripción
Asocia una información textual descriptiva a un elemento de formulario.
Atributos
¿Vacío?
No.
Modelo de contenido
Puede contener texto y/o cualquier número de elementos en línea, excepto label.
Eventos
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup, onfocus, onblur.

legend

Descripción
Especifica un título descriptivo para un elemento fieldset.
Atributos
¿Vacío?
No.
Modelo de contenido
Puede contener texto y/o cualquier número de elementos en línea.
Eventos
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.

optgroup

Descripción
Agrupa opciones relacionadas por su significado dentro de un select.
Atributos
  • class: Uno o más identificadores de clase.
  • dir: Un sentido de lectura.
  • disabled: disabled [obligatorio]. Especifica que el grupo de opciones dentro de un select está deshabilitado; en este estado, ninguna de las opciones recibe el foco, no se incluyen en la secuencia de tabulación y no generan ninguna acción.
  • id: Un identificador.
  • label [obligatorio]: Un texto plano que identifica al grupo de opciones.
  • style: Una o varias declaraciones de CSS.
  • title: Un texto plano.
  • xml:lang: Un código de idioma.
¿Vacío?
No.
Modelo de contenido
Debe contener al menos un elemento option.
Eventos
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.

option

Descripción
Especifica una opción en un menú deplegable.
Atributos
  • class: Uno o más identificadores de clase.
  • dir: Un sentido de lectura.
  • disabled: disabled [obligatorio]. Especifica que la opción existe pero está deshabilitada; en este estado no recibe el foco, no se incluye en la secuencia de tabulación y no genera ninguna acción.
  • id: Un identificador.
  • label: Un texto plano que identifica la opción.
  • selected: selected [obligatorio]. Especifica que la opción está seleccionada por defecto. Si no se ha especificado para select el atributo multiple, sólo se puede preseleccionar una opción de unmenú determinado.
  • style: Una o varias declaraciones de CSS.
  • title: Un texto plano.
  • value: Un texto plano que asigna el valor del elemento.
  • xml:lang: Un código de idioma.
¿Vacío?
No.
Modelo de contenido
Puede contener texto.
Eventos
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.
Notas
Para este elemento, los agentes de usuario pueden asociar al name de select como valor el contenido del option elegido si éste carece de value. Así, si tenemos este código:

    <select name="opcion">
        <option value="Opción 1">Opción primera</option>
        <option value="Opción 2">Opción segunda</option>
        <option value="Opción 3">Opción tercera</option>
    </select>
                    
y elegimos la segunda opción, los datos enviados al servidor serían ?opcion=Opci%C3%B3n+2, (name=value). Para éste:

    <select name="opcion">
        <option>Opción primera</option>
        <option>Opción segunda</option>
        <option>Opción tercera</option>
    </select>
                    
sería ?opcion=Opci%C3%B3n+segunda (name=contenido).

select

Descripción
Crea un menú dentro de un formulario.
Atributos
  • class: Uno o más identificadores de clase.
  • dir: Un sentido de lectura.
  • disabled: disabled [obligatorio]. Especifica que el menú está deshabilitado; en este estado no recibe el foco, no se incluye en la secuencia de tabulación y no genera ninguna acción. No se despliega, aunque sí puede funcionar el mecanismo de scroll si size es mayor que 1.
  • id: Un identificador.
  • multiple: multiple [obligatorio]. Si se especifica, se permite seleccionar simultáneamente varias de las opciones del menú.
  • name: Un identificador.
  • size: Un número natural que indica la cantidad de líneas visibles que presenta inicialmente el menú. Si no se especifica o se especifica 1, los navegadores suelen representar el menú como un desplegable con el mayor número de opciones posible visible.
  • style: Una o varias declaraciones de CSS.
  • tabindex: Un número natural que indica su posición en el orden de tabulación. Sobre este atributo, ver la nota del elemento a.
  • title: Un texto plano.
  • xml:lang: Un código de idioma.
¿Vacío?
No.
Modelo de contenido
Debe contener al menos un elemento optgroup o un elemento option.
Eventos
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup, onfocus, onblur, onchange.

textarea

Descripción
Define un campo de datos que permite la entrada de un texto de más de una línea.
Atributos
  • accesskey: Un caracter que sirve como tecla de acceso rápido.
  • class: Uno o más identificadores de clase.
  • cols [obligatorio]: Un número natural que indica el número de caracteres permitidos por línea.
  • dir: Un sentido de lectura.
  • disabled: disabled [obligatorio]. Especifica que campo está deshabilitado; en este estado no recibe el foco, no se incluye en la secuencia de tabulación y no genera ninguna acción.
  • id: Un identificador.
  • name: Un identificador.
  • readonly: readonly [obligatorio]. El campo no puede modificarse, aunque a diferencia de disabled puede recibir el foco y afecta a la secuencia de tabulación.
  • rows [obligatorio]: Un número natural que especifica el número de líneas visibles del texto introducido, pero no su límite.
  • style: Una o varias declaraciones de CSS.
  • tabindex: Un número natural que indica su posición en el orden de tabulación. Sobre este atributo, ver la nota del elemento a.
  • title: Un texto plano.
  • xml:lang: Un código de idioma.
¿Vacío?
No.
Modelo de contenido
Puede contener texto.
Eventos
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup, onfocus, onblur, onchange, onselect.

Notas

  1. Como curiosidad, aunque no tenga mucho sentido se podría asignar checked="checked" a todos los radiobotones del mismo grupo —con el mismo name—. En este caso, por lo general los navegadores aplicarán el valor de activo al último input al que se haya asignado. Volver

Contacto

En virtud de la Ley Orgánica 15/1999 de Protección de Datos de Carácter Personal le informo de que los datos que proporcione no serán empleados para otro fin que el de responder a su mensaje. En especial, me comprometo a no cederlos a terceros ni a emplearlos para enviar información no solicitada.

Del blog de Digital Icon