.. highlight:: html

Formularios
***********
Los documentos |HTML| no sólo están pensados para ofrecer información al lector
y que éste la reciba pasivamente, sino que permiten asimismo que éste interactúe
con el documento, bien para influir directamente sobre él bien para que el navegador
retransmita el fruto de esta interacción al servidor web y una aplicación que
corre en él, asociada al documento, lleve a cabo alguna tarea. Por ejemplo:

* Un documento |HTML| podría tener asociados distintos aspectos visuales (temas
  o estilos) para cada uno de los cuales hubiera un |CSS| distinto. Un botón, en
  algún lugar del documento, podría permitir el cambio de estilo (o sea, el
  cambio del archivo |CSS| aplicable). Para ello, no se necesita el concurso de
  ninguna aplicación de servidor, pero el lector interactúa con el documento
  para hacerle saber su preferencia.

* Un documento |HTML| como `éste de la Consejería de Educación
  <https://www.juntadeandalucia.es/educacion/secretariavirtual/consulta/oferta-educativa-formacion-profesional/>`_
  permite rellenar una serie de campos de formulario para determinar cuáles
  son nuestras preferencias de estudio. Al completarlas y envíar la consulta, se
  envían los datos al servidor que realiza una consulta en una base de datos y
  devuelve el resultado de dicha consulta.

Nuestra intención es conocer cómo se construyen estos formularios sin
preocuparnos de la acción que desencadenan, puesto que el primer ejemplo
requiere de programación con Javascript_ en el lado del cliente, y el segundo,
programación con algún lenguaje de programación apropiado\ [#]_.

Como curiosidad, más histórica que otra cosa, los campos de formulario siempre
fueron unos de los elemenos |HTML| para los que más código *Javascript* se
escribía, ya que lo lógico era comprobar la validez de los datos introducidos
por el usuario antes de enviarlos al servidor. Sin embargo, |HTML|\ 5 introdujo
muchos atributos para llevar a cabo estas comprobaciones, de manera que la
inmensa mayor parte del código *Javascript* requerido antes para esta tarea,
ahora es absolutamente innecesario.

Declaración del formulario
==========================
Lo habitual es que todos los campos de formulario estén asociados a un
formulario, aunque no es obligatorio\ [#]_, ya que el formulario es el que
determina qué hacer con los datos recabados.

.. table:: Campo de formulario
   :class: el-html

   +-----------+----------------------------------------------------------------+
   | |form|    | Declara la existencia de un formulario                         |
   +-----------+----------------------------------------------------------------+

.. index:: form
.. _html-form:

**form** (:devmoz:`form`)
   Es el elemento encargado de definir un formulario, esto es de albergar los
   campos del formulario y determinador qué se hace con los datos recabados en
   él. Es un elemento de bloque que puede contener casi cualquier otro elemento\
   [#]_, con especial excepción de otro elemento |form|. Dicho en otras
   palabras, no pueden anidarse formularios.

   .. table:: Atributos de form
      :class: attr-html

      +--------------+------------+--------------------------------------------------+
      | action       | url        | |URL| a la que se envían los datos para que      |
      |              |            | una aplicación en el servidor la procese.        |
      +--------------+------------+--------------------------------------------------+
      | method       | | get|post | | Método de envío de los datos al servidor.      |
      |              | | dialog   | | El formulario se asocia a un elemento |dialog|.|
      +--------------+------------+--------------------------------------------------+
      | name         | nombre     | Nombre del formulario. Útil en algunas           |
      |              |            | ocasiones. En |HTML|\ 5 se prefiere el uso       |
      |              |            | del atributo *id*.                               |
      +--------------+------------+--------------------------------------------------+
      | target       | valor      | Con igual significado que el atributo            |
      |              |            | homónimo de |a|.                                 |
      +--------------+------------+--------------------------------------------------+
      | novalidate   | \-         | No realiza comprobaciones a los campos.          |
      +--------------+------------+--------------------------------------------------+
      | autocomplete | off|on     | Permite (o no) que el navegador complete         |
      |              |            | automáticamente los campos de texto              |
      |              |            | atendiendo a los criterios que tenga             |
      |              |            | establecidos (p.e. valores previos               |
      |              |            | introducidos en campos con el mismo nombre).     |
      +--------------+------------+--------------------------------------------------+

   Los principales atributos del elemento son *action* y *method*, aunque el
   segundo tiene como valor predeterminado "*get*".  Un ejemplo, de uso de este
   elemento podría ser:

   .. code-block:: html

      <form id="peticion" action="consulta.php" method="post">
         Nombre: <input type="text" name="nombre"><br>
         Apellidos: <input type="text" name="apellidos"><br>
      </form>

   Este código implicaría que los nombres y valores de campos de formulario
   incluidos dentro del elemento |form|:
  
   .. code-block:: none

      nombre=Pepe&apellidos=Ruiz%20Valera
  
   se enviarían por el método ``POST`` de |HTTP| a la dirección
   :file:`consulta.php` donde debería haber un *script* |PHP| que procesara los
   datos y devolviera una página de respuesta.

   .. note:: Cuando el método de envío (*method*) es *dialog*, los datos del
      formulario no se envían a ningún servidor, sino que el formulario se
      asociará a un elemento |dialog| que lo contenga. El envío del formulario
      supondrá el cierre del |dialog| y, además, el *returnValue* del |dialog|
      adoptará el valor del botón con el que se envió. Más adelante, al tratar
      este elemento, se proporciona un ejemplo de este comportamiento.

Introducción manual de datos
=============================
Trataremos bajo este epígrafe los mecanimos de |HTML|\ 5 que permiten al usuario
la introducción de datos no preestablecidos. Los dos elementos |HTML| destinados a ello
son:

.. table:: Campo de introducción de datos
   :class: el-html

   +------------+----------------------------------------------------------------+
   | |input|    | Permite la introducción de datos de extensión reducida         |
   +------------+----------------------------------------------------------------+
   | |textarea| | Permite la introducción de datos de gran extensión             |
   +------------+----------------------------------------------------------------+

.. index:: input
.. _html-input:

**input** (:devmoz:`input`)
   Es el elemento destinado a la introducción de datos de pequeña extensión. Es
   un elemento muy versátil, ya que gracias a su atributo *type*, permite
   preparar al navegador para recibir datos de muy distinta naturaleza. Por este
   motivo no declararemos de una sola vez cuáles son todas sus posibilidades,
   sino que iremos desglosando estas a lo largo de toda la lección. Por ahora,
   nos limitaremos a declarar cuáles son sus atributos comunes y cómo usarlos
   para escribir texto en general.

   .. table:: Atributos comunes de input
      :class: attr-html

      +--------------+----------+-----------------------------------------------+
      | autocomplete | off|on   | Permite al navegador autocompletar este campo |
      |              |          | de manera análoga al atributo de |form| que   |
      |              |          | se aplica en general sobre todos los campos   |
      |              |          | del formulario.                               |
      +--------------+----------+-----------------------------------------------+
      | autofocus    | \-       | Atrae hacia sí el foco. Por tanto, debería    |
      |              |          | tener este atributo aquel campo que queremos  |
      |              |          | que sea el primero en rellenar el usuario.    |
      +--------------+----------+-----------------------------------------------+
      | disabled     | \-       | Deshabilita el campo. Comúnmente se añade     |
      |              |          | con intención de que alguna acción de usuario |
      |              |          | (como rellenar otro campo), borre el atributo.|
      +--------------+----------+-----------------------------------------------+
      | form         | id       | Identificador del formulario al que pertenece |
      |              |          | el campo. Si no se incluye, pertenecerá al    |
      |              |          | formulario que contiene al campo.             |
      +--------------+----------+-----------------------------------------------+
      | list         | id       | Identificador de la |datalist| con valores    |
      |              |          | predefinidos para sugerir al usuario.         | 
      +--------------+----------+-----------------------------------------------+
      | name         | nombre   | Nombre identificativo del campo usado cuando  |
      |              |          | se envía al servidor.                         |
      +--------------+----------+-----------------------------------------------+
      | pattern\ [#]_| regexp   | :ref:`Expresión regular <linux:regex>` con    |
      |              |          | la que debe concordar                         |
      |              |          | el valor del campo para considerarse válido.  |
      +--------------+----------+-----------------------------------------------+
      | placeholder  | valor    | Sugerencia al usuario. Aparecerá en un color  |
      |              |          | gris claro.                                   |
      +--------------+----------+-----------------------------------------------+
      | readonly     | \-       | Campo de sólo lectura.                        |
      +--------------+----------+-----------------------------------------------+
      | required     | \-       | El campo es obligatorio.                      |
      +--------------+----------+-----------------------------------------------+
      | value        | valor    | Valor inicial del campo.                      |
      +--------------+----------+-----------------------------------------------+
      | type         | tipo     | Tipo de campo. Esta es la madre del cordero.  |
      +--------------+----------+-----------------------------------------------+

   .. caution:: Un campo deshabilitado no solamente no puede ser rellenado, sino
      que además no se envía al remitir el formulario al servidor. Esto es lo
      que los diferencia de un campo de sólo lectura.

   .. seealso:: Si quiere saber más sobre *expresiones regulares* consulte
      :ref:`este extenso tutorial <linux:regex>`.

   .. _html-input-text:
   .. _html-input-search:
   .. _html-input-password:
   .. _html-input-hidden:
   .. _html-input-url:
   .. _html-input-email:

   En cuanto a los tipos de campos posibles, algunos de ellos son:

   .. table:: Valores de type para texto general.
      :class: attr-html

      +--------------+-----------+-----------------------------------------------+
      | type         | text_     | Texto libre. Es el valor predeterminado.      |
      +--------------+-----------+-----------------------------------------------+
      | type         | search_   | Términos de búsqueda.                         |
      +--------------+-----------+-----------------------------------------------+
      | type         | password_ | Contraseñas (no se ven los caracteres).       |
      +--------------+-----------+-----------------------------------------------+
      | type         | hidden_   | Campo oculto. No aparece, pero es enviado.    |                  
      +--------------+-----------+-----------------------------------------------+
      | type         | url_      | Exige una |URL|.                              |
      +--------------+-----------+-----------------------------------------------+
      | type         | email_    | Exige una dirección de correo electrónico.    |
      +--------------+-----------+-----------------------------------------------+

   Los tipos *url* e *email* no permiten cualquier valor, sino uno que el
   navegador considera válido para el tipo correspondiente.

   .. note:: Con el atributo *pattern* podemos restringir los valores posibles,
      de modo que en muchos casos para la validez podríamos prescindir del tipo.
      Sin embargo, no debe ser así, puesto que la semántica es importante y,
      además, el tipo puede provocar cambios en el comportamiento del navegador.
      Por ejemplo, cuando el tipo es numérico, no es posible escribir letras
      aunque se pulsen y, en el caso de ser el dispositivo un teléfono móvil,
      aparecerá un teclado numérico exclusivamente.

   Ejemplo:

   .. code-block:: html


      <form id="ej1" action="">
         Nombre: <input name="nombre" required pattern="[A-Z][A-Za-z ]*"><br>
         Apellidos: <input name="apellidos" pattern="[A-Z}[A-Za-z ]*"><br>
         Escríbame aquí su vida: <textarea cols=50 rows=15 name="rollo"
         placeholder="Cuénteme aquí todo"></textarea>
         <button>Envíar</button>
      </form>

   .. rst-class:: ej-html

   .. raw:: html

      <form id="ej1" action="">
         Nombre: <input name="nombre" required pattern="[A-Z][A-Za-z ]*"><br>
         Apellidos: <input name="apellidos" pattern="[A-Z}[A-Za-z ]*"><br>
         Escríbame aquí su vida: <textarea cols=50 rows=15 name="rollo"
         placeholder="Cuénteme aquí todo..."></textarea>
         <button>Envíar</button>
      </form>

   .. note:: Puede usarse *title* para informar al usuario de cuáles son las
      restricciones sobre los campos.

.. index:: textarea
.. _html-textarea:

**textarea** (:devmoz:`textarea`)
   Permite rellenar un campo de texto de gran extensión.

   .. table:: Atributos de textarea
      :class: attr-html

      +--------------+--------------------+-----------------------------------------------+
      | rows         | num                | Número de filas del recuadro de texto.        |
      +--------------+--------------------+-----------------------------------------------+
      | cols         | num                | Número de columnas del recuadro de texto.     |
      +--------------+--------------------+-----------------------------------------------+
      | maxlength    | num                | Longitud máxima en caracteres del contenido   |
      +--------------+--------------------+-----------------------------------------------+
      | minlength    | num                | Longitud mínima en caracteres del contenido   |
      +--------------+--------------------+-----------------------------------------------+
      | spellcheck   | true|false|default | Define si se comprueban errores ortográficos  |
      +--------------+--------------------+-----------------------------------------------+

   .. note:: *spellcheck* es un atributo global que puede usarse en cualquier
      otro elemento. Cuando en un elemento su valor es "*default*", el elemento heredará el
      valor que tuviera este atributo en otro elemento |HTML| antecesor suyo.

Datos numéricos
----------------
Hay tres tipos de campos |input| relacionados con valores numéricos:

.. table:: Valores de type para campos numéricos
   :class: attr-html

   +--------------+-----------+-----------------------------------------------+
   | type         | number_   | Valor numérico                                |
   +--------------+-----------+-----------------------------------------------+
   | type         | range_    | Valor numérico de dentro de un rango          |
   +--------------+-----------+-----------------------------------------------+
   | type         | tel_      | Número de teléfono.                           |
   +--------------+-----------+-----------------------------------------------+

.. _html-input-number:

El tipo **number** permite escribir números (enteros o decimales) y admite tres
atributos propios:

.. table:: Atributos para los tipos number y range
   :class: attr-html

   +--------------+-----------+-----------------------------------------------+
   | max          | num       | Número máximo admisible                       |
   +--------------+-----------+-----------------------------------------------+
   | min          | num       | Número mínimo admisibles                      |
   +--------------+-----------+-----------------------------------------------+
   | step         | num       | Paso entre valores adminisbles                |
   +--------------+-----------+-----------------------------------------------+

Por ejemplo, esto permitirá indicar la edad en años de una persona:

.. code-block:: html

   Edad: <input type="number" name="edad" max=120 min=0 step=1> años

Por su parte, **range** habilita la introducción de un valor numérico que se
mueve dentro de un pequeño rango\ [#]_. Tiene los mismos atributos que el tipo
anterior, pero el navegador lo suele presentar de un modo muy distinto:

.. code-block:: html

   <input type="range" min=0 max=10 value=8 name="satisfaccion" step="2"> Grado de satisfacción

.. rst-class:: ej-html

.. raw:: html

   <input type="range" min=0 max=10 value=8 name="satisfaccion" step="2"> Grado de satisfacción

**tel** permite indicar valores que son números de teléfono. Este ejemplo
permite escribir números válidos en España::

   Teléfono: <input type="tel" name="tlfo" pattern="[6-9][0-9]{2}-[0-9]{6}">

Fechas
------
Existen también tipos de |input| especiales para escribir horas y fechas:

.. _html-input-date:
.. _html-input-month:
.. _html-input-week:
.. _html-input-time:
.. _html-input-datetime-local:

.. table:: Valores de type para fechas
   :class: attr-html

   +--------------+-----------------+-----------------------------------------------+
   | type         | date_           | Fecha.                                        |
   +--------------+-----------------+-----------------------------------------------+
   | type         | month_          | Fecha (sólo mes y año)                        |
   +--------------+-----------------+-----------------------------------------------+
   | type         | week_           | Semana del año                                |
   +--------------+-----------------+-----------------------------------------------+
   | type         | time_           | Hora.                                         |
   +--------------+-----------------+-----------------------------------------------+
   | type         | datetime-local_ | Fecha y hora                                  |
   +--------------+-----------------+-----------------------------------------------+

Para todos estos tipos, el navegador facilitará la introducción de los datos:

.. code-block:: html

   Fecha: <input type="date" max="2019-12-12" min="2018-01-01" name="fecha"><br>
   Hora: <input type="time" max="14:45" min="8:00" name="hora"><br>

.. rst-class:: ej-html

.. raw:: html

   Fecha: <input type="date" max="2019-12-12" min="2018-01-01" name="fecha"><br>
   Hora: <input type="time" max="14:45" min="8:00" name="hora"><br>

.. _html-input-color:

Colores
-------
Para seleccionar colores existe un tipo particular:

.. table:: Valores de type para selección de color
   :class: attr-html

   +--------------+-----------------+-----------------------------------------------+
   | type         | color_          | Color                                         |
   +--------------+-----------------+-----------------------------------------------+

Ejemplo:

.. code-block:: html

   Fondo: <input type="color" name="bgcolor" value="#ff00ff"><br>
   Texto: <input type="color" name="fgcolor"><br>

.. rst-class:: ej-html

.. raw:: html

   Fondo: <input type="color" name="bgcolor" value="#ff00ff"><br>
   Texto: <input type="color" name="fgcolor"><br>

.. _html-form-sel:

Selección de datos
==================
Bajo este epígrafe trataremos los campos de formulario que habilita |HTML|\ 5
para seleccionar entre un conjunto predefinido y finito de valores. La
diferencia con las listas de sugerencias que podían ofrecernos los campos
anteriores es que, en este caso, estamos obligados a escoger entre las
alternativas propuestas.

.. _html-input-checkbox:
.. _html-input-radio:

Campos de selección
-------------------
Trataremos dos tipos distintos de |input|:

.. table:: Valores de type para campos de selección
   :class: attr-html

   +--------------+-----------------+-----------------------------------------------+
   | type         | checkbox_       | Genera casillas de verificación               |
   +--------------+-----------------+-----------------------------------------------+
   | type         | radio_          | Genera botones de opción                      |
   +--------------+-----------------+-----------------------------------------------+

Ambos campos se comportan de forma semejante: son necesarios varios elementos
|input|, todos con el mismo valor del atributo *name* y permiten marcar el
campo mediante el uso del ratón. Además permiten el siguiente atributo:

.. table:: Atributos para los tipos checkbox y radio
   :class: attr-html

   +--------------+-----------+-----------------------------------------------+
   | checked      | \-        | Marca preventivamente la opción               |
   +--------------+-----------+-----------------------------------------------+

La diferencia fundamental es que **radio** define opciones excluyentes, mientras
que las alternativas de *checkbox* no lo son. Por ejemplo:

.. code-block:: html

   Escoja su sexo: <br>
   <input name="sexo" type="radio" value="V"> Varón <input name="sexo" type="radio" value="H"> Hembra

.. rst-class:: ej-html

.. raw:: html

   Escoja su sexo: <br>
   <input name="sexo" type="radio" value="V"> Varón <input name="sexo" type="radio" value="H"> Hembra

Frente a esto otro:

.. code-block:: html

   <p>¿Cuál son sus medios de locomoción favoritos?</p>
   <p><input name="transporte" type="checkbox" value="coche" checked> El coche<br>
   <input name="transporte" type="checkbox" value="barco"> El barco<br>
   <input name="transporte" type="checkbox" value="moto"> La motocicleta<br>
   <input name="transporte" type="checkbox" value="bici"> La bicicleta<br>
   <input name="transporte" type="checkbox" value="tren" checked> El tren<br>
   <input name="transporte" type="checkbox" value="avion"> El avión<br>
   <input name="transporte" type="checkbox" value="otros"> Otros<br>
   </p>

.. rst-class:: ej-html

.. raw:: html

   <p>¿Cuál son sus medios de locomoción favoritos?</p>
   <p><input name="transporte" type="checkbox" value="coche" checked> El coche<br>
   <input name="transporte" type="checkbox" value="barco"> El barco<br>
   <input name="transporte" type="checkbox" value="moto"> La motocicleta<br>
   <input name="transporte" type="checkbox" value="bici"> La bicicleta<br>
   <input name="transporte" type="checkbox" value="tren" checked> El tren<br>
   <input name="transporte" type="checkbox" value="avion"> El avión<br>
   <input name="transporte" type="checkbox" value="otros"> Otros<br>
   </p>


.. _html-input-file:

Ficheros
--------
Existe un tipo particular para seleccionar uno o más ficheros locales:

.. table:: Valores de type para selección de color
   :class: attr-html

   +--------------+-----------------+-----------------------------------------------+
   | type         | file_           | Selecciona ficheros locales                   |
   +--------------+-----------------+-----------------------------------------------+

El tipo tiene algunos atributos propios:

.. table:: Atributos de input para tipos *file*
   :class: attr-html

   +--------------+-----------------+-----------------------------------------------+
   | accept       | valores         | Tipos de ficheros admisibles. Pueden usarse   |
   |              |                 | tipos |MIME|, o extensiones de ficheros       |
   |              |                 | separados por comas                           |
   +--------------+-----------------+-----------------------------------------------+
   | multiple     | \-              | Permite seleccionar más de un fichero         |
   +--------------+-----------------+-----------------------------------------------+

Ejemplo::

   Seleccione avatar: <input type="file" accept=".png,image/jpeg">

.. rst-class:: ej-html

.. raw:: html

   Seleccione avatar: <input type="file" accept=".png,image/jpeg">

.. note:: |HTML|\ 5 tiene una |API| *Drag & drop* (arrastrar y soltar) para
   Javascript_ que entre otras muchas finalidades, puede servir para obtener
   archivos arrastrándolos a un área definida en la página, en vez de
   eligiéndolos como se ha expuesto aquí. Como esto requiere programar, que no
   es el objetivo de esta unidad, lo dejaremos estar. Para más información,
   puede consultarse `este artículo de web.dev sobre el asunto
   <https://web.dev/articles/drag-and-drop?hl=es>`_.


.. index:: select, option, optgroup

Listas de selección
-------------------
Otra posibilidad que ofrecen los formularios |HTML| es la creación de listas de
selección, para las cuales se usan otros elementos distintos a |input|:

.. table:: Campos para listas de selección.
   :class: el-html

   +------------+----------------------------------------------------------------+
   | |select|   | Declara una lista desplegable                                  |
   +------------+----------------------------------------------------------------+
   | |option|   | Define un ítem de la lista                                     |
   +------------+----------------------------------------------------------------+
   | |optgroup| | Agrupa ítems de la lista                                       |
   +------------+----------------------------------------------------------------+

.. _html-select:

**select** (:devmoz:`select`)
   Elemento dentro del cual se define una lista de selección. Dispone de muchos de
   los atributos aplicables a |input| con idéntico significado como *autofocus*,
   *disabled*, *form*, *name* o *required*. Añade además:

   .. table:: Atributos adicionales de *select*
      :class: attr-html

      +--------------+-----------------+-----------------------------------------------+
      | multiple     | \-              | Permite seleccionar más de un ítem            |
      +--------------+-----------------+-----------------------------------------------+
      | size         | num             | Cantidad de ítem que se visualizan a la vez   |
      +--------------+-----------------+-----------------------------------------------+

.. _html-option:

**option** (:devmoz:`option`)
   Define cada uno de los ítem de la lista desplegable. Sus posibles atributos son:

   .. table:: Atributos de *option*
      :class: attr-html

      +--------------+-----------------+-----------------------------------------------+
      | disabled     | \-              | Deshabilita la selección de ese ítem          |
      +--------------+-----------------+-----------------------------------------------+
      | selected     | \-              | Marca esta opción como seleccionada           |
      +--------------+-----------------+-----------------------------------------------+
      | value        | valor           | El valor que se enviará si se selecciona este |
      |              |                 | ítem.                                         |
      +--------------+-----------------+-----------------------------------------------+
      | label        | texto           | Texto del ítem                                |
      +--------------+-----------------+-----------------------------------------------+

   El elemento permite incluir contenido de texto que será el que se muestre a menos
   que se incluya también el atributo *label*. Por ejemplo::

      Nacionalidad:
      <select name="nacionalidad">
         <option disabled selected label="-- Escoja una opción --">
         <option value="es">Española
         <option value="pt">Portuguesa
         <option value="fr">Francesa
         <option value="uk">Británica
         <option value="it">Italiana
      </select>

   se verá así:

   .. rst-class:: ej-html

   .. raw:: html

      Nacionalidad:
      <select name="nacionalidad">
         <option disabled selected label="-- Escoja una opción --">
         <option value="es">Española
         <option value="pt">Portuguesa
         <option value="fr">Francesa
         <option value="uk">Británica
         <option value="it">Italiana
      </select>

   Obsérvese que cada opción posible tiene un valor y que todos comparten el
   nombre (*name*) definido a través del elemento |select|. De este modo, si se
   eligiera la nacionalidad portuguesa, por mor de este campo se enviaría
   :code:`name=pt`.

   .. note:: Obsérvese que hay tres aspectos relacionados con el valor y cómo
      se muestra en pantalla:

      * El atributo *value* es el valor enviado, pero no es obligatoria su
        presencia y, si no se encuentra, se envía el contenido del elemento.
      * El contenido se muestra siempre que no exista la etiqueta *label* y
        se usa como valor, siempre que no exista el atributo *value*.
      * El atributo *label* es la leyenda que representa la opción, pero no
        se usa como valor de envío.

.. _html-optgroup:

**optgroup** (:devmoz:`optgroup`)
   Permite agrupar varios ítem bajo una misma categoría. Para ello, lo que se hace
   es incluir los elementos |option| dependientes dentro de un mismo |optgroup|.

   .. table:: Atributos de *optgroup*
      :class: attr-html

      +--------------+-----------------+-----------------------------------------------+
      | disabled     | \-              | Deshabilita la selección de todos los ítem    |
      |              |                 | incluidos dentro.                             |
      +--------------+-----------------+-----------------------------------------------+
      | label        | texto           | Texto que se usará para representar al grupo  |
      +--------------+-----------------+-----------------------------------------------+

   Por ejemlo::

      Nacionalidad:
      <select name="nacionalidad">
         <optgroup label="Europa">
            <option value="es">Española</option>
            <option value="pt">Portuguesa</option>
            <option value="fr">Francesa</option>
            <option value="uk">Británica</option>
            <option value="it">Italiana</option>
         </optgroup>
         <optgroup label="América">
            <option value="mx">Mejicana</option>
            <option value="us">Estadounidense</option>
            <option value="cu">Cubana</option>
            <option value="ar">Argentina</option>
            <option value="ve">Venezolana</option>
         </optgroup>
      </select>

   que se verá:

   .. rst-class:: ej-html

   .. raw:: html

      Nacionalidad:
      <select name="nacionalidad">
         <optgroup label="Europa">
            <option value="es">Española</option>
            <option value="pt">Portuguesa</option>
            <option value="fr">Francesa</option>
            <option value="uk">Británica</option>
            <option value="it">Italiana</option>
         </optgroup>
         <optgroup label="América">
            <option value="mx">Mejicana</option>
            <option value="us">Estadounidense</option>
            <option value="cu">Cubana</option>
            <option value="ar">Argentina</option>
            <option value="ve">Venezolana</option>
         </optgroup>
      </select>

Por último, hemos eludido hasta ahora el uso de las opciones *multiple* y
*size*. Cuando *size* es mayor que **1**, lo navegadores tienden a dejar de
mostrar la lista como una lista desplegable y pasan a mostrarla como una lista
con barra de *scroll*. El uso de *multiple*, además de permitir la selección de
varios ítem a la vez, pasa a mostrar la lista con barra de *scroll*::

   Nacionalidad:
   <select name="nacionalidad" size=3>
      <option value="es">Española</option>
      <option value="pt" selected>Portuguesa</option>
      <option value="fr">Francesa</option>
      <option value="uk">Británica</option>
      <option value="it">Italiana</option>
   </select>

que se ve:

.. rst-class:: ej-html

.. raw:: html

   Nacionalidad:
   <select name="nacionalidad" size=3>
      <option value="es">Española</option>
      <option value="pt" selected>Portuguesa</option>
      <option value="fr">Francesa</option>
      <option value="uk">Británica</option>
      <option value="it">Italiana</option>
   </select>

Botones
=======
Ningún formulario que se precisa sería tal, sino habilitamos un modo de enviar
los datos al formularios. Para ello se habilitan los botones de envío, aunque
no es su única función. Se encargan de:

* El **envío** del formulario.
* El **reseteo** del formulario, para recuperar los valores iniciales.
* No hacer nada. En realidad, más que no hacer nada lo que no tienen este tipo
  de botones es una función predefinida, de modo que para que sean útiles es
  necesario definirla a través de *Javascript*, lo cual se sale del propósito
  de esta unidad.

Para implementar los botones hay dos elementos distintos con los que se puede
lograr la misma funcionalidad: el omnipresente |input| y |button|:

.. table:: Elemento *button*
   :class: el-html

   +------------+----------------------------------------------------------------+
   | |button|   | Permite definir botones en el formulario                       |
   +------------+----------------------------------------------------------------+

.. index:: button
.. _html-button:

**button** (:devmoz:`button`)
   Es el elemento que permite la inclusión con botones en los formularios |HTML| y
   comparte esta función con algunos de los tipos de |input|. El contenido del
   elemento define la forma en que se ve. Por tanto::

      <button>Soy un botón</button>

   Mostrará un botón de texto y::

      <button><img alt="Soy un botón" src="images/boton.png"></button>

   una imagen pulsable.

   .. table:: Tipos de botones con el elemento *button*
      :class: attr-html

      +--------------+--------+--------------------------------------------------+
      | type         | submit | Envía los datos del formulario. Este es el valor |
      |              |        | predeterminado                                   |
      +--------------+--------+--------------------------------------------------+
      | type         | reset  | Resetea el formulario.                           |
      +--------------+--------+--------------------------------------------------+
      | type         | button | Sin funcionalidad definida.                      |
      +--------------+--------+--------------------------------------------------+

   Estos tipos de botón tienen su equivalencia con *input*:

   .. table:: Tipos de botones con el elemento *input*
      :class: attr-html

      +--------------+---------+--------------------------------------------------+
      | type         | submit_ | Equivale a :code:`<button type="submit">`.       |
      +--------------+---------+--------------------------------------------------+
      | type         | image_  | Equivale a :code:`<button type="submit">`, pero  |
      |              |         | usando una imagen en vez de texto.               |
      +--------------+---------+--------------------------------------------------+
      | type         | reset_  | Equivale a :code:`<button type="reset">`.        |
      +--------------+---------+--------------------------------------------------+
      | type         | button_ |  Equivale a :code:`<button type="button">`.      |
      +--------------+---------+--------------------------------------------------+

   En principio ambos elementos son equivalentes y, salvando el hecho de que uno (|input|)
   usa su atributo *value* y el otro (|button|) su contenido para definir su representación,
   no hay diferencias, de modo que todo lo indicado es aplicable a ambos.

En principio, la función de estos elementos es desencadenar una acción, por lo
que no es necesario que aporten información alguna. En consecuencia es muy
común que no incluyan atributo *name*. Así este formulario::

   <form id="formulario" action="">
      <input type="hidden" name="oculto" value="foobar">
      <button>Enviar</button>
   </form>

enviaría al pulsar sobre el botón la información :code:`oculto=foobar`. Aunque
por lo general se desea que ocurra esto, podría darse la circunstancia de que
en el formulario dispusiéramos varios botones de envio y que quisiéramos saber
en la aplicación de servidor cuál fue el botón que pulsó el usuario. Ello se
podría resolver usando un mismo *name* para todos lo botones y modificando el
valor que envía cada uno::

   <form id="formulario" action="">
      <input type="hidden" name="oculto" value="foobar">
      <button name="submit" value="1">Enviar 1</button>
      <button name="submit" value="2">Enviar 2</button>
   </form>

De este modo, al pulsar el primer botón la información enviada sería
:code:`oculto=foobar&submit=1` y al pulsar el segundo
:code:`oculto=foobar&submit=2`.

En cuanto a los atributos posibles para ambos elementos, aparte de los ya
definidos como *name*, *value*, *type*, *autofocus*, *disabled* o *form* se
incluyen que alteran, si se usa tal botón, el envío del formulario
definido en la etiqueta |form|:

.. table:: Atributos de *input* y *button* para definir comportamiento
   :class: attr-html

   +----------------+----------+---------------------------------------------------+
   | formaction     | url      | Redefine el atributo *action* del formulario.     |
   +----------------+----------+---------------------------------------------------+
   | formmethod     | get|post | Redefine el atributo *method* del formulario.     |
   +----------------+----------+---------------------------------------------------+
   | formnovalidate | \-       | Redefine el atributo *novalidate* del formulario. |
   +----------------+----------+---------------------------------------------------+
   | formtarget     | valor    | Redefine el atributo *target* del formulario.     |
   +----------------+----------+---------------------------------------------------+

Otros aspectos
==============

.. _html-fieldset:
.. index:: fieldset

Organización
------------
Es común que al crear un formulario con varios campos de formulario, éstos
puedan agruparse lógicamente de algún modo. Por ejemplo, todos los elementos
|input| que implementan una :ref:`selección de campos <html-input-radio>`
forman una unidad. Para la reunión de campos de formulario se usa:

.. table:: Campos para listas de selección.
   :class: el-html

   +------------+----------------------------------------------+
   | |fieldset| | Agrupa campos de formulario.                 |
   +------------+----------------------------------------------+
   | |legend|   | Primer elemento opcional de |fieldset| que   |
   |            | añade una texto explicativo al grupo         |
   +------------+----------------------------------------------+

**fieldset** (:devmoz:`legend`)
   Básicamente es un contenedor de campos de formularios, aunque puede contener
   otros elementos que ayuden a estructurarlos mejor (|div|, |p|, etc.).

   Puede incluir algunos atributos:

   .. table:: Atributos de *fieldset*
      :class: attr-html

      +------------+----------+------------------------------------------------------+
      | disabled   | \-       | Deshabilita todos los campos de formulario intermos. |
      +------------+----------+------------------------------------------------------+
      | form       | id       | Identificador del formulario al que pertenece.       |
      +------------+----------+------------------------------------------------------+
      | name       | nombre   | Nombre del grupo.                                    |
      +------------+----------+------------------------------------------------------+



.. _html-legend:
.. index:: legend

**legend** (:devmoz:`legend`)
   Es un elemento que puede aparecer como primer hijo de un elemento |fieldset|
   para definir un texto que sirva de título al grupo de campos que reúne dicho
   elemento. Puede contener elementos en línea.

Retomando un ejemplo anterior, podríamos hacer::

   <fieldset>
      <legend>Sexo</legend>
      <input name="sexo" type="radio" value="V"> Varón
      <input name="sexo" type="radio" value="H"> Hembra
   </fieldset>

que se verá:

.. rst-class:: ej-html

.. raw:: html

   <fieldset>
      <legend>Sexo</legend>
      <input name="sexo" type="radio" value="V"> Varón
      <input name="sexo" type="radio" value="H"> Hembra
   </fieldset>

Asociación de texto al campo
----------------------------
A lo largo del documento hemos usado algunos campos de formulario que en sí
mismos no aclaran cuál es su función. Es el caso, de muchos de los tipos de
|input|::

   <input type="color" name="color" value="#ffff00">

o sea:

.. rst-class:: ej-html

.. raw:: html

   <input type="color" name="color" value="#ffff00">


Bien, ese selector de color, ¿para qué narices sirve? Es obvio que necesita un
texto aclaratorio, de ahí que en nuestro ejemplo hiciéramos algo de este
estilo::

   Color de fondo: <input type="color" name="color" value="#ffff00">

Es obvio que al verlo junto el lector entenderá que el selector se refiere a la
elección de un color de fondo, pero esta es sólo una relación visual que no está
reflejada semánticamente en el documento. Para crear esta relación debe hacerse
uso del elemento |label|::

   <label for="color">Color de fondo:</label> <input id="color" type="color" name="color" value="#ffff00">

que se ve:

.. rst-class:: ej-html

.. raw:: html

   <label for="color">Color de fondo:</label> <input id="color" type="color" name="color" value="#ffff00">

Definámoslo más formalmente:

.. _html-label:
.. index:: label

.. table:: Etiqueta *label*
   :class: el-html

   +------------+----------------------------------------------------+
   | |label|    | Define el texto asociado a un campo de formulario  |
   +------------+----------------------------------------------------+

**label** (:devmoz:`label`)
   Define el texto asociado a un campo del formulario y puede tomar un atributo:

   .. table:: Atributos de *label*
      :class: attr-html

      +------------+----------+------------------------------------------------------+
      | for        | id       | Identificador del campo con el que está relacionado. |
      +------------+----------+------------------------------------------------------+

   En el último ejemplo queda claro como se hace esta relación: se añade un
   identificador al campo y se usa en el atributo *for* de |label|. Una
   alternativa, que no requiere el uso del atributo *for* en |label| ni del
   identificador *id* en el campo es incluir el campo dentro de la etiqueta::

      <label>Color de fondo: <input type="color" name="color" value="#ffff00"></label>

   que se ve:

   .. rst-class:: ej-html

   .. raw:: html

      <label>Color de fondo: <input type="color" name="color" value="#ffff00"></label>

Lo interesante de |label| no es solamente la relación semántica, sino también
la relación en el comportamiento: pinchar sobre la etiqueta equivale a
pinchar sobre el propio campo\ [#]_.

.. index:: datalist
.. _html-datalist:

Lista de sugerencias
--------------------
Cuando se trataron los atributos de los tipos de |input| que permtían introducir
texto, nos limitamos a citar el atributo *list* e indicar que servía para generar
una lista precargada de sugerencias. No profundizamos más, porque ello requería
la introducción de un nuevo elemento |HTML|:

.. table:: Etiqueta *datalist*
   :class: el-html

   +------------+----------------------------------------------------+
   | |datalist| | Define una lista de sugerencias.                   |
   +------------+----------------------------------------------------+

**datalist** (:devmoz:`datalist`)
   Define una lista de sugerencias para un campo de texto, más allá de las
   sugerencias que pueda mostrar el navegador como consecuencia de que esté
   habilitado el autocompletado (*autocomplete*). El elemento, que no es
   visible, no presenta más atributo que un identificador para que pueda
   referenciarlo el atributo *list* del campo |input| y usa los elementos
   |option| ya vistos al tratar |select| para definir cuáles son estas
   sugerencias::

      <label for="esp">Especialidades: </label>
      <input list="especialidades" id="esp" name="especialidad"
             autocomplete="off" pattern="[A-Z0-9]{2}[0-9]{6}">
      <datalist id="especialidades">
         <option value="00590107">Informática
         <option value="00590006">Matemáticas
         <option value="00590011">Inglés
         <option value="00590004">Lengua
      </datalist>

   .. rst-class:: ej-html

   .. raw:: html

      <label for="esp">Especialidades: </label>
      <input list="especialidades" id="esp" name="especialidad"
             autocomplete="off" pattern="[A-Z0-9]{2}[0-9]{6}">
      <datalist id="especialidades">
         <option value="00590107">Informática
         <option value="00590006">Matemáticas
         <option value="00590011">Inglés
         <option value="00590004">Lengua
      </datalist>

   .. note:: Obsérvese que deshabilitamos el autocompletado para que a las
      sugerencias predefinidas no se añadan otras que vaya recordando el
      navegador. También hemos limitado los valores válidos usando un patrón.

.. warning:: Este solución no es equivalente al uso de un |select|, puesto que
   este elemento restringe los valores posibles a los incluidos en la lista,
   mientras que un |input| con lista de sugerencias sigue dando libertad
   para escribir otros. Ahora bien, haciendo uso de *Javascript* podemos lograr
   que los valores válidos se restrinjan exclusivamente a los sugeridos
   lo cual puede ser interesante si los valores posibles son muy numerosos y buscarlos
   en la lista puede causar gran engorro al usuario. Como ejemplo de ello, puede
   echarle un ojo a `este caso alojado en codepen
   <https://codepen.io/sio2/pen/rbEPgv>`_.

.. note:: Es posible incluir dentro del elemento |datalist| un elemento
   |select| dentro del cual se colocan las opciones. Es válido para la
   especificación y no tiene efecto alguno, pero si el navegador es algo antiguo
   y no soporta listas de sugerencias, las sugerencias  se verán como una lista
   desplegable; y con ayuda de código *Javascript* podremos hacer algún apaño
   para que el formularion funcione correctamente.

.. _html-dialog:
.. index:: dialog

Cuadro de diálogo
-----------------
|HTML|\ 5 provee un sencillo mecanismo para crear diálogos emergentes a través
del elemento ``<dialog>``:

.. table:: Etiqueta *datalist*
   :class: el-html

   +------------+----------------------------------------------------+
   | |dialog|   | Define un dialogo emergente                        |
   +------------+----------------------------------------------------+

**dialog** (:devmoz:`dialog`)
   Define un cuadro de diálogo emergente que se superpone al resto del contenido
   de la página a imitación de las `ventanas emergentes
   <https://es.wikipedia.org/wiki/Ventana_emergentehttps://es.wikipedia.org/wiki/Ventana_emergente>`_.

   .. table:: Atributos de *label*
      :class: attr-html

      +------------+----------+------------------------------------------------------+
      | open       | \-       | Abre la ventana al cargar la página                  |
      +------------+----------+------------------------------------------------------+


   El elemento sólo tiene un atributo propio *open*, que hace que el cuadro
   aparezca emergido al cargar la página. De lo contrario, se encontrará oculto
   y sólo mediante programación con *Javascript* se podrá mostrar::

      <dialog><p>Esto es una ventana emergente</p></dialog>

   En principio, el elemento no es exclusivo de formularios, pero da pie a que
   se incluya en ellos un formulario con algún campo que requiera respuesta. De
   hecho, para posibilitarlo se ha definido un nuevo valor *dialog* para el
   atributo *method*, de modo que cuando se envía el formulario no se abandona
   la página, sino que se oculta el cuadro y se recupera el valor a
   través de *Javacript*. Para que el elemento sea funcional, es necesario el
   uso de *Javascript*, por lo que no se profundizará más en él.

   Si tiene curiosidad, puede consultar `este ejemplo en codepen.io
   <https://codepen.io/sio2/pen/MRNjOg>`_.

.. index:: progress
.. _html-progress:

Progreso
--------
|HTML|\ 5 permite también la inclusión de una barra de progreso que, aunque no
es propiamente un campo de formulario, suele estar relacionada con alguna tarea
en la que está involucrado un formulario:

.. table:: Etiqueta *progress*
   :class: el-html

   +------------+----------------------------------------------------+
   | |progress| | Muestra una barra de progreso.                     |
   +------------+----------------------------------------------------+

**progress** (:devmoz:`progress`)
   Muestra la barra de progreso de una supuesta tarea. Ello, por supuesto,
   requiere que seamos capaces de especificar cuál es el grado de completitud
   de tal tarea, para lo cual podemos utiliar algunos atributos:

   .. table:: Atributos de *progress*
      :class: attr-html

      +------------+----------+------------------------------------------------------+
      | max        | num      | Número que representa la terminación de la tarea. Su |
      |            |          | valor predeterminado es 1.                           |
      +------------+----------+------------------------------------------------------+
      | value      | num      | Número que representa el grado de completitud. Debe  |
      |            |          | estar comprendido entre 0 y *max*.                   |
      +------------+----------+------------------------------------------------------+

   |progress| es un elemento en línea que, además, puede contener elementos en línea.
   Su contenido no se representa, pero puede ser útil si el navegador no tiene soporte
   para él::

      <label for="load">Carga del elemento:</label>
      <progress id="load" value=".75">75%</progress>
   
   que el navegador muestra:

   .. rst-class:: ej-html

   .. raw:: html

      <label for="load">Carga del elemento:</label>
      <progress id="load" value=".75">75%</progress>
   
.. note:: El elemento, obviamente, es estático, por lo que para presentar el
   carácter dinámico de una verdadera barra de progreso es necesario código
   *Javascript* que cambie el valor de *value* en sincronía con el progreso de
   la tarea.

Ejercicios propuestos
=====================

.. include:: /99.ejercicios/64.html-form.rst
   :start-line: 5

.. rubric:: Notas al pie

.. [#] Los habituales son Python_, PHP_, Java_ o el propio Javascript_.
.. [#] Especialmente cuando no se piensa enviar ninguna información al servidor
   y el dato de un campo de formulario, se procesa en el propio navegador para
   provocar algún cambio en el mismo.
.. [#] Entiéndase que, aunque este epígrafe esté dedicado exclusivamente a
   elementos relacionados con los formularios, un elemento |form| puede contener
   elementos que no son propios de formulario como un elemento |p| o un elemento
   |div|.
.. [#] En realidad, *pattern* no es un atributo común a todos los tipos de
   |input|, ya que hay algunos tipos que no permiten introducir datos y, en
   consecuencia, para los que no tiene sentido.
.. [#] Por su naturaleza, pues, este campo permie seleccionar un conjunto
   discreto de número y, en consecuencia, debería haberse incluido en el
   :ref:`epígrafe dedicado a la selección de datos <html-form-sel>`.
.. [#] Esto último posibilita efectos interesantes si se sabe algo de |CSS|. Por
   ejemplo, podríamos asociar una etiqueta a un :ref:`input| de tipo checkbox
   <html-input-checkbox>`, y con |CSS| volver invisible la casilla de verificación
   y hacer que la etiqueta simule una tecla sin pulsar cuando la casilla no está
   marcada y una tecla pulsada cuando la casilla si lo está.

.. |form| replace:: :ref:`<form> <html-form>`
.. |div| replace:: :ref:`<div> <html-div>`
.. |input| replace:: :ref:`<input> <html-input>`
.. |textarea| replace:: :ref:`<textarea> <html-textarea>`
.. |datalist| replace:: :ref:`<datalist> <html-datalist>`
.. |p| replace:: :ref:`<p> <html-p>`
.. |a| replace:: :ref:`<a> <html-a>`
.. |select| replace:: :ref:`<select> <html-select>`
.. |option| replace:: :ref:`<option> <html-option>`
.. |optgroup| replace:: :ref:`<optgroup> <html-optgroup>`
.. |button| replace:: :ref:`<button> <html-button>`
.. |fieldset| replace:: :ref:`<fieldset> <html-fieldset>`
.. |legend| replace:: :ref:`<legend> <html-legend>`
.. |label| replace:: :ref:`<label> <html-label>`
.. |dialog| replace:: :ref:`<dialog> <html-dialog>`
.. |progress| replace:: :ref:`<progress> <html-progress>`
.. |HTTP| replace:: :abbr:`HTTP (HyperText Transfer Protocol)`
.. |PHP| replace:: :abbr:`PHP (PHP Hypertext Preprocessor)`
.. |MIME| replace:: :abbr:`MIME (Multipurpose Internet Mail Extensions)`
.. |CSS| replace:: :abbr:`CSS (Cascading Style Sheets)`
.. |API| replace:: :abbr:`API (Application Programming Interface)`
.. _text: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/text
.. _search: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/search
.. _hidden: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/hidden
.. _password: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/password
.. _url: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/url
.. _email: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/email
.. _tel: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/tel
.. _number: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number
.. _range: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range
.. _date: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date
.. _month: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/month
.. _datetime-local: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/datetime-local
.. _time: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/time
.. _week: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/week
.. _color: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/color
.. _file: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file
.. _checkbox: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox
.. _radio: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio
.. _submit: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/submit
.. _image: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/image
.. _reset: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/reset
.. _button: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/button

.. _PHP: https://php.net
.. _Java: https://www.java.com
.. _Python: https://python.org