HTML Form Assignment एक महत्वपूर्ण प्रैक्टिकल टॉपिक है, जिसके माध्यम से विद्यार्थी वेब डेवलपमेंट की बेसिक और इंटरमीडिएट स्किल्स को समझते हैं। इस असाइनमेंट का मुख्य उद्देश्य HTML Forms बनाना सीखना और यूज़र से इनपुट डेटा को सही तरीके से कलेक्ट करना होता है। HTML Forms वेबसाइट का एक अहम हिस्सा होते हैं, जिनका उपयोग लॉगिन, रजिस्ट्रेशन, फीडबैक, और डेटा सबमिशन जैसे कार्यों में किया जाता है। इस असाइनमेंट के जरिए स्टूडेंट्स विभिन्न Form Elements जैसे input, label, textarea, select, radio button और checkbox का उपयोग करना सीखते हैं, जिससे वे एक इंटरएक्टिव और यूज़र-फ्रेंडली वेब पेज बना सकें।
HTML Form Assignment: Basic to Advanced Form Creation Guide
Objective:
HTML Form बनाना सीखना और User Input को collect करना
Assignment 1: Basic Form
👉 एक simple form बनाइए जिसमें ये fields हों:
- Name (Text Box)
- Email (Email Input)
- Password (Password Input)
- Submit Button
Code:
<!DOCTYPE html>
<html>
<head>
<title>Basic Form</title>
</head>
<body>
<h2>Basic Form</h2>
<form>
Name: <input type=”text” name=”name”><br><br>
Email: <input type=”email” name=”email”><br><br>
Password: <input type=”password” name=”password”><br><br>
<input type=”submit” value=”Submit”>
</form>
</body>
</html>
Assignment 2: Student Registration Form
👉 एक student registration form बनाइए जिसमें:
- Full Name
- Father Name
- Gender (Radio Button)
- Hobbies (Checkbox)
- Course (Dropdown)
- Address (Textarea)
- Submit & Reset Button
Code:
<!DOCTYPE html>
<html>
<head>
<title>Student Registration</title>
</head>
<body>
<h2>Student Registration Form</h2>
<form>
Full Name: <input type=”text”><br><br>
Father Name: <input type=”text”><br><br>
Gender:
<input type=”radio” name=”gender”> Male
<input type=”radio” name=”gender”> Female<br><br>
Hobbies:
<input type=”checkbox”> Reading
<input type=”checkbox”> Sports
<input type=”checkbox”> Music<br><br>
Course:
<select>
<option>BCA</option>
<option>MCA</option>
<option>B.Tech</option>
</select><br><br>
Address:<br>
<textarea rows=”4″ cols=”30″></textarea><br><br>
<input type=”submit”>
<input type=”reset”>
</form>
</body>
</html>
Assignment 3: Login Form with Validation
👉 Required fields और validation के साथ form बनाइए
Code:
<!DOCTYPE html>
<html>
<head>
<title>Login Form</title>
</head>
<body>
<h2>Login Form</h2>
<form>
Username: <input type=”text” required><br><br>
Email: <input type=”email” required><br><br>
Password: <input type=”password” minlength=”6″ required><br><br>
<input type=”submit” value=”Login”>
</form>
</body>
</html>
Assignment 4: Advanced Form
👉 एक professional form बनाइए जिसमें:
- Date of Birth (Date Input)
- Mobile Number (Number Input)
- Upload File
- Range Slider
- Color Picker
Code:
<!DOCTYPE html>
<html>
<head>
<title>Advanced Form</title>
</head>
<body>
<h2>Advanced Form</h2>
<form>
DOB: <input type=”date”><br><br>
Mobile: <input type=”number”><br><br>
Upload File: <input type=”file”><br><br>
Select Range: <input type=”range”><br><br>
Choose Color: <input type=”color”><br><br>
<input type=”submit”>
</form>
</body>
</html>
HTML Form Advanced Assignment (Level 2)
Assignment 5: Contact Form (Professional)
👉 एक professional contact form बनाइए:
- Name
- Subject
- Message
- Submit Button
Code:
<!DOCTYPE html>
<html>
<head>
<title>Contact Form</title>
</head>
<body>
<h2>Contact Us</h2>
<form>
Name: <input type=”text” required><br><br>
Email: <input type=”email” required><br><br>
Subject: <input type=”text”><br><br>
Message:<br>
<textarea rows=”5″ cols=”30″></textarea><br><br>
<input type=”submit” value=”Send Message”>
</form>
</body>
</html>
Assignment 6: Feedback Form
👉 Feedback लेने वाला form बनाइए:
- Name
- Rating (1–5 Radio Button)
- Feedback (Textarea)
- Submit
Code:
<!DOCTYPE html>
<html>
<head>
<title>Feedback Form</title>
</head>
<body>
<h2>Feedback Form</h2>
<form>
Name: <input type=”text”><br><br>
Rating:
<input type=”radio” name=”rate”> 1
<input type=”radio” name=”rate”> 2
<input type=”radio” name=”rate”> 3
<input type=”radio” name=”rate”> 4
<input type=”radio” name=”rate”> 5<br><br>
Feedback:<br>
<textarea rows=”4″ cols=”30″></textarea><br><br>
<input type=”submit”>
</form>
</body>
</html>
Assignment 7: Job Application Form
👉 Job apply करने के लिए form बनाइए:
- Full Name
- Phone Number
- Gender
- Skills (Checkbox)
- Resume Upload
- Submit
Code:
<!DOCTYPE html>
<html>
<head>
<title>Job Application</title>
</head>
<body>
<h2>Job Application Form</h2>
<form>
Full Name: <input type=”text”><br><br>
Email: <input type=”email”><br><br>
Phone: <input type=”tel”><br><br>
Gender:
<input type=”radio” name=”gender”> Male
<input type=”radio” name=”gender”> Female<br><br>
Skills:
<input type=”checkbox”> HTML
<input type=”checkbox”> CSS
<input type=”checkbox”> JavaScript<br><br>
Upload Resume: <input type=”file”><br><br>
<input type=”submit”>
</form>
</body>
</html>
Assignment 8: Online Exam Form
👉 MCQ वाला form बनाइए:
- Student Name
- 3 Questions (Radio Button options)
- Submit
Code:
<!DOCTYPE html>
<html>
<head>
<title>Online Exam</title>
</head>
<body>
<h2>Online Exam</h2>
<form>
Name: <input type=”text”><br><br>
Q1: HTML stands for?<br>
<input type=”radio” name=”q1″> Hyper Text Markup Language<br>
<input type=”radio” name=”q1″> High Text Machine Language<br><br>
Q2: CSS is used for?<br>
<input type=”radio” name=”q2″> Styling<br>
<input type=”radio” name=”q2″> Programming<br><br>
Q3: JS is?<br>
<input type=”radio” name=”q3″> Language<br>
<input type=”radio” name=”q3″> Database<br><br>
<input type=”submit”>
</form>
</body>
</html>
Assignment 9: Payment Form
👉 Payment करने वाला form बनाइए:
- Card Holder Name
- Card Number
- Expiry Date
- CVV
- Pay Button
Code:
<!DOCTYPE html>
<html>
<head>
<title>Payment Form</title>
</head>
<body>
<h2>Payment Form</h2>
<form>
Name on Card: <input type=”text”><br><br>
Card Number: <input type=”number”><br><br>
Expiry Date: <input type=”month”><br><br>
CVV: <input type=”password”><br><br>
<input type=”submit” value=”Pay Now”>
</form>
</body>
</html>
Assignment 10: Search Form
👉 Google जैसा search form बनाइए:
- Search Box
- Search Button
Code:
<!DOCTYPE html>
<html>
<head>
<title>Search</title>
</head>
<body>
<h2>Search Here</h2>
<form>
<input type=”search” placeholder=”Search…”>
<input type=”submit” value=”Search”>
</form>
</body>
</html>
Read More : html assignment
Read More: Couses Module
