Assignments Of Class 6: Forms - Part 1 (Basic Elements)
Assignment 1: Create a Simple Login Form
Task: Create a login form with two input fields: one for the email and one for the password. Use placeholders to indicate what the user should input, and make both fields required.
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>Login Form</title>
</head>
<body>
<h2>Login</h2>
<form action="login.php" method="post">
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Enter your email" required>
<br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password" placeholder="Enter your password" required>
<br><br>
<input type="submit" value="Login">
</form>
</body>
</html>
Explanation:
- Required Fields: Both email and password fields are required.
- Placeholders: "Enter your email" and "Enter your password" are shown in the respective fields until the user starts typing.
Assignment 2: Create a Registration Form
Task: Create a registration form with fields for name, email, password, and a submit button. Include placeholders and make the name and email fields required.
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>Registration Form</title>
</head>
<body>
<h2>Register</h2>
<form action="register.php" 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" placeholder="Enter your email" required>
<br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password" placeholder="Enter your password">
<br><br>
<input type="submit" value="Register">
</form>
</body>
</html>
Explanation:
- Required Fields: The name and email fields are mandatory.
- Optional Password Field: The password field does not have the required attribute, making it optional.
Assignment 3: Create a Contact Form
Task: Create a contact form with the fields for name, email, and message. Ensure the email is a valid format using the type="email" attribute, and make the message field required.
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>
<h2>Contact Us</h2>
<form action="contact.php" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="Enter your name">
<br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Enter your email" required>
<br><br>
<label for="message">Message:</label>
<textarea id="message" name="message" placeholder="Your message here" required></textarea>
<br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Explanation:
- Email Field: Ensures the user enters a valid email.
- Message Field: Uses <textarea> for the message and is marked as required.
Assignment 4: Create a Login Form with "Remember Me" Checkbox
Task: Modify the login form to include a "Remember Me" checkbox, which will be optional. The form should still submit the email and password as required.
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>Login Form with Remember Me</title>
</head>
<body>
<h2>Login</h2>
<form action="login.php" method="post">
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Enter your email" required>
<br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password" placeholder="Enter your password" required>
<br><br>
<label for="rememberMe">Remember Me</label>
<input type="checkbox" id="rememberMe" name="rememberMe">
<br><br>
<input type="submit" value="Login">
</form>
</body>
</html>
Explanation:
- The checkbox is optional and does not have the required attribute.
- The form still ensures that the email and password fields are completed before submission.
Assignment 5: Create a Password Reset Form
Task: Create a password reset form with email input and a submit button. Make the email field required.
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>Password Reset</title>
</head>
<body>
<h2>Reset Your Password</h2>
<form action="reset_password.php" method="post">
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Enter your email" required>
<br><br>
<input type="submit" value="Reset Password">
</form>
</body>
</html>
Explanation:
- The form asks for the user's email to send password reset instructions, and the email field is required.
Assignment 6: Create a Search Form
Task: Create a simple search form with a text input field and a search button. Add placeholders and make the search input required.
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>Search Form</title>
</head>
<body>
<h2>Search</h2>
<form action="search_results.php" method="get">
<label for="search">Search:</label>
<input type="text" id="search" name="search" placeholder="Enter search terms" required>
<br><br>
<input type="submit" value="Search">
</form>
</body>
</html>
Explanation:
- The method="get" is used here as the search terms are typically passed as URL parameters.
Assignment 7: Create a Form with Multiple Fields and Validation
Task: Create a form with fields for name, email, and phone number. Ensure the email field has validation for correct email format, and the phone number field must be numeric.
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>Form with Validation</title>
</head>
<body>
<h2>Personal Information</h2>
<form action="submit_form.php" 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" placeholder="Enter your email" required>
<br><br>
<label for="phone">Phone Number:</label>
<input type="text" id="phone" name="phone" placeholder="Enter your phone number" pattern="\d+" required>
<br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Explanation:
- Phone Field Validation: The pattern="\d+" ensures that only numeric input is allowed.
Assignment 8: Create a Form with Radio Buttons for Gender
Task: Create a form with a gender selection using radio buttons (Male, Female, Other). Make sure one radio button is pre-selected.
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>Gender Selection</title>
</head>
<body>
<h2>Select Your Gender</h2>
<form action="gender_selection.php" method="post">
<label for="male">Male</label>
<input type="radio" id="male" name="gender" value="male" checked>
<br>
<label for="female">Female</label>
<input type="radio" id="female" name="gender" value="female">
<br>
<label for="other">Other</label>
<input type="radio" id="other" name="gender" value="other">
<br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Explanation:
- The checked attribute pre-selects the "Male" option.
Assignment 9: Create a Date Picker Form
Task: Create a form with a date input field that allows the user to select their birth date.
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>Date Picker Form</title>
</head>
<body>
<h2>Select Your Birth Date</h2>
<form action="birthdate.php" method="post">
<label for="birthdate">Birth Date:</label>
<input type="date" id="birthdate" name="birthdate" required>
<br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Explanation:
- The type="date" creates a date picker for the user to select their birth date.
Assignment 10: Create a Form with a File Upload
Task: Create a form that allows the user to upload a file (e.g., a profile picture). Include a submit button.
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 Form</title>
</head>
<body>
<h2>Upload Your Profile Picture</h2>
<form action="upload.php" method="post" enctype="multipart/form-data">
<label for="file">Choose a file:</label>
<input type="file" id="file" name="file" required>
<br><br>
<input type="submit" value="Upload">
</form>
</body>
</html>
Explanation:
- The enctype="multipart/form-data" is necessary for file uploads.
No comments:
Post a Comment