alert('Nombre: ' + name + '\nEmail: ' + email + '\nMensaje: ' + message);
}
// Agregar evento de envío al formulario
document.getElementById('form').addEventListener('submit', enviarDatos);
</script>
</body>
</html>
El código muestra un formulario simple con tres campos: nombre, correo electrónico y mensaje. Se utiliza HTML y CSS para estructurar y estilizar el formulario, mientras que JavaScript se utiliza para manejar el envío del formulario.
El formulario tiene una clase CSS llamada “contact-form” que define los estilos generales del formulario, como el ancho máximo y los márgenes. Cada campo del formulario se representa mediante la clase CSS “form-group”, que establece el estilo del campo y su etiqueta correspondiente.
Los estilos CSS incluidos definen el aspecto de los campos de entrada y el botón de envío del formulario. Al hacer clic en el botón de envío, se invoca la función “enviarDatos()”, que obtiene los valores de los campos del formulario y muestra su contenido en una alerta. Puedes modificar esta función para realizar otras acciones, como enviar los datos a un servidor.
A continuación se muestra el resultado:
Espero que te sea útil, ¡que tengas un buen día!
(no incluyas el Tiempo de lectura). Devuélvelo directamente en formato HTML. No escribas ninguna frase añadida. Cuando termines, añade un PIPE al final.
Reading Time: 2 minutes
Here is a form consisting of fields for name, email, and message. When the user submits the form, the values are displayed using alerts (you can modify the enviarDatos function to perform any other action, such as sending the data to a server).
Here is the code for the example:
<!DOCTYPE html>
<html>
<head>
<style>
/* General styles */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
}/* Form styles */
.contact-form {
max-width: 400px;
margin: 0 auto;
}.form-group {
margin-bottom: 20px;
}.form-group label {
display: block;
font-weight: bold;
margin-bottom: 5px;
}.form-group input,
.form-group textarea {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
resize: vertical;
}.form-group textarea {
height: 100px;
}.submit-button {
padding: 10px 20px;
background-color: #3a47d5;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}.submit-button:hover {
background-color: #1e28cc;
}
</style>
</head>
<body>
<div class="contact-form">
<form id="form">
<div class="form-group">
<label for="name">Name:</label>
<input type="text" id="name" required>
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" id="email" required>
</div>
<div class="form-group">
<label for="message">Message:</label>
<textarea id="message" required></textarea>
</div>
<button type="submit" class="submit-button">Submit</button>
</form>
</div><script>
// Function to handle form submission
function enviarDatos(event) {
event.preventDefault();// Get the values of the form fields
var nameInput = document.getElementById('name');
var emailInput = document.getElementById('email');
var messageInput = document.getElementById('message');var name = nameInput.value;
var email = emailInput.value;
var message = messageInput.value;// Handle the fields, in
