Volver a clases
Fundamentos de Programación●●Intermedio
Formularios y Tablas Accesibles
120 min
7 vistas
Creación de formularios con validación nativa, tablas accesibles y uso de multimedia embebida.
Formularios HTML
html1<form action="/submit" method="POST"> 2 <label for="nombre">Nombre</label> 3 <input id="nombre" name="nombre" required /> 4 5 <label for="email">Email</label> 6 <input id="email" type="email" name="email" required /> 7 8 <label> 9 <input type="checkbox" name="newsletter" /> 10 Quiero recibir novedades 11 </label> 12 13 <button type="submit">Enviar</button> 14</form>
- Define
actionymethodsegún el backend; usa tipos de input correctos (email,password,date,number) para obtener validación nativa y teclados adecuados en móvil. - Relaciona cada
<label>con su control mediantefor/idpara accesibilidad. Usarequired,minlength,maxlength,patternpara validar desde el navegador.
Validación y agrupación
html1<fieldset> 2 <legend>Género</legend> 3 <label><input type="radio" name="genero" value="m" /> Masculino</label> 4 <label><input type="radio" name="genero" value="f" /> Femenino</label> 5</fieldset>
fieldsetylegenddan contexto a grupos de controles (encuestas, direcciones). Evita anidarlabelsin sufor; agrupa radios porname.
Tablas Accesibles
html1<table> 2 <caption>Horario de Clases</caption> 3 <thead> 4 <tr> 5 <th scope="col">Hora</th> 6 <th scope="col">Lunes</th> 7 <th scope="col">Miércoles</th> 8 </tr> 9 </thead> 10 <tbody> 11 <tr> 12 <td>9:00 - 11:00</td> 13 <td>HTML</td> 14 <td>CSS</td> 15 </tr> 16 </tbody> 17</table>
- Usa
captionpara describir la tabla;scope="col"/"row"ayuda a lectores de pantalla.<thead>,<tbody>,<tfoot>separan encabezados y totales;colspan/rowspanpermiten celdas combinadas.
Multimedia embebida
html1<video controls width="600"> 2 <source src="intro.mp4" type="video/mp4" /> 3 Tu navegador no soporta video. 4</video>
- Añade siempre texto alternativo dentro de
<video>/<audio>para compatibilidad. Usacontrolspara mostrar controles nativos y define tamaños responsables. Para YouTube, inserta con<iframe>y definetitle.
Ejemplos de Código
3 ejemplos
Formulario básico
html
1<form>
2 <label for="servicio">Servicio</label>
3 <input id="servicio" name="servicio" required placeholder="Diseño web" />
4
5 <label for="fecha">Fecha estimada</label>
6 <input id="fecha" type="date" name="fecha" required />
7
8 <label>
9 <input type="checkbox" name="urgente" /> Necesito entrega urgente
10 </label>
11
12 <button type="submit">Solicitar cotización</button>
13</form>Tabla accesible
html
1<table>
2 <caption>Servicios y precios</caption>
3 <thead>
4 <tr>
5 <th scope="col">Servicio</th>
6 <th scope="col">Entrega</th>
7 <th scope="col">Precio</th>
8 </tr>
9 </thead>
10 <tbody>
11 <tr>
12 <td>Landing page</td>
13 <td>10 días</td>
14 <td>$500</td>
15 </tr>
16 </tbody>
17 <tfoot>
18 <tr>
19 <td colspan="3">Precios referenciales</td>
20 </tr>
21 </tfoot>
22</table>Audio embebido
html
1<audio controls>
2 <source src="audio.mp3" type="audio/mpeg" />
3 Tu navegador no soporta audio.
4</audio>Recursos
5 recursos disponibles
¡Hora de Practicar!
PrácticaPrincipiante15 min
Práctica Guiada
Vamos a practicar
- Crear un formulario de contacto con campos nombre, email, mensaje, checkbox de políticas y validación mínima (required, minlength).
- Construir una tabla de precios con encabezados, fila de totales con
colspany uncaptionclaro. - Insertar un video corto o un embed de YouTube y añadir texto alternativo.
Desafío de Código
EjercicioIntermedio15 min
Ejercicios Prácticos
Practiquemos
- Crea un formulario con nombre, email, mensaje y un checkbox de aceptación de políticas.
- Añade validación de longitud mínima al mensaje y placeholder amigable.
- Construye una tabla con encabezados y una fila de totales usando
colspan. - Inserta un video o audio y agrega texto alternativo.
Documentación Oficial
DocumentaciónIntermedio15 min
Formularios en HTML
Guía completa sobre formularios y validación.