11. Formularios

Versión para imprimir.

A. Formulario simple

Salida

Ábrelo en otra pestaña.

Revísalo en gilpgedit.

<!DOCTYPE html>
<html lang="es">

<head>
 <meta charset="UTF-8">
 <meta name="viewport"
   content="width=device-width">
 <title>Saludo</title>
</head>

<body>
 <!--
  form
   Captura los datos para un
   cálculo.
  action="javascript:calcula()"
   Al activar la forma, se ejecuta
   la función
    calcula()
   de la etiqueta
    <script>
   que aparece más abajo. -->
 <form
   action="javascript:calcula()">
  <h1>Saludo</h1>
  <!--
   Los elementos de captura se
   pueden colocan cada uno en un
    <p> -->
  <p>
   <!--
    label
     Pone el rótulo
      Nombre
     que aparece más abajo, al
     elemento
      input
     que también aparece más abajo.
   -->
   <label>
    Nombre
    <!--
     input
      Campo de captura. Activa la
      forma al teclear
       «intro»
      cuando tiene el cursor.
     type="text"
      Captura texto
     id="inNombre"
      Identificador del campo de
      captura. Se puede usar desde
      el elemento
       <script>
      más abajo.
     required
      Este campo no se puede quedar
      en blanco. -->
    <input type="text"
      id="inNombre" required>
   </label>
  </p>
  <p>
   <!--
    button
     Activa la forma al hacerle
     click o presionado la tecla
     espacio cuando tiene el
     tabulador. -->
   <button>Calcular</button>
  </p>
 </form>
 <script>
  /**
   * Función que realiza el cálculo
   * cuando se activa la forma.
   */
  function calcula() {
   /* Recupera el texto capturado
    * en "inNombre" y lo asigna
    * a la constante "nombre". */
   const nombre = inNombre.value
   const saludo = saluda(nombre)
   /* Despliega el saludo en un
    * cuadro de diálogo. */
   alert(saludo);
  }

  /**
   * Función que realiza la lógica
   * del cálculo.
   * @param {string} nombre
   */
  function saluda(nombre) {
   return `Hola ${nombre}.`
  }
 </script>
</body>

</html>

B. El elemento form

Solo para los más rudos

C. Atributos comunes

D. El elemento label

Solo para los más rudos

E. El elemento button

Solo para los más rudos

F. El elemento input

Otros atributos

valueAsNumber

  • Propiedad de JavaScript para asignar o recuperar el valor numérico de captura.

  • Para controles numéricos del elemento input.

  • Devuelve un número.

  • Si el texto es una cadena vacía o no representa un número, el valor devuelto es NaN (o sea que no es un número).

pattern

  • Para los tipos que manejan texto.

  • Expresión regular para validar el contenido. Abarca desde el inicio hasta el final del texto.

min

  • Para controles numéricos y de fecha.

  • Valor mínimo que se puede capturar.

max

  • Para controles numéricos y de fecha.

  • Valor máximo que se puede capturar.

step

  • Para controles numéricos y de fecha.

  • Granularidad o separación entre los valores que se pueden capturar. Por ejemplo, step=0.1 indica que los valores pueden ser 0, 0.1, 0.2, 0.3, etcétera. Aplica también para fechas.

  • El valor por omisión para controles numéricos es 1.

Solo para los más rudos

G. El elemento output

Solo para los más rudos

H. División

Salida

Ábrelo en otra pestaña.

Revísalo en gilpgedit.

<!DOCTYPE html>
<html lang="es">

<head>
 <meta charset="UTF-8">
 <meta name="viewport"
   content="width=device-width">
 <title>División</title>
</head>

<body>
 <form
   action="javascript:procesa()">
  <h1>División</h1>
  <p>
   <label>
    a
    <input id="inA"
      type="number"
      step="0.1"
      required>
   </label>
  </p>
  <p>
   <label>
    b
    <input id="inB"
      type="number"
      step="0.1"
      required
      oninput="validaB()">
   </label>
  </p>
  <p>
   <button>Dividir</button>
  </p>
 </form>
 <script>
  const NO_0 = "No puede ser 0"

  function validaB() {
   const b = inB.valueAsNumber
   /* Debe cumplirse que b
    * sea un número diferente
    * de 0. */
   if (isNaN(b) || b !== 0) {
    inB.setCustomValidity("")
   } else {
    inB.setCustomValidity(NO_0)
   }
  }

  function procesa() {
   const a = inA.valueAsNumber
   const b = inB.valueAsNumber
   const resultado = divide(a, b)
   alert(
    `${a} / ${b} = ${resultado}`)
  }

  /**
   * @param {number} a
   * @param {number} b
   */
  function divide(a, b) {
   return a / b
  }
 </script>
</body>

</html>

I. Formulario numérico de 2 botones

Salida

Ábrelo en otra pestaña.

Revísalo en gilpgedit.

<!DOCTYPE html>
<html lang="es">

<head>
 <meta charset="UTF-8">
 <meta name="viewport"
   content="width=device-width">
 <title>
  Formulario con 2 botones
 </title>
</head>

<body>
 <form
   action=javascript:procSuma()>
  <h1>
   Formulario con 2 botones
  </h1>
  <p>
   <label>
    a
    <input id=inA type=number
      required min="0.1" max="100"
      step="0.1">
   </label>
  </p>
  <p>
   <label>
    b
    <input id=inB type=number
      required min="0.1" max="100"
      step="0.1">
   </label>
  </p>
  <p>
   <button>Sumar</button>
   <button formaction="javascript:
     procResta()">
    Restar
   </button>
  </p>
 </form>
 <script>
  function procSuma() {
   const a = inA.valueAsNumber
   const b = inB.valueAsNumber
   const resultado = suma(a, b)
   alert(
    `${a} + ${b} = ${resultado}`)
  }

  function procResta() {
   const a = inA.valueAsNumber
   const b = inB.valueAsNumber
   const resultado = resta(a, b)
   alert(
    `${a} - ${b} = ${resultado}`)
  }

  function suma(a, b) {
   return a + b
  }

  function resta(a, b) {
   return a - b
  }
 </script>
</body>

</html>

J. Recomendaciones

Salida

Ábrelo en otra pestaña.

Revísalo en gilpgedit.

<!DOCTYPE html>
<html lang="es">

<head>
 <meta charset="UTF-8">
 <meta name="viewport"
   content="width=device-width">
 <title>Recomendaciones</title>
</head>

<body>
 <form
   action="javascript:procesa()">
  <h1>Recomendaciones</h1>
  <p>
   <label>
    Género
    <select id="inGenero" required>
     <option value="">
      -- Selecciona --
     </option>
     <option value="pop">
      Pop
     </option>
     <option value="reg">
      Reguetón
     </option>
    </select>
   </label>
  </p>
  <p>
   <button>Recomendar</button>
  </p>
 </form>
 <script>
  function procesa() {
   const genero = inGenero.value
   const resultado =
    recomienda(genero)
   alert(resultado)
  }

  /** @param {string} genero */
  function recomienda(genero) {
   if (genero === "pop") {
    return "Para el pop te " +
     "recomiendo a Dua Lipa."
   } else if (genero === "reg") {
    return "Para el reguetón te " +
     "recomiendo a Bad Bunny."
   }
  }
 </script>
</body>

</html>

Solo para los más rudos

K. Adivina

Salida

Ábrelo en otra pestaña.

Revísalo en gilpgedit.

<!DOCTYPE html>
<html lang="es">

<head>
 <meta charset="UTF-8">
 <meta name="viewport"
   content="width=device-width">
 <title>Adivina</title>
 <style>
  html {
   font-family: sans-serif;
   text-align: center;
  }

  img {
   max-height: 40vh;
   max-width: 100%;
  }
 </style>
</head>

<body>
 <h1>Adivina</h1>
 <figure>
  <img src="https://media.giphy.com/media/JKNn9A98JBVlu/giphy.gif"
    alt="Imagen de un animal">
  <figcaption>
   ¿Qúe animal es este?
  </figcaption>
 </figure>
 <p>
  <button onclick="rana()">
   Una Rana
  </button>
  <button onclick="oso()">
   Un Oso
  </button>
 </p>
 <script>
  function rana() {
   alert(
    "Claro que no es una rana.")
  }

  function oso() {
   alert("Claro que si es un oso.")
  }
 </script>
</body>

</html>

L. Encuesta

Salida

Ábrelo en otra pestaña.

Revísalo en gilpgedit.

<!DOCTYPE html>
<html lang="es">

<head>
 <meta charset="UTF-8">
 <meta name="viewport"
   content="width=device-width">
 <title>¿Cuál te gusta más?</title>
 <style>
  html {
   font-family: sans-serif;
  }

  body {
   display: grid;
   gap: 0.5rem;
   margin: 0;
   padding: 0.5rem;
   max-height: 100vh;
   overflow: hidden;
   grid-template-columns:
    1fr 1fr 1fr 1fr;
    grid-template-areas:
    "h1 h1 h1 h1"
    "outGatito btnGatito outPerrito btnPerrito"
    "imgGatito imgGatito imgPerrito imgPerrito";
  }

  h1 {
   grid-area: h1;
   text-align: center;
  }

  #outGatito {
   grid-area: outGatito;
   justify-self: center;
  }

  #btnGatito {
   grid-area: btnGatito;
  }

  #imgGatito {
   grid-area: imgGatito;
   width: 100%;
  }

  #outPerrito {
   grid-area: outPerrito;
   justify-self: center;
  }

  #btnPerrito {
   grid-area: btnPerrito;
  }

  #imgPerrito {
   grid-area: imgPerrito;
   width: 100%;
  }
 </style>
</head>

<body>
 <h1>¿Cuál te gusta más?</h1>
 <output id="outGatito">
  0 votos
 </output>
 <button id="btnGatito"
   onclick="gatito()">
  Vota
 </button>
 <img id="imgGatito" alt="Gatito"
   src="https://media.giphy.com/media/uWYjSbkIE2XIMIc7gh/giphy.gif">
 <output id=outPerrito>
  0 votos
 </output>
 <button id="btnPerrito"
   onclick=perrito()>
  Vota
 </button>
 <img id="imgPerrito"
   alt="Perrito"
   src="https://media.giphy.com/media/rXzOY4RpSA0Ug/giphy.gif">
 <script>
  let votosGatito = 0
  let votosPerrito = 0

  function gatito() {
   votosGatito++
   outGatito.value =
    `${votosGatito} votos`
  }

  function perrito() {
   votosPerrito++
   outPerrito.value =
    `${votosPerrito} votos`
  }
 </script>
</body>

</html>

M. Recomienda

Salida

Ábrelo en otra pestaña.

<!DOCTYPE html>
<html lang="es">

<head>
 <meta charset="utf-8">
 <meta name="viewport"
   content="width=device-width">
 <title>Recomienda</title>
 <style>
  html {
   font-family: sans-serif;
  }

  body {
   display: grid;
   gap: 0.5rem;
   margin: 0;
   padding: 0.5rem;
   max-height: 100vh;
   grid-template-columns:
    8rem 2fr;
   grid-template-areas:
    "h1 h1"
    "ul section";
  }

  h1 {
   grid-area: h1;
   text-align: center;
  }

  ul {
   grid-area: ul;
  }

  section {
   grid-area: section;
  }

  figure {
   display: none;
   flex: 1;
   margin: 0;
   width: 100%;
  }

  figure:target {
   display: block;
  }

  img {
   flex: 1;
   width: 100%;
  }
 </style>
</head>

<body>
 <h1>Recomienda</h1>
 <ul>
  <li>
   <p>
    <a href="#pop">Pop</a>
   </p>
  </li>
  <li>
   <p>
    <a href="#reg">Reguetón</a>
   </p>
  </li>
 </ul>
 <section>
  <figure id="pop">
   <figcaption>
    Para el pop te recomiendo a
    Dua Lipa.
   </figcaption>
   <img alt="Gif de Dua Lipa"
     src="https://media.giphy.com/media/3o7WIQin38ZjlwiKOs/giphy.gif">
  </figure>
  <figure id="reg">
   <figcaption>
    Para el reguetón te recomiendo
    a Bad Bunny.
   </figcaption>
   <img alt="Gif de Bad Bunny"
     src="https://media.giphy.com/media/kfcsiSjQUyMvEZ1khq/giphy.gif">
  </figure>
 </section>
</body>

</html>

N. Resumen