Ejercicio formulario HTML5

He creado este ejercicio para practicar los elementos para formularios que nos ofrece HTML5. El ejercicio está preparado para una futura maquetación con CSS a 2 columnas. Cuando comience a impartir CSS, plantearé la maquetación de este formulario y la publicaré en otro post.

El ejercicio debería de quedar así:

ejercicio formulario HTML5

 

 

 

 

 

 

 

 

 

 

 

Y este sería el código fuente:

<!DOCTYPE html>
<html>
  <head>
    <title>Formulario de prueba de HTML5</title>
  </head>
  <body>


    <h1>Restaurante el centollo</h1>

    <h3>Haz tu reserva</h3>

    <form action="" method="get">
      <div>
        <label>Nombre: </label><input type="text" name="name" required />
      </div>

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

      <div>
        <label>Teléfono: </label><input type="tel" name="telefono" required />
      </div>

      <div>
        <label>Fecha de reserva</label><input type="date" name="fecha" required />
      </div>

      <div>
        <label>Franja Horaria</label>
        <select name="franja">
          <option>13:00 -- 14:00</option>
          <option>14:00 -- 15:00</option>
          <option>20:00 -- 21:00</option>
        </select>
      </div>

      <div>
        <label>Comensales (min 1, max 10): </label><input type="number" name="comensales" min="1" max="10" />
      </div>

      <div>
        <label>Color del mantel </label><input type="color" name="color_control" />
      </div>

      <div>
        <label>Demandas especiales </label><br/><textarea placeholder="alergias, tronas, ..."></textarea>
      </div>

      <div>
        <input type="submit" value="Enviar" />
      </div>

    </form>
  </body>
</html>

 

3 comentarios sobre “Ejercicio formulario HTML5

  1. Guillermo Contestar

    Hola Raúl,

    Enhorabuena por tu web y gracias por este ejercicio. Solo comentar un par de detalles. En HTML5 las etiquetas deben ir acompañadas del atributo ‘for’ para relacionar semánticamente la etiqueta con el elemento .

    Además esta relación se hace añadiendo el atributo ‘id’ al quedando el atributo ‘name’ para identificar el valor que se extrae del formulario con los métodos GET o POST.

    El resultado quedaría como sigue:

    Correo electrónico

    Por último añadir que en HTML5 ya no es valido cerrar elementos vacíos como los con ‘/>’ como ocurría en XHTML si no solo con ‘>’. Un ejemplo claro sería que pasa a ser .

    Un saludo.

    • raul Autor del artículoContestar

      Hola Guillermo,

      muchas gracias por las aportaciones, a ver si saco un rato y lo modifico, es un ejercicio que publiqué hace tiempo y la verdad que se puede mejorar mucho en la explicación de la solución.

      Un saludo.

Deja una respuesta

Tu dirección de correo electrónico no será publicada.