Desishub Lessons
Html and Css Tutorial
Css Forms

CSS Forms: Styling HTML Forms with CSS

HTML forms are essential for collecting user input on web pages. Styling forms with CSS enhances their appearance and improves user experience by making them more visually appealing and easier to interact with

forms

Basic Form Elements

1) Text Input

Used for single-line text fields

Html
 
<input type="text" placeholder="Enter your name">

2) Password Input

Used for password fields, hiding the input characters

Html
 
<input type="password" placeholder="Enter your password">

input

3) Text Area:

Used for multi-line text input.

Html
 
<textarea placeholder="Enter your message"></textarea>
Css
textarea {
    width: 100%;
    padding: 10px;
    margin: 5px 0 20px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

4) Checkbox

Used for selecting one or more options

Html
 
<input type="checkbox" id="subscribe" name="subscribe">
<label for="subscribe">Subscribe to newsletter</label>

5) Radio Button

Used for selecting one option from a set.

Html
 
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label>

6) Select Dropdown

Used for selecting one option from a dropdown list

Html
 
<select>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
</select>
Css
 
select {
    width: 100%;
    padding: 10px;
    margin: 5px 0 20px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

7) Button

Used for submitting forms or triggering actions

Html
 
<button type="submit">Submit</button>
Css
 
button {
    background-color: #4CAF50;
    color: white;
    padding: 15px 20px;
    margin: 5px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
 
button:hover {
    background-color: #45a049;
}

Form Example

Html
 
<div class="card">
    <form class="form" action="#">
        <h5 class="form-title">Sign in to our platform</h5>
        <div class="form-group">
            <label for="email" class="form-label">Your email</label>
            <input type="email" name="email" id="email" class="form-input" placeholder="name@company.com" required />
        </div>
        <div class="form-group">
            <label for="password" class="form-label">Your password</label>
            <input type="password" name="password" id="password" class="form-input" placeholder="••••••••" required />
        </div>
        <div class="form-options">
            <div class="form-remember">
                <input id="remember" type="checkbox" class="form-checkbox" required />
                <label for="remember" class="form-checkbox-label">Remember me</label>
            </div>
            <a href="#" class="form-link">Lost Password?</a>
        </div>
        <button type="submit" class="form-button">Login to your account</button>
        <div class="form-footer">
            Not registered? <a href="#" class="form-link">Create account</a>
        </div>
    </form>
</div>
Css
 
.card {
    width: 100%;
    max-width: 24rem;
    padding: 1rem;
    background-color: white;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
 
.form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
 
.form-title {
    font-size: 1.25rem;
    font-weight: 500;
    color: #111827;
}
 
.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
 
.form-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: #111827;
}
 
.form-input {
    background-color: #f9fafb;
    border: 1px solid #d1d5db;
    color: #111827;
    font-size: 0.875rem;
    border-radius: 0.5rem;
    padding: 0.625rem;
    width: 100%;
    box-sizing: border-box;
}
 
.form-input:focus {
    border-color: #3b82f6;
    outline: none;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
}
 
.form-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
 
.form-remember {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
 
.form-checkbox {
    width: 1rem;
    height: 1rem;
    border: 1px solid #d1d5db;
    border-radius: 0.25rem;
    background-color: #f9fafb;
}
 
.form-checkbox:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
}
 
.form-checkbox-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: #111827;
}
 
.form-link {
    font-size: 0.875rem;
    color: #3b82f6;
    text-decoration: none;
}
 
.form-link:hover {
    text-decoration: underline;
}
 
.form-button {
    width: 100%;
    color: white;
    background-color: #3b82f6;
    border: none;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 0.5rem;
    padding: 0.625rem;
    cursor: pointer;
    text-align: center;
    box-sizing: border-box;
}
 
.form-button:hover {
    background-color: #2563eb;
}
 
.form-button:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
}
 
.form-footer {
    font-size: 0.875rem;
    color: #6b7280;
}
 
.form-footer .form-link {
    color: #3b82f6;
}
ℹ️

Styling forms with CSS enhances the user experience by making forms more visually appealing and easier to use. By understanding and applying various CSS properties, you can create beautiful and responsive forms that fit seamlessly into your web design

Css GridCss Clip-path