WPD 312004 Practical No.21: Create different elements on the web page
|
| WPD 312004 Practical No.21: Create different elements in the web page |
An HTML form is a section of a document that contains controls such as text fields, password fields, checkboxes, radio buttons, submit buttons, menus, etc.
An HTML form enables the user to enter data that is to be transmitted to the server for processing such as name, email address, password, phone number, etc. This WPD 312004 Practical No.21 shows how to create different form elements in a web page to submit user-entered data.
Theory
An HTML form is used to collect user input. The user input is most often sent to a server for processing.
<form> element: The HTML <form> element is used to create an HTML form for user input:
Syntax:
<form>
.
form elements
</form>
Exercise
Develop a web page following the website page.
Answer:
<!DOCTYPE html><html lang=”en”><head><meta charset=”UTF-8″><meta name=”viewport” content=”width=device-width, initial-scale=1.0″><title>Sample Form</title></head><body><h1>User Information</h1><form><label for=”fname”>First Name:</label><input type=”text” id=”fname” name=”fname” placeholder=”Enter your first name”><br><br><label for=”lname”>Last Name:</label><input type=”text” id=”lname” name=”lname” placeholder=”Enter your last name”><br><br><h2>Skills (Choose One)</h2><label for=”html”>HTML</label><input type=”radio” id=”html” name=”skill” value=”html”><label for=”css”>CSS</label><input type=”radio” id=”css” name=”skill” value=”css”><label for=”javascript”>JavaScript</label><input type=”radio” id=”javascript” name=”skill” value=”javascript”><br><br><h2>Do you have any of the following?</h2><label for=”bike”>Bike</label><input type=”checkbox” id=”bike” name=”vehicle” value=”bike”><label for=”car”>Car</label><input type=”checkbox” id=”car” name=”vehicle” value=”car”><label for=”boat”>Boat</label><input type=”checkbox” id=”boat” name=”vehicle” value=”boat”><br><br><input type=”submit” value=”Submit”></form></body></html>
Output:
Practical Related Questions
1) Develop a web page for student registration form.
Answer:
<!DOCTYPE html><html lang=”en”><head><meta charset=”UTF-8″><meta name=”viewport” content=”width=device-width, initial-scale=1.0″><title>Student Registration Form</title></head><body><h1>Student Registration</h1><form action=”register.php” method=”post”> <fieldset><legend>Personal Information</legend><label for=”fname”>First Name:</label><input type=”text” id=”fname” name=”fname” placeholder=”Enter your first name” required><br><br><label for=”lname”>Last Name:</label><input type=”text” id=”lname” name=”lname” placeholder=”Enter your last name” required><br><br><label for=”email”>Email:</label><input type=”email” id=”email” name=”email” placeholder=”Enter your email address” required><br><br></fieldset><fieldset><legend>Program Selection</legend><p>Select your program of interest:</p><label for=”program_cs”>Computer Science</label><input type=”radio” id=”program_cs” name=”program” value=”Computer Science” required><label for=”program_it”>Information Technology</label><input type=”radio” id=”program_it” name=”program” value=”Information Technology” required><label for=”program_math”>Mathematics</label><input type=”radio” id=”program_math” name=”program” value=”Mathematics” required><br><br></fieldset><fieldset><legend>Additional Information</legend><p>Select any relevant extracurricular activities (optional):</p><label for=”activity_debate”>Debate Club</label><input type=”checkbox” id=”activity_debate” name=”activities[]” value=”Debate Club”><label for=”activity_math”>Math Olympiad Club</label><input type=”checkbox” id=”activity_math” name=”activities[]” value=”Math Olympiad Club”><label for=”activity_coding”>Coding Club</label><input type=”checkbox” id=”activity_coding” name=”activities[]” value=”Coding Club”><br><br></fieldset><input type=”submit” value=”Register”></form></body></html>
Output:
2) Develop a web page for the login page.
Answer:
<!DOCTYPE html><html lang=”en”><head><meta charset=”UTF-8″><meta name=”viewport” content=”width=device-width, initial-scale=1.0″><title>Login Page</title></head><body><h1>Login</h1><form><label for=”username”>Username:</label><input type=”text” id=”username” name=”username” placeholder=”Enter your username”><br><br><label for=”password”>Password:</label><input type=”password” id=”password” name=”password” placeholder=”Enter your password”><br><br><label for=”remember_me”>Remember Me</label><input type=”checkbox” id=”remember_me” name=”remember_me” value=”yes”><br><br><input type=”submit” value=”Login”></form></body></html>
Output:
Conclusion
We successfully completed WPD 312004 practical no 21 in which we learned to create different elements in the web page.
