Home
coding
Tools

Create a Cool Interactive Form with HTML & CSS

Create a Cool Interactive Form with HTML & CSS!
Interactive Form Design with HTML & CSS

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 class form-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.
#coding #Tools

Post a Comment

© ‧ Uspacial ‧ All rights reserved. Developed by Fineshop
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
NextGen Digital Welcome to WhatsApp chat
Howdy! How can we help you today?
Type here...