Ejercicio 213

Crea una página web que tenga el mismo aspecto que la siguiente imagen:

El formulario debe contener los siguientes campos:

Nombre: control de tipo texto obligatorio y con autofoco.
Correo electrónico: un control de tipo email obligatorio.
URL: control de tipo URL que muestre la ayuda Web personal.
Fecha: control de tipo date.
Hora: control de tipo time.
Fecha y hora: control de tipo datetime.
Mes: control de tipo month.
Semana: control de tipo week.
Número: control de tipo number que limite la entrada a un valor entre -10 y 10.
Teléfono: control de tipo tel.
Término de búsqueda: control de tipo search.
Color favorito: control de tipo color.
Un botón de envío.

Además, tienes que tener en cuenta los siguientes requisitos:

El título de la página debe ser Formulario HTML5.
El método de envío del formulario debe ser GET.
El destino del envío del formulario debe ser html5.php.

Validación del documento HTML

Es posible que al validar el código HTML con el validador W3C, se muestren mensajes de advertencia similares a The date input type is not supported in all browsers. Please be sure to test, and consider using a polyfill.. Se trata de una advertencia y no de un error de validación.

Las funciones de HTML5, al no estar soportadas por todos los navegadores, debemos prestar especial atención en su uso, ya que esto puede provocar que un usuario o usuaria no pueda realizar determinadas tareas.

Solución

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Formulario HTML5</title>
  </head>
  <body>
    <form action="html5.php" method="GET">
      <div>
        <label for="nombre">Nombre</label>
        <input id="nombre" type="text" name="nombre" autofocus required />
      </div>
      <br />

      <div>
        <label for="email">Correo electrónico</label>
        <input id="email" type="email" name="email" required />
      </div>
      <br />

      <div>
        <label for="url">URL</label>
        <input id="url" name="url" type="url" placeholder="Web personal" />
      </div>
      <br />

      <div>
        <label for="fecha">Fecha</label>
        <input id="fecha" type="date" name="fecha" />
      </div>
      <br />

      <div>
        <label for="hora">Hora</label>
        <input id="hora" type="time" name="hora" />
      </div>
      <br />

      <div>
        <label for="fecha-hora">Fecha y hora</label>
        <input id="fecha-hora" type="datetime-local" name="fecha-hora" />
      </div>
      <br />

      <div>
        <label for="mes">Mes</label>
        <input id="mes" type="month" name="mes" />
      </div>
      <br />

      <div>
        <label for="semana">Semana</label>
        <input id="semana" type="week" name="semana" />
      </div>
      <br />

      <div>
        <label for="numero">Número (mínimo: -10, máximo: 10)</label>
        <input
          id="numero"
          type="number"
          name="numero"
          min="-10"
          max="10"
          value="0"
        />
      </div>
      <br />

      <div>
        <label for="telefono">Teléfono</label>
        <input id="telefono" type="tel" name="telefono" />
      </div>
      <br />

      <div>
        <label for="busqueda">Término de búsqueda</label>
        <input id="busqueda" type="search" name="busqueda" />
      </div>
      <br />

      <div>
        <label for="color">Color favorito</label>
        <input id="color" type="color" name="color" />
      </div>
      <br />

      <input type="submit" value="Enviar" />
    </form>
  </body>
</html>

Probar en el navegador

Documento HTML