Prompt Title: CSS Alert Submit Box

To create a CSS alert submit box, you can follow these steps:

1. Create an HTML form with the necessary input fields and a submit button.

htmlCopy code
<form>
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" required>
  <br>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>
  <br>
  <button type="submit">Submit</button>
</form>

2. Style the form with CSS, including the submit button.

cssCopy code
form {
  background-color: #f2f2f2;
  padding: 20px;
  border-radius: 5px;
}

input[type="text"], input[type="email"] {
  padding: 10px;
  margin: 10px 0;
  border: none;
  border-radius: 5px;
}

button[type="submit"] {
  background-color: #4CAF50;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

button[type="submit"]:hover {
  background-color: #3e8e41;
}

3. Add a CSS class to the submit button that will be used for the alert.

cssCopy code
.alert {
  background-color: #f44336;
  color: white;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 5px;
  display: none;
}

4. Add JavaScript code to display the alert when the form is submitted.

htmlCopy code
<form onsubmit="displayAlert(event)">
  ...
  <button type="submit">Submit</button>
</form>

<div id="alert" class="alert">Form submitted successfully!</div>

<script>
  function displayAlert(event) {
    event.preventDefault();
    const alert = document.getElementById("alert");
    alert.style.display = "block";
  }
</script>

The above JavaScript code will prevent the form from submitting its data to the server and will instead display the alert message. The CSS class .alert is used to style the alert message.