Assignments Of Class 10
Forms in HTML - Part 1
Assignment 1: Basic Form Creation
Objective: Create a basic HTML form with various input
types.
Instructions:
1. Create an HTML file with a form that includes the
following input elements:
o
A text input for
"First Name"
o
A text input for
"Last Name"
o
An email input for
"Email"
o
A password input
for "Password"
o
A submit button
2. Use the <label> element for each input to
provide a descriptive text for the user.
Assignment 2: Form with Different Input Types
Objective: Create a form that uses different HTML input
types.
Instructions:
1. Create an HTML file with a form that includes:
o
A date input for
"Date of Birth"
o
A number input for
"Age"
o
A tel input for
"Phone Number"
o
A URL input for
"Website"
o
A textarea for
"Comments"
o
A submit button
2. Ensure each input field has a corresponding label.
Assignment 3: Form with Radio Buttons and Checkboxes
Objective: Create a form that includes radio buttons and
checkboxes.
Instructions:
1. Create an HTML file with a form that includes:
o
Radio buttons for
selecting a gender ("Male", "Female", "Other")
o
Checkboxes for
selecting interests ("Reading", "Traveling",
"Sports")
o
A submit button
2. Ensure each input field has a corresponding label, and
group related inputs together.
Assignment 4: Form with Input Attributes
Objective: Create a form that demonstrates the use of
various input attributes.
Instructions:
1. Create an HTML file with a form that includes:
o
A text input with
a placeholder
o
An email input
with a custom pattern for validation
o
A number input
with a step attribute
o
A password input
with a min length
o
A submit button
2. Ensure each input field uses attributes to enhance
functionality or validation.
Assignment 5: Form with Select Menu and Multiple Selections
Objective: Create a form that includes a select menu with
single and multiple selections.
Instructions:
1. Create an HTML file with a form that includes:
o
A single-select
dropdown menu for choosing a country.
o
A multiple-select
dropdown menu for choosing hobbies.
o
A submit button.
2. Use <option> elements for the dropdown menus and
set up appropriate values and labels.
Assignment 6: Form with Hidden Fields and File Upload
Objective: Create a form with hidden fields and a file
upload input.
Instructions:
1. Create an HTML file with a form that includes:
o
A hidden field to
store a user ID.
o
A file input for
uploading a profile picture.
o
A submit button.
2. The hidden field should contain a fixed value, and the
file input should accept image files only.
Assignment 7: Form with Fieldset and Legend
Objective: Use the <fieldset> and <legend>
elements to group related form controls.
Instructions:
1. Create an HTML file with a form that uses
<fieldset> to group the following input fields:
o
Name
o
Email
o
Phone Number
o
Address
2. Use <legend> to provide a title for the
fieldset.
Assignment 8: Styling Forms with CSS
Objective: Apply basic CSS styling to form elements.
Instructions:
1. Create an HTML file with a form similar to Assignment
1.
2. Add an external or internal CSS to style the form
elements:
o
Style the form
background color.
o
Add padding and
margins to inputs and labels.
o
Change the submit
button's appearance.
Solutions
Assignment 1: Basic Form Creation
Objective: Create a basic HTML form with various input types.
Instructions:
1. Create an HTML file with a form that includes the following input elements:
o A text input for "First Name"
o A text input for "Last Name"
o An email input for "Email"
o A password input for "Password"
o A submit button
2. Use the <label> element for each input to provide a descriptive text for the user.
Example Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Basic Form</title>
</head>
<body>
<h1>Registration Form</h1>
<form action="#" method="post">
<label for="firstName">First Name:</label>
<input type="text" id="firstName" name="firstName" required><br><br>
<label for="lastName">Last Name:</label>
<input type="text" id="lastName" name="lastName" required><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required><br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Assignment 2: Form with Different Input Types
Objective: Create a form that uses different HTML input types.
Instructions:
1. Create an HTML file with a form that includes:
o A date input for "Date of Birth"
o A number input for "Age"
o A tel input for "Phone Number"
o A URL input for "Website"
o A textarea for "Comments"
o A submit button
2. Ensure each input field has a corresponding label.
Example Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form with Different Input Types</title>
</head>
<body>
<h1>Profile Information</h1>
<form action="#" method="post">
<label for="dob">Date of Birth:</label>
<input type="date" id="dob" name="dob" required><br><br>
<label for="age">Age:</label>
<input type="number" id="age" name="age" min="1" max="120" required><br><br>
<label for="phone">Phone Number:</label>
<input type="tel" id="phone" name="phone" required><br><br>
<label for="website">Website:</label>
<input type="url" id="website" name="website" required><br><br>
<label for="comments">Comments:</label>
<textarea id="comments" name="comments" rows="4" cols="50"></textarea><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Assignment 3: Form with Radio Buttons and Checkboxes
Objective: Create a form that includes radio buttons and checkboxes.
Instructions:
1. Create an HTML file with a form that includes:
o Radio buttons for selecting a gender ("Male", "Female", "Other")
o Checkboxes for selecting interests ("Reading", "Traveling", "Sports")
o A submit button
2. Ensure each input field has a corresponding label, and group related inputs together.
Example Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form with Radio Buttons and Checkboxes</title>
</head>
<body>
<h1>Personal Information</h1>
<form action="#" method="post">
<fieldset>
<legend>Gender:</legend>
<label for="male">Male:</label>
<input type="radio" id="male" name="gender" value="male" required>
<label for="female">Female:</label>
<input type="radio" id="female" name="gender" value="female">
<label for="other">Other:</label>
<input type="radio" id="other" name="gender" value="other">
</fieldset><br>
<fieldset>
<legend>Interests:</legend>
<label for="reading">Reading:</label>
<input type="checkbox" id="reading" name="interests" value="reading">
<label for="traveling">Traveling:</label>
<input type="checkbox" id="traveling" name="interests" value="traveling">
<label for="sports">Sports:</label>
<input type="checkbox" id="sports" name="interests" value="sports">
</fieldset><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Assignment 4: Form with Input Attributes
Objective: Create a form that demonstrates the use of various input attributes.
Instructions:
1. Create an HTML file with a form that includes:
o A text input with a placeholder
o An email input with a custom pattern for validation
o A number input with a step attribute
o A password input with a min length
o A submit button
2. Ensure each input field uses attributes to enhance functionality or validation.
Example Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form with Input Attributes</title>
</head>
<body>
<h1>Contact Form</h1>
<form action="#" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="Enter your name" required><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" title="Please enter a valid email address" required><br><br>
<label for="age">Age:</label>
<input type="number" id="age" name="age" step="1" min="1" max="120" required><br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password" minlength="8" required><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Assignment 5: Form with Select Menu and Multiple Selections
Objective: Create a form that includes a select menu with single and multiple selections.
Instructions:
1. Create an HTML file with a form that includes:
o A single-select dropdown menu for choosing a country.
o A multiple-select dropdown menu for choosing hobbies.
o A submit button.
2. Use <option> elements for the dropdown menus and set up appropriate values and labels.
Example Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Select Menu Form</title>
</head>
<body>
<h1>Selection Form</h1>
<form action="#" method="post">
<label for="country">Country:</label>
<select id="country" name="country" required>
<option value="usa">United States</option>
<option value="canada">Canada</option>
<option value="uk">United Kingdom</option>
<option value="australia">Australia</option>
</select><br><br>
<label for="hobbies">Hobbies:</label>
<select id="hobbies" name="hobbies[]" multiple required>
<option value="reading">Reading</option>
<option value="traveling">Traveling</option>
<option value="cooking">Cooking</option>
<option value="sports">Sports</option>
</select><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Assignment 6: Form with Hidden Fields and File Upload
Objective: Create a form with hidden fields and a file upload input.
Instructions:
1. Create an HTML file with a form that includes:
o A hidden field to store a user ID.
o A file input for uploading a profile picture.
o A submit button.
2. The hidden field should contain a fixed value, and the file input should accept image files only.
Example Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>File Upload Form</title>
</head>
<body>
<h1>Profile Upload</h1>
<form action="#" method="post" enctype="multipart/form-data">
<input type="hidden" id="userId" name="userId" value="12345">
<label for="profilePicture">Upload Profile Picture:</label>
<input type="file" id="profilePicture" name="profilePicture" accept="image/*" required><br><br>
<input type="submit" value="Upload">
</form>
</body>
</html>
Assignment 7: Form with Fieldset and Legend
Objective: Use the <fieldset> and <legend> elements to group related form controls.
Instructions:
1. Create an HTML file with a form that uses <fieldset> to group the following input fields:
o Name
o Email
o Phone Number
o Address
2. Use <legend> to provide a title for the fieldset.
Example Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fieldset Form</title>
</head>
<body>
<h1>Contact Details</h1>
<form action="#" method="post">
<fieldset>
<legend>Personal Information</legend>
<label for="name">Name:</label>
<input type="text" id="name" name="name" required><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required><br><br>
<label for="phone">Phone Number:</label>
<input type="tel" id="phone" name="phone"><br><br>
<label for="address">Address:</label>
<input type="text" id="address" name="address"><br><br>
</fieldset>
<input type="submit" value="Submit">
</form>
</body>
</html>
Assignment 8: Styling Forms with CSS
Objective: Apply basic CSS styling to form elements.
Instructions:
1. Create an HTML file with a form similar to Assignment 1.
2. Add an external or internal CSS to style the form elements:
o Style the form background color.
o Add padding and margins to inputs and labels.
o Change the submit button's appearance.
Example Code:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Styled Form</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Styled Registration Form</h1>
<form action="#" method="post">
<label for="firstName">First Name:</label>
<input type="text" id="firstName" name="firstName" required><br><br>
<label for="lastName">Last Name:</label>
<input type="text" id="lastName" name="lastName" required><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required><br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
CSS (styles.css):
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
}
h1 {
text-align: center;
margin-top: 20px;
}
form {
max-width: 600px;
margin: 0 auto;
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
input[type="text"],
input[type="email"],
input[type="password"] {
width: 100%;
padding: 10px;
margin-bottom: 15px;
border: 1px solid #ddd;
border-radius: 4px;
}
input[type="submit"] {
background-color: #5cb85c;
color: #fff;
border: none;
padding: 15px 20px;
font-size: 16px;
cursor: pointer;
border-radius: 4px;
}
input[type="submit"]:hover {
background-color: #4cae4c;
}