Lab 6 - HTML Forms
|
Name |
LOY DONG XUAN |
|
Matric. No. |
AI2000236 |
|
Section |
6 |
|
Lab Sheet 6 |
HTML Forms |
<!DOCTYPE html>
<html>
<body>
<h2>LAB-06 HTML Forms</h2>
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value=""><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value=" "><br><br>
<input type="submit" value="Submit">
</form>
<p>If you click the "submit" button, the form-data will be sent to a page called "/action_page.php".</p>
</body>
</html>
1. Explain about the HTML code above.
The <form> tag
is used to create an HTML form for user input.
The <form> element
can contain one or more of the following form elements:
The <label> tag
defines a label for several elements:
- <input
type="checkbox">
- <input type="color">
- <input type="date">
- <input
type="datetime-local">
- <input type="email">
- <input type="file">
- <input type="month">
- <input type="number">
- <input
type="password">
- <input type="radio">
- <input type="range">
- <input type="search">
- <input type="tel">
- <input type="text">
- <input type="time">
- <input type="url">
- <input type="week">
- <meter>
- <progress>
- <select>
- <textarea>
Proper use of labels with the elements above will benefit:
- Screen reader users (will read
out loud the label, when the user is focused on the element)
- Users who have difficulty
clicking on very small regions (such as checkboxes) - because when a user
clicks the text within the <label> element,
it toggles the input (this increases the hit area).
2. Write a HTML code to display the output as show as Figure Q2 on
the webpage.
<!DOCTYPE html>
<html>
<body>
<h2>LAB-06-Q2 HTML Forms</h2>
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="">
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname" value=" "><br><br>
<label for="lname">Id:</label>
<input type="text" id="lname" name="lname" value=" ">
<label for="lname">Age:</label>
<input type="text" id="lname" name="lname" value=" "><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Figure 1.1 shows the output of the HTML code
Comments
Post a Comment