<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link href="FormStyles.css" rel="stylesheet" /> </head> <body> <section> <h1>My Form Example</h1> <form action="ThankYou.html" method="get"> <label for="txtName">Name:</label> <input id="txtName" type="text" /> <br /> <label for="txtEmail">Email:</label> <input id="txtEmail" type="email" /> <br /> <label for="txtDOB">Date of Birth:</label> <input id="txtDOB" type="date" /> <br /> <label for="txtCountry">Country:</label> <input id="txtCountry" type="text" list="countries"/> <datalist id="countries"> <option value="Australia"></option> <option value="Mongolia"></option> <option value="China"></option> </datalist> <br /> <input id="Submit" type="submit" value="submit" /> <input id="Reset" type="reset" value="reset" /> </form> </section> </body> </html> body { background-color:blue; } h1{ color:white; text-transform:uppercase; text-align:center; text-shadow:5px 5px #444444; } section{ width:430px; margin:auto; background-color:#c9d0de; border: 5px solid #888888; border-radius: 5px; /*rounded borders*/ padding:30px; box-shadow:10px 10px 5px #888888; } label{ display:inline-block; width:100px; } input{ width:260px; border-radius:5px; } input[type=submit], input[type=reset]{ width: 125px; height: 52px; margin-top:5px; } input[type=submit]{ margin-left:100px; } input:focus{ background-color:#c9d0de; }
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter