Assignments Of Class 16
HTML5 Forms and New Input Types
Assignment 1: Create a Basic Form with Email and Password Fields
Objective: Create a simple login form with email and password fields using HTML5.
Instructions:
- Create a form with an email field and a password field.
- Use the required attribute for both fields.
- Use the email type for the email field.
Solution:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login Form</title>
</head>
<body>
<form action="login.php" method="POST">
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<br>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<br>
<input type="submit" value="Login">
</form>
</body>
</html>
Assignment 2: Create a Contact Form with a Phone Number Input
Objective: Create a contact form where users can enter their phone number using the tel input type.
Instructions:
- Create a form with a name, email, and tel input fields.
- The phone number field should only accept numbers.
Solution:
html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact Form</title>
</head>
<body>
<form action="submit_contact.php" method="POST">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<br>
<label for="phone">Phone:</label>
<input type="tel" id="phone" name="phone" required>
<br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Assignment 3: Create a Form for Selecting a Date and Time
Objective: Create a form with fields for selecting a date and time using HTML5 input types.
Instructions:
- Add an input field for selecting a date.
- Add an input field for selecting a time.
Solution:
html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Appointment Form</title>
</head>
<body>
<form action="appointment.php" method="POST">
<label for="appointment_date">Appointment Date:</label>
<input type="date" id="appointment_date" name="appointment_date" required>
<br>
<label for="appointment_time">Appointment Time:</label>
<input type="time" id="appointment_time" name="appointment_time" required>
<br>
<input type="submit" value="Book Appointment">
</form>
</body>
</html>
Assignment 4: Create a Range Input for Volume Control
Objective: Create a form with a range input to control the volume level.
Instructions:
- Add a slider for controlling the volume (range input).
- The range should go from 0 to 100.
Solution:
html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Volume Control</title>
</head>
<body>
<form action="volume.php" method="POST">
<label for="volume">Volume:</label>
<input type="range" id="volume" name="volume" min="0" max="100" value="50">
<br>
<input type="submit" value="Set Volume">
</form>
</body>
</html>
Assignment 5: Create a Form for Selecting Multiple Files
Objective: Create a form to allow users to upload multiple files.
Instructions:
- Create a file input with the multiple attribute.
- Allow users to upload multiple files at once.
Solution:
html
Copy 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</title>
</head>
<body>
<form action="upload.php" method="POST" enctype="multipart/form-data">
<label for="files">Select files:</label>
<input type="file" id="files" name="files[]" multiple>
<br>
<input type="submit" value="Upload Files">
</form>
</body>
</html>
Assignment 6: Create a Form with a Color Picker
Objective: Create a form with a color picker input.
Instructions:
- Create a form where users can choose their favorite color.
Solution:
html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Color Picker</title>
</head>
<body>
<form action="color.php" method="POST">
<label for="fav_color">Choose your favorite color:</label>
<input type="color" id="fav_color" name="fav_color" value="#ff0000">
<br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Assignment 7: Create a Form for Month and Year Selection
Objective: Create a form to select a specific month and year.
Instructions:
- Add an input field for selecting a month.
- Add an input field for selecting a year.
Solution:
html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Month and Year Selection</title>
</head>
<body>
<form action="month_year.php" method="POST">
<label for="month">Select Month:</label>
<input type="month" id="month" name="month" required>
<br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Assignment 8: Create a Form for Entering a Postal Code with Pattern Validation
Objective: Create a form to enter a postal code with a pattern validation for 6-digit codes.
Instructions:
- Use the pattern attribute to ensure that the postal code follows a 6-digit format.
Solution:
html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Postal Code Form</title>
</head>
<body>
<form action="postal_code.php" method="POST">
<label for="postal_code">Postal Code:</label>
<input type="text" id="postal_code" name="postal_code" pattern="\d{6}" title="Postal code must be 6 digits" required>
<br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Assignment 9: Create a Survey Form with a Rating Scale (1-5)
Objective: Create a survey form where users can rate their experience on a scale of 1 to 5.
Instructions:
- Use a range input to allow users to rate from 1 to 5.
Solution:
html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Survey Form</title>
</head>
<body>
<form action="survey.php" method="POST">
<label for="rating">Rate your experience (1 to 5):</label>
<input type="range" id="rating" name="rating" min="1" max="5" value="3">
<br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Assignment 10: Create a Form with an Autocomplete Feature
Objective: Create a form with the autocomplete attribute enabled for the email field.
Instructions:
- Use the autocomplete attribute to enable the browser's autocomplete functionality for the email input.
Solution:
html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Auto-complete Form</title>
</head>
<body>
<form action="autocomplete.php" method="POST">
<label for="email">Email:</label>
<input type="email" id="email" name="email" autocomplete="on" required>
<br>
<input type="submit" value="Submit">
</form>
</body>
</html>
These assignments will help solidify your understanding of HTML5 forms and input types. Let me know if you need further assistance!
4o mini
You said:
write 100 MCQs for the concept above with explanation
ChatGPT said:
ChatGPT
Here are 100 multiple-choice questions (MCQs) with explanations based on HTML5 Forms and New Input Types: