Etiquetas HTML para Organizar
Contenido y Recopilar Entradas
del Usuario
<table>:
La etiqueta <table> se utiliza para crear tablas en una página web. Dentro de esta etiqueta, se
definen las filas con la etiqueta <tr>, y dentro de cada fila se colocan las celdas de encabezado
con <th> o las celdas de datos con <td>.
Atributos destacados:
border: Define el ancho del borde de la tabla.
width: Especifica el ancho de la tabla en píxeles o porcentaje.
cellspacing: Define el espacio entre las celdas de la tabla.
cellpadding: Define el espacio entre el contenido de las celdas y el borde de las celdas.
<tr>:
La etiqueta <tr> define una fila dentro de una tabla (<table>). Cada fila puede contener una
serie de celdas, que se especifican mediante las etiquetas <th> para celdas de encabezado o
<td> para celdas de datos.
<th>:
La etiqueta <th> se utiliza para definir celdas de encabezado dentro de una tabla (<table>). El
contenido de estas celdas suele ser texto que indica el significado o la categoría de la
información en las columnas correspondientes.
Atributos destacados:
colspan: Especifica el número de columnas que una celda de encabezado (<th>) debe
ocupar.
rowspan: Especifica el número de filas que una celda de encabezado (<th>) debe
ocupar.
<td>:
La etiqueta <td> define una celda de datos dentro de una tabla (<table>). Estas celdas
contienen la información real que se muestra en la tabla.
Atributos destacados:
colspan: Especifica el número de columnas que una celda de datos (<td>) debe ocupar.
rowspan: Especifica el número de filas que una celda de datos (<td>) debe ocupar.
<form>:
La etiqueta <form> se utiliza para crear un formulario en una página web. Los formularios son
utilizados para recopilar datos del usuario, como nombres, direcciones de correo electrónico,
contraseñas, etc.
Atributos destacados:
action: Especifica la URL a la que se enviarán los datos del formulario.
method: Define el método HTTP utilizado para enviar los datos del formulario,
generalmente "get" o "post".
<input>:
La etiqueta <input> se utiliza dentro de un formulario (<form>) para crear campos de entrada
donde los usuarios pueden escribir información. Puede utilizarse para diferentes propósitos,
como campos de texto, casillas de verificación, botones de radio, etc.
Atributos destacados:
type: Especifica el tipo de campo de entrada, como texto (text), correo electrónico
(email), contraseña (password), etc.
name: Define el nombre del campo de entrada que se enviará al servidor cuando se
envíe el formulario.
<textarea>:
La etiqueta <textarea> permite a los usuarios escribir texto en un área de texto más grande
dentro de un formulario. Es útil cuando se necesita que los usuarios ingresen grandes
cantidades de texto, como en comentarios o descripciones.
Atributos destacados:
rows: Define el número de filas visible del área de texto.
cols: Define el número de columnas visible del área de texto.
placeholder: Especifica un texto de marcador de posición que se muestra en el área de
texto cuando está vacía.
<button>:
La etiqueta <button> se utiliza para crear botones interactivos dentro de un formulario
(<form>). Estos botones pueden ser de diferentes tipos, como botones de envío (para enviar
un formulario), botones de reinicio (para borrar los datos del formulario) o botones de acción
personalizada.
<form>:
Uso: Define un formulario para recopilar datos del usuario.
Atributos destacados:
action: Especifica la URL a la que se enviarán los datos del formulario.
method: Define el método HTTP utilizado para enviar los datos del formulario, generalmente
"get" o "post".
<input>:
Uso: Define un campo de entrada dentro de un formulario (<form>).
Atributos destacados:
type: Especifica el tipo de campo de entrada, como texto (text), correo electrónico
(email), contraseña (password), etc.
name: Define el nombre del campo de entrada que se enviará al servidor cuando se
envíe el formulario.
<textarea>:
Uso: Define un área de texto multilinea dentro de un formulario (<form>).
Atributos destacados:
type: Especifica el tipo de botón, como submit, reset o button.
name: Define el nombre del botón que se enviará al servidor cuando se envíe el
formulario.
value: Define el valor del botón que se enviará al servidor cuando se envíe el
formulario, útil si el botón es parte de un conjunto de opciones.
EJEMPLO
Consigna: Creación de Formulario de Registro de Usuario
Descripción: Diseña un formulario de registro de usuario utilizando HTML que solicite la
información básica de un usuario, como nombre, apellido, correo electrónico, contraseña y
teléfono. Además, incluye un área de texto para comentarios adicionales y dos botones, uno
para enviar el formulario y otro para limpiar los campos.
Requisitos:
1. Utiliza las etiquetas HTML adecuadas para estructurar el formulario y sus elementos.
2. Asegúrate de incluir campos obligatorios y opcionales según corresponda.
3. Los campos de nombre, apellido, correo electrónico y contraseña deben ser
obligatorios.
4. Utiliza etiquetas de encabezado (<h1>, <h2>, etc.) para proporcionar títulos
descriptivos en tu formulario.
5. Organiza los campos dentro de una tabla (<table>) para una presentación más
ordenada.
6. Asegúrate de que los campos de entrada (<input>) tengan los atributos adecuados,
como type, name y required según corresponda.
7. El botón de enviar debe enviar el formulario al servidor y el botón de limpiar debe
restablecer los campos del formulario.
8. Utiliza el atributo placeholder en el área de texto para proporcionar una sugerencia de
entrada.
9.
SOLUCIÓN
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Registro de Usuario</title>
</head>
<body>
<h1>Registro de Usuario</h1>
<form action="/registrar_usuario" method="post">
<table>
<tr>
<th><label for="nombre">Nombre:</label></th>
<td><input type="text" id="nombre" name="nombre"
required></td>
</tr>
<tr>
<th><label for="apellido">Apellido:</label></th>
<td><input type="text" id="apellido" name="apellido"
required></td>
</tr>
<tr>
<th><label for="correo">Correo Electrónico:</label></th>
<td><input type="email" id="correo" name="correo"
required></td>
</tr>
<tr>
<th><label for="contrasena">Contraseña:</label></th>
<td><input type="password" id="contrasena"
name="contrasena" required></td>
</tr>
<tr>
<th><label for="telefono">Teléfono:</label></th>
<td><input type="tel" id="telefono" name="telefono"></td>
</tr>
</table>
<textarea id="comentarios" name="comentarios"
placeholder="Déjanos tus comentarios"></textarea>
<button type="submit">Registrarse</button>
<button type="reset">Limpiar</button>
</form>
</body>
</html>
