Aprendizaje activo: construir una estructura de formulario
Pongamos en práctica estas ideas y creemos un formulario un poco más complicado: un formulario de pago. Este formulario contendrá una serie de tipos de control que quizás aún no comprendas. No te preocupes por esto por ahora; en el artículo siguiente descubrirás cómo funcionan (Los controles básicos de formulario originales). Por ahora, lee con detenimiento las descripciones y sigue las instrucciones, y empieza a formarte una idea de qué elementos de delimitación se utilizan para estructurar el formulario y por qué.
- Para comenzar, haz una copia local de nuestro archivo de plantilla en blanco y el CSS de nuestro formulario de pago en un nuevo directorio de tu ordenador.
- Añade dentro del elemento HTML <head> la línea siguiente para aplicar el CSS al HTML:
.png "carbon(160).png")
- A continuación, añade el elemento externo <form> para crear tu formulario:
- Añade un encabezado y un párrafo dentro de las etiquetas <form> para informar a los usuarios cómo se marcan los campos obligatorios:
.png "carbon(161).png")
- A continuación añadimos al formulario una sección de código más grande, justo debajo de nuestra entrada anterior. Aquí verás que delimitamos con un elemento <section> independiente los campos con la información de contacto. Además, hay un conjunto de dos botones de opción, cada uno de los cuales colocamos dentro de su elemento de lista (<li>) propio. También hay dos entradas de texto estándar <input> y sus elementos <label> asociados, cada uno anidado dentro de un elemento <p> y una entrada de texto para introducir una contraseña. Añade este código a tu formulario:
.png "carbon(162).png")
- La segunda <section> de nuestro formulario es la información de pago. Hay tres controles diferentes, junto con sus etiquetas, cada uno contenido dentro de un elemento <p>. El primero es un menú desplegable (<select>) para seleccionar el tipo de tarjeta de crédito. El segundo es un elemento <input> de tipo tel, para introducir un número de tarjeta de crédito. Si bien podríamos haber usado el tipo number, no queremos una interfaz de usuario con control de número. El último es un elemento <input> de tipo date, para introducir la fecha de caducidad de la tarjeta; aparecerá como un control de selección de fecha en navegadores compatibles, y como una entrada de texto normal en navegadores no compatibles. Estos tipos de entrada más nuevos volverán a aparecer en el artículo Tipos de entrada HTML5. Introduce los datos siguientes a continuación de la sección anterior:
.png "carbon(163).png")
- La última sección que añadimos es mucho más simple y contiene solo un <button> de tipo submit, para enviar los datos del formulario. Añádelo al final de tu formulario:
.png "carbon(164).png")
Debajo puedes ver en acción el formulario terminado (también lo encontrarás en GitHub; consulta el código fuente de nuestro payment-form.html y ejecútalo en vivo):