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í:
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>
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.
Por cierto, me ha hecho gracia ver que ambos hemos utilizado el mismo tema para nuestra web personal 😀
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.