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. Los campos obligatorios están marcados con *