→ zobaidul kaziex
→ Login Form with input field validation, ...

Login Form with input field validation, and display error or success messages using only HTML, CSS, and Bootstrap, you can follow this approach.

HTML:

Form Structure: Contains fields for username and password with validation attributes (required, minlength).
Feedback Messages: Placeholder div for dynamic error messages.

CSS:

Background Gradient: Applied to the body.
Card Styling: Rounded corners and centered layout.
Button Styling: Custom colors for the submit button.
Validation Styling: Borders and error message styling.

JavaScript:

Validation Logic: Basic client-side validation to check if fields are empty or meet minimum length requirements.
Feedback Messages: Display appropriate error or success messages based on validation.

This bootstrap css example is contributed by zobaidul kaziex, on 05-Sep-2024. Component is made with bootstrap css v.4.6. It is responsive. similar terms for this example are Register, Sign in

Tags: Form Login Form

Author zobaidul kaziex

8.9k

v.4.6

Fork Fullscreen

<div class="container mt-5">
        <div class="row justify-content-center">
            <div class="col-lg-6 col-md-8 col-sm-12">
                <div class="card shadow-lg">
                    <div class="card-body">
                        <h3 class="card-title text-center mb-4">Login</h3>
                        <form id="loginForm">
                            <div class="mb-3">
                                <label for="username" class="form-label">Username</label>
                                <input 
                                    type="text" 
                                    class="form-control" 
                                    id="username" 
                                    placeholder="Enter your username" 
                                    required
                                />
                                <div class="form-text">Please enter your username.</div>
                            </div>
                            <div class="mb-3">
                                <label for="password" class="form-label">Password</label>
                                <input 
                                    type="password" 
                                    class="form-control" 
                                    id="password" 
                                    placeholder="Enter your password" 
                                    required
                                    minlength="6"
                                />
                                <div class="form-text">Password must be at least 6 characters long.</div>
                            </div>
                            <div class="text-center">
                                <button type="submit" class="btn btn-primary btn-lg">Login</button>
                                <div id="formFeedback" class="mt-3"></div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

More Examples

Simple Login form

Author:
Prajwal Hallale

2 years ago

10.1k

v.5.3
HTML and Bootstrap for Registration Form
HTML: Personal Information Section: Includes fields for full name, email, date of birth, bio, and profile image. Company Information Section: Includes fields for company name, company size (using a dropdown), and location. Submit Button: A button to submit the form. CSS: Background Gradient: Applied to the body. Card Styling: Styled with rounded corners and padding. Button Styling: Custom colors for the submit button. Validation Styling: Highlight invalid fields and display error messages. JavaScript: Validation Logic: Checks if required fields are filled and updates the feedback area with error or success messages. Dynamic Feedback: Updates the form with success or error messages based on validation.

Author:
zobaidul kaziex

2 years ago

9.6k

v.4.6
Simple login form

Author:
Prajwal Hallale

2 years ago

9.1k

v.4.6
Restrurant Website
Only for me

Author:
Zahid Hasan Riyad

3 months ago

337

v.5.3
E-Commerce Full

Author:
Zahid Hasan Riyad

2 months ago

731

v.5.3
E-Commarce

Author:
Anonymous

2 months ago

586

v.5.3
E- Commarce full website

Author:
Zahid Hasan Riyad

2 months ago

477

v.5.3
NewsPortal Full Website

Author:
Zahid Hasan Riyad

2 months ago

757

v.5.3
Form Wave
Form Wave

Author:
Rami AlAjo

1 year ago

2.3k

v.4.6
Form validation by donald trump
form validation

Author:
Faysal

2 months ago

295

v.4.6
new-validation-form
new-validation-form

Author:
Anonymous

2 months ago

373

v.4.6
vulgh

Author:
Anonymous

2 months ago

412

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent