Basic Form
unknown
plain_text
a year ago
2.4 kB
6
Indexable
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HTML Form</title> <style> body { font-family: Arial, sans-serif; background-color: #f4f4f4; margin: 10px; padding: 20px; } .container { max-width: 600px; margin: 50px auto; padding: 20px; background-color: #fff; border-radius: 8px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } h2 { text-align: center; } form { margin-top: 20px; } label { display: block; margin-bottom: 5px; font-weight: bold; } input[type="text"], input[type="email"], textarea { width: 100%; padding: 10px; margin-bottom: 20px; border: 1px solid #ccc; border-radius: 5px; box-sizing: border-box; } select { width: 100%; padding: 10px; margin-bottom: 20px; border: 1px solid #ccc; border-radius: 5px; box-sizing: border-box; } textarea { height: 150px; } input[type="submit"] { background-color: #4CAF50; color: white; padding: 12px 20px; border: none; border-radius: 5px; cursor: pointer; font-size: 16px; transition: background-color 0.3s; } input[type="submit"]:hover { background-color: #45a049; } </style> </head> <body> <div class="container"> <h2>Contact Form</h2> <form> <label for="name">Name:</label> <input type="text" id="name" name="name" required> <label for="email">Email:</label> <input type="email" id="email" name="email" required> <label for="gender">Gender:</label> <select id="gender" name="gender"> <option value="male">Male</option> <option value="female">Female</option> <option value="other">Other</option> </select> <label for="comments">Comments:</label> <textarea id="comments" name="comments" required></textarea> <input type="submit" value="Submit"> </form> </div> </body> </html>
Editor is loading...
Leave a Comment