Formulario sencillo en HTML, CSS y JavaScript

por
Tiempo de lectura: 2 minutos

A continuación muestro un formulario que consta de campos para el nombre, correo electrónico y mensaje. Cuando el usuario envía el formulario, los valores se muestran usando alerts (puedes modificar la función enviarDatos para realizar alguna otra acción, como enviar los datos a un servidor).

A continuación muestro el código del ejemplo.

<!DOCTYPE html>
<html>
<head>
  <style>
    /* Estilos generales */
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 20px;
    }

    /* Estilos del formulario */
    .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">Nombre:</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">Mensaje:</label>
        <textarea id="message" required></textarea>
      </div>
      <button type="submit" class="submit-button">Enviar</button>
    </form>
  </div>

  <script>
    // Función para manejar el envío del formulario
    function enviarDatos(event) {
      event.preventDefault();

      // Obtener los valores de los campos del formulario
      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;

      // Manejo de los campos, en este caso mostramos el contenido con un alert
	  alert(nameInput.value);
      alert(emailInput.value);
      alert(messageInput.value);

      // Restablecer los campos del formulario
      nameInput.value = '';
      emailInput.value = '';
      messageInput.value = '';
    }

    // Obtener el elemento del formulario
    var form = document.getElementById('form');

    // Agregar el evento de envío al formulario
    form.addEventListener('submit', enviarDatos);
  </script>
</body>
</html>

Por último muestro el resultado.

Espero que les sirva de ayuda, feliz día!!

Post Views: 12

Deja un comentario