Prompt Title: CSS Alert Submit Box

Created 11 months ago
Votes 0
Views 157 times
0
Human: css alert submit box
ChatGPT:

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.
html
<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>
  1. Style the form with CSS, including the submit button.
css
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; }
  1. Add a CSS class to the submit button that will be used for the alert.
css
.alert { background-color: #f44336; color: white; padding: 10px; margin-bottom: 10px; border-radius: 5px; display: none; }
  1. Add JavaScript code to display the alert when the form is submitted.
html
<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.

avatar
Fiber
Shared 46 prompts
Created 11 months ago

Leave a Comment

Related Tag Prompts

94
0
392
11
0
0
Python classes explained.
1 year ago 2023-03-12 18:13:53 Blank
0
0
code
1 year ago 2023-03-13 21:09:33 TipTip
0
0
comp
1 year ago 2023-03-14 06:56:25 arshiya
0
0
Learning AI as Engineer
1 year ago 2023-03-15 03:44:13 John D
0
0
Python
1 year ago 2023-03-21 21:04:23 Hashaam
0
0
Coding Coach
1 year ago 2023-03-22 07:00:26 Atank
0
0
Generate dummy image
1 year ago 2023-03-23 05:02:01 Prince Kumar
0
0
0
0
Expert Command Block
1 year ago 2023-03-23 05:02:01 Postary
0
0
Clean code
1 year ago 2023-03-23 05:02:01 Ricardorg
0
0
0
0
Model Response Analysis
1 year ago 2023-03-23 15:48:36 Maksim
0
0
0
0
CAN (expert coder
1 year ago 2023-03-26 09:56:03 nobody65534
0
0
🤖Developer AI Assistance
1 year ago 2023-03-26 18:25:19 Javohir
0
0
Backend Developer Interview Questions
1 year ago 2023-03-28 03:41:27 aman
0
0
CSS Coding Assistance
1 year ago 2023-03-28 10:54:37 saad
0
0
GraphQL vs REST pros/cons.
11 months ago 2023-03-30 00:54:56 Pete Tian
0
0
Programmer RP
11 months ago 2023-03-30 05:33:10 Dev
0
0
Jira API with Python threads
11 months ago 2023-03-30 18:09:06 Elvar
0
0
0
0
Make more concise coding block
11 months ago 2023-04-07 17:51:16 Yostin
0
0
Chat for assistance.
11 months ago 2023-04-10 16:30:25 akshar kakadiya
0
0
Install usaddress using setup.py
11 months ago 2023-04-12 21:08:21 Devang
0
0
GitHub Copilot
11 months ago 2023-04-16 01:59:18 spongu!