Interactive Form Design with HTML & CSS
This project demonstrates how to create a sleek and interactive form design using HTML and CSS. We’ll implement floating labels and focus effects to make the form more user-friendly and visually appealing.
Step-by-Step Code:
1. HTML Code
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Interactive Form</title> <link rel="stylesheet" href="styles.css"> </head> <body> <form> <div class="form-control"> <input type="text" id="name" required> <label for="name">Name</label> </div> <div class="form-control"> <input type="email" id="email" required> <label for="email">Email</label> </div> <button type="submit">Submit</button> </form> </body> </html>
2. CSS Code
form { width: 100%; max-width: 400px; margin: 20px auto; padding: 20px; background-color: #fff; border-radius: 8px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } .form-control { position: relative; margin-bottom: 20px; } input[type="text"], input[type="email"] { width: 100%; padding: 10px; font-size: 16px; border: 1px solid #ccc; border-radius: 5px; outline: none; transition: border-color 0.3s; } input:focus { border-color: #4CAF50; } label { position: absolute; top: 10px; left: 10px; font-size: 16px; color: #777; transition: 0.3s; pointer-events: none; } input:focus + label, input:valid + label { top: -15px; left: 10px; font-size: 12px; color: #4CAF50; } button[type="submit"] { width: 100%; padding: 10px; background-color: #4CAF50; color: white; border: none; border-radius: 5px; font-size: 16px; cursor: pointer; transition: background-color 0.3s; } button[type="submit"]:hover { background-color: #45a049; }
Explanation:
Let’s walk through how the form works:
- HTML: We’ve set up a simple form with two input fields (Name and Email). Each input is wrapped inside a
div
with the classform-control
to manage the layout. - CSS: Floating labels and transitions are created using the
:focus
and:valid
pseudo-classes. When a user clicks into a field or enters valid input, the label moves up, giving a clean and interactive look. - The submit button uses a hover effect to change the background color when the user hovers over it.