WebTricks
Home
Home
Tutorials
Q&A Forum
Blog
Videos
Sign up / Register
HTML Forms - Playground
Back to Lesson
HTML Code
<!DOCTYPE html> <html> <head> <title>HTML FORMS</title> <meta charset="UTF-8"> </head> <body> <h1>HTML Forms</h1> <p>Here's a simple form you will often see in web pages.</p> <h3>Contact Form</h3> <form> <p>Your Name:</p> <p><input type="text" name="fullname"></p> <p>Your Email:</p> <p><input type="email" name="email"></p> <p>Subject:</p> <p><input type="text" name="subject"></p> <p>Message:</p> <p><textarea name="message" rows="10" placeholder="Add your message here..."></textarea></p> <p><input type="submit" name="submit" value="Send"></p> </form> <p>And some css styles to make it look better.</p> <style> form{ width: 50%; border: 1px solid #ccc; padding: 10px; box-shadow: 0 0 10px #999; margin-bottom: 10px; } input, textarea{ width: 100%; padding: 5px 10px; box-sizing:border-box; } input[type="submit"]{ width: 100px; background: linear-gradient(#5cb85c,#4cae4c); border:1px solid #4cae4c; color: #fff; padding: 5px 10px; border-radius: 4px; } input[type="submit"]:hover{ background: linear-gradient(#4cae4c,#5cb85c); box-shadow: 3px 3px 5px #999; } </style> </body> </html>
CSS Code
/* Write your CSS here */
Run Code