UP | HOME

Diseño de Interfaces Web

Práctica 2.4 - Diseño de formularios

Índice

1 Introducción

El objetivo de esta práctica es aprender a diseñar un formulario con una apariencia visual determinada utilizando las técnicas más adecuadas.

2 Tiempo asignado

3 horas de clase.

3 Desarrollo de la práctica

Diseña un formulario como el que se adjunta a continuación:

Resultado final del formulario

Figura 1: Resultado final del formulario

Las opciones de la caja de selección serán:

  • Mezcla de la casa
  • Mezcla Caribeña
  • Orgánico Colombia
  • Orgánico Perú

3.1 Requisitos

  • Utilizar etiquetas label.
  • Utilizar etiquetas fieldset.
  • Utilizar atributo placeholder.
  • No utilizar tablas.

3.2 Recomendaciones

  • Puedes crear las etiquetas que sean necesarias para realizar el layout.
  • Para alinear los controles y las etiquetas puedes utilizar cualquier método que consideres oportuno (display: table, float, flexbox,…) aunque se recomienda utilizar display: inline-block.
  • Se debe respetar al máximo la estructura semántica del HTML: por ejemplo, no tiene sentido que las etiquetas y los controles asociados a las mismas estén en bloques separados.

4 Resultado a entregar

  • Se deben entregar los ficheros HTML y CSS comprimidos en un sólo archivo.
  • El archivo estará en formato ZIP.
  • El nombre del archivo será de la forma apellido1-apellido2-nombre-practica2-4.zip- (por ejemplo, prieto-alarcon-pedro-practica2-4.zip-).

Licencia de Creative Commons
Diseño de Interfaces Web by Pedro Prieto is licensed under a Creative Commons Reconocimiento-CompartirIgual 4.0 Internacional License.