Assignment Input Group And Floating L

Assignment Tasks

Task 1: Basic Input Groups 

Create a form section that includes:

Email input with @ symbol as a pre

Price input with ₹ as a pre

Website URL input with .com as a Fix

✅ Requirements:

Use Bootstrap Input Group classes

Inputs must be properly aligned

Add meaningful placeholders

Task 2: Floating Labels Form 

Design a Login Form using Floating Labels:

Email Address

Password

Login button

✅ Requirements:

Use .form-floating

Labels must float on focus and input

Fields must be vertically aligned

Task 3: Combined Input Group + Floating Label 

Create a User Registration Form that includes:

Username 

Email address

Phone number with country code (+91)

Password field

✅ Requirements:

Combine Input Groups with Floating Labels correctly

Ensure labels do not overlap input content

Maintain consistent spacing

 Task 5: UI & Accessibility Enhancements 

Add aria-label where necessary

Use proper type attributes

Ensure readable labels and placeholders

📂 Submission Guidelines

Submit one HTML file

Bootstrap must be linked via CDN

File name: input-group-floating-labels.html

Code must be clean and well-indented

📊 Evaluation

Criteria

Marks

Input Groups Implementation

10

Floating Labels Usage

10

Combined Form Design

15

Responsive Layout

10

Accessibility & UI

5

Total

50 Marks

 

Complete This Assignment And Send It To Me 👩‍💻