HTML

Formularios

Permiten crear un interfaz de usuario para que éste envíe información al servidor. Se crean con la etiqueta <form>, para agrupar campos se utiliza <fieldset> , <label> para describirlos, e <input>, <select> y <textarea> son los diferentes tipos de campos.

❓ Ejercicio: Completa el siguiente HTML utilizando las etiquetas <input> del tipo adecuado, <select> y <textarea> para que el formulario tenga los siguientes controles:

  1. Un grupo de campos conteniendo el nombre, teléfono y correo-e del cliente, solo el último obligatorio.
  2. Otro grupo de campos con las características del producto: modelo, tamaño, color, cantidad y extras, todos obligatorios menos el último.
  3. Otro grupo de campos con las preferencias de entrega: fechas e instrucciones, opcionales.
  4. Otro grupo de controles para enviar y limpiar el formulario.
<body>
<form action="URL absoluta o relativa" method="get o post">
 <h2>Formulario del pedido</h2>
 <fieldset>
  <legend>Datos personales</legend>
  <p>
   <label for="name_id">Nombre:</label><br>
   <!-- Campo de texto -->
  </p>
  <p>
   <label for="phone_id">Teléfono:</label><br>
   <!-- Campo de teléfono -->
  </p>
  <p>
   <label for="email_id">Email:</label><br>
   <!-- Campo de email obligatorio -->
  </p>
 </fieldset>
 <fieldset>
  <legend>Producto</legend>
  <p>
   <label for="model_id">Modelo:</label><br>
   <!-- Menú con 1 opción seleccionable de entre estas: Modelo 1, Modelo 2 y Modelo 3 --> 
  </p>
  <p>Tamaño:
   <ul>
    <li>
     <!-- Opción excluyente obligatoria -->
     <label for="size-1_id">S</label>
    </li>
    <li>
     <!-- Opción excluyente obligatoria -->
     <label for="size-2_id">M</label>
    </li>
    <li>
     <!-- Opción excluyente obligatoria -->
     <label for="size-3_id">L</label>
    </li>
   </ul>
  </p>
  <p>
   <label for="color_id">Color:</label><br>
   <!-- Campo de color obligatorio -->
  </p>
  <p>
   <label for="amount_id">Cantidad:</label><br>
   <!-- Campo numérico con valor mínimo 1 y máximo 5 obligatorio -->
  </p>
  <p>Extras:
   <ul>
    <li>
     <!-- Casilla de verificación -->
     <label for="extra-1_id">Extra 1</label>
    </li>
    <li>
     <!-- Casilla de verificación -->
     <label for="extra-2_id">Extra 2</label>
    </li>
    <li>
     <!-- Casilla de verificación -->
     <label for="extra-3_id">Extra 3</label>
    </li>
   </ul>
  </p>
 </fieldset>
 <fieldset>
  <legend>Entrega</legend>
  <p>
   <label for="fecha_id">Fecha:</label><br>
   <!-- Campo de fecha con valor minimo la fecha de hoy -->
  </p>
  <p>
   <label for="instructions_id">Instrucciones:</label><br>
   <!-- Área de texto -->
  </p>
 </fieldset>
 <fieldset>
  <!-- Botón para enviar -->
  <!-- Botón para resetear el formulario -->
 </fieldset>
</form>
</body>