Unit IV - Lesson 3 | Codetantra HTML
Unit IV - Lesson 3
### 4.3.1. Introduction to HTML Form Element
(b) Collect and send data
4.3.2. Select the correct answer
(b) It indicates how data should be sent to the server.
4.3.3. Select the correct answer
(a) GET and POST
4.3.4. Select the correct answer
(b) POST
4.3.5. Action attribute
<!doctype html>
<html>
<body>
<!-- Write your code below -->
<form method="post" action="register.jsp"
</form>
</body>
</html>
4.3.6. Input element
<!doctype html>
<html>
<body>
<!-- Write your code below -->
<form method="post" action="register.jsp">
<div>
<label for="firstName">First Name</label>
<input type="text" id="firstName" name="firstName" placeholder="Enter First Name">
</div>
</form>
</body>
</html>
4.3.7. Text input element
<!doctype html>
<html>
<body>
<!-- Write your code below -->
<form method="post" action="register-user.jsp">
<div>
<label for="firstName">First Name:</label>
<input type="text" id="firstName" name="firstName" placeholder="Enter First Name" required>
</div>
<div>
<label for="lastName">Last Name:</label>
<input type="text" id="lastName" name="lastName" placeholder="Enter Last Name" required>
</div>
</form>
</body>
</html>
4.3.8. Input type password
<!doctype html>
<html>
<body>
<form method="post" action="login.jsp">
<!-- Write your code below -->
<form method="post" action="process=form.php">
<div>
<label for="userName">User Name:</label>
<input type="text" id="userName" name="userName" placeholder="Enter User Name" required>
</div>
<div>
<label for="password">Password:</label>
<input type="password" id="password" name="password" placeholder="Enter Password" required>
</div>
</form>
</form>
</body>
</html>
4.3.9. Textarea element
<!doctype html>
<html>
<body>
<form method="post" action="survey.jsp">
<div>
<!-- Write your code below -->
<label for="comments">Comments:</label>
<textarea id="comments" name="comments" placeholder="Enter your comments" required maxlength="300" rows="5" cols="70"></textarea>
</div>
</form>
</body>
</html>
4.3.10. Select element
<!doctype html>
<html>
<body>
<form method="post" action="register-user.jsp">
<div>
<!-- Write your code below -->
<label for="year">Year:</label>
<select name="year" id="year">
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
<option value="2024" selected>2024</option>
<option value="2025">2025</option>
<option value="2026">2026</option>
</select>
</div>
</form>
</body>
</html>
4.3.11. Checkbox Input element
<!doctype html>
<html>
<body>
<form method="post" action="register-user.jsp">
<div>
<p>Select your hobbies:</p>
<!-- Write your code below -->
<input type="checkbox" name="hobbies" id="painting" value="painting">
<label for="painting">Painting</label>
<input type="checkbox" name="hobbies" id="cooking" value="cooking">
<label for="cooking">Cooking</label>
<input type="checkbox" name="hobbies" id="golf" value="golf" disabled>
<label for="golf">Golf</label>
<input type="checkbox" name="hobbies" id="music" value="music" checked>
<label for="music">Music</label>
</div>
</form>
</body>
</html>
4.3.12. Radio buttons
<!doctype html>
<html>
<body>
<form method="post" action="meeting.jsp">
<div>
<p>Preferred time for meeting: </p>
<!-- Write your code below -->
<input type="radio" id="morning" name="meeting" value="morning">
<label for="morning">Morning</label>
<input type="radio" id="afternoon" name="meeting" value="afternoon" checked>
<label for="afternoon">Afternoon</label>
<input type="radio" id="evening" name="meeting" value="evening">
<label for="evening">Evening</label>
<input type="radio" id="night" name="meeting" value="night" disabled>
<label for="night">Night</label>
</div>
</form>
</body>
</html>
4.3.13. Select the correct answer
(b) <input type="file">