FORMULARIOS.

ETIQIETAS GENERALES

Utilizando codigo css para dar diseño al formulario.

/* Estilos para el cuerpo de la página */

body {

font-family: Arial, sans-serif;

background-color: #f0f0f0;

margin: 0;

padding: 20px;

}

/* Estilos para el formulario */

form {

background-color: #fff;

padding: 20px;

border-radius: 10px;

box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);

max-width: 600px;

margin: 0 auto;

}

/* Estilos para las etiquetas del formulario */

label {

display: block;

margin-bottom: 5px;

font-weight: bold;

}

/* Estilos para los campos de entrada del formulario */

input[type="text"],

input[type="tel"],

textarea {

width: calc(100% - 20px);

padding: 10px;

margin-bottom: 15px;

border: 1px solid #ccc;

border-radius: 5px;

}

/* Estilos para el botón del formulario */

button[type="submit"] {

background-color: #007bff;

color: #fff;

border: none;

padding: 10px 20px;

border-radius: 5px;

cursor: pointer;

}

/* Estilos adicionales para el botón cuando se pasa el cursor sobre él */

button[type="submit"]:hover {

background-color: #0056b3;

}

Resumen

Usamos <table> para definir una tabla
Usamos <tr> para definir una fila en una tabla
Usamos <td> para definir una celda de la tabla
Usamos <th> para los encabezados de la tabla
Usamos <caption> para ponerle un título
Con la propiedad de CSS border podemos ponerle un borde
Con la propiedad de CSS border-collapse podemos juntar los bordes
Con el padding de CSS podemos darle relleno a las celdas
Con el text-align de CSS podemos alinear el texto de las celdas
Con el border-spacing podemos setear espacio entre celdas
El atributo colspan hace que una celda ocupe varias columnas
El atributo rowspan hace que una celda ocupe varias filas
<form>: Define un formulario en HTML para recopilar datos del usuario.
<input>: Define un campo de entrada en un formulario. Se utiliza para diferentes tipos de entrada, como texto, número, teléfono, etc.
<textarea>: Define un área de texto de múltiples líneas en un formulario para que el usuario pueda ingresar texto extenso.
<button>: Define un botón en un formulario que puede ser presionado por el usuario para enviar los datos del formulario.
<label>: Define una etiqueta para un elemento de formulario. Generalmente se utiliza para asociar una etiqueta con un campo de entrada para una mejor accesibilidad.
<select>: Define una lista desplegable en un formulario donde el usuario puede seleccionar una opción.
<option>: Define una opción dentro de un elemento <select>. Cada opción representa un elemento en la lista desplegable.
<optgroup>: Agrupa opciones relacionadas dentro de un elemento <select>.

CODIGO DEL FORMULARIO.

<html >

<head>

<title>Formulario de Datos</title>

<style>

body {

font-family: Arial, sans-serif;

margin: 0;

padding: 20px;

}

label {

display: block;

margin-bottom: 5px;

}

input[type="text"], textarea {

width: 100%;

padding: 8px;

margin-bottom: 10px;

border: 1px solid #ccc;

border-radius: 4px;

box-sizing: border-box;

}

button {

padding: 10px 20px;

background-color: #4CAF50;

color: white;

border: none;

border-radius: 4px;

cursor: pointer;

}

button:hover {

background-color: #45a049;

}

</style>

</head>

<body>

<h2>Formulario de Datos</h2>

<label for="nombre">Nombre:</label>

<label for="apellido">Apellido:</label>

<label for="ciudad">Ciudad:</label>

<label for="color">Color Favorito:</label>

<label for="animal">Animal Favorito:</label>

<label for="musica">Música Favorita:</label>

<label for="sugerencias">Sugerencias y Recomendaciones:</label>

<button type="submit">Enviar</button>

</form>

document.getElementById("formulario").addEventListener("submit", function(event){

event.preventDefault(); // Evita que se envíe el formulario automáticamente

// Aquí puedes agregar el código para enviar los datos a través de AJAX o lo que desees hacer con ellos

// Por ejemplo, puedes obtener los valores de los campos así:

var nombre = document.getElementById("nombre").value;

var apellido = document.getElementById("apellido").value;

var ciudad = document.getElementById("ciudad").value;

var pais = document.getElementById("pais").value;

var color = document.getElementById("color").value;

var animal = document.getElementById("animal").value;

var musica = document.getElementById("musica").value;

var sugerencias = document.getElementById("sugerencias").value;

// Luego puedes procesar estos valores como desees

console.log("Nombre:", nombre);

console.log("Apellido:", apellido);

console.log("Ciudad:", ciudad);

console.log("País:", pais);

console.log("Color Favorito:", color);

console.log("Animal Favorito:", animal);

console.log("Música Favorita:", musica);

console.log("Sugerencias y Recomendaciones:", sugerencias);

// Aquí podrías enviar los datos a un servidor, por ejemplo con AJAX

// Ejemplo de envío AJAX:

/*

fetch('url_del_servidor', {

method: 'POST',

body: JSON.stringify({

nombre: nombre,

apellido: apellido,

ciudad: ciudad,

pais: pais,

color: color,

animal: animal,

musica: musica,

sugerencias: sugerencias

}),

headers: {

'Content-Type': 'application/json'

}

})

.then(response => response.json())

.then(data => {

console.log('Respuesta del servidor:', data);

// Puedes mostrar un mensaje de éxito o redireccionar al usuario, etc.

})

.catch(error => {

console.error('Error al enviar los datos:', error);

// Puedes mostrar un mensaje de error al usuario

});

*/

});

</script>

</body>

</html>

Actividad para realizar en clase.

1) Replica la tabla que aparece en al parte inferior de la pagina web utilizando el codigo de programacion html; para ello puede ayudarse del codigo visto anteriormente en la parte superior de la pagina web.

Rubrica de evaluación.

a) codigo en html (70 puntos)

b) codigo html+csc(100 puntos)

c) no entrega actividad (10 puntos).