3.2.1 Forms in HTML
HTML controls how web pages appear and navigate based on user input. HTML may display forms containing text boxes and buttons that users can write or click on like the paperwork is filled out. HTML creates spaces where text may be written, items can be selected from lists and check boxes, etc. To take input on an online form, one very useful element for establishing several types of input fields is the <input> element. It makes it easier to take user input in multiple ways in forms such as buttons, checkboxes, text fields, etc.
A particular kind of <input> element called a 'list field' allows users to choose one or more items from a list of already available options. These are frequently utilized for checkbox groups or drop- down menus.
One more type of <input> button is a radio button. It lets the user choose just one possibility from a list of options, which is preferred for choices that are mutually exclusive, like gender.
Checkboxes are useful for lists of preferences since they allow users to pick multiple choices from a group.
Button is also used to take input and is frequently used for completing forms, navigating to different sites or execute various functions. The "submit" button is a typical example for transferring information from a form to a server.
HTML also provides with labels which provide information for user. The <label> element is also used to provide a clear title for each input field.
The form that is used to gather user input is defined within 'form' tag- pair.
For example, in the following lines of code, on second line a label provides information that student's name needs to be entered in the input field which is created with ID 'studentName'. The input field is created in line 3 so that users may enter the student's name.
<form> <label for="studentName">Student Name:</label> <input type="text" id="studentName" name="studentName"><br><br>
With the 'select' tag a drop down list can be created for selecting grade in which the student is. Possible choices of values need to be provided in the next lines so that a drop down list is created for user to choose from the provided choices, only. For instance, to provide choices of 3 classes from 8 to 10, the code should be:
<label for="grade">Grade:</label> <select id="grade" name="grade"> <option value="1">8</option> <option value="2">9</option> <option value="3">10</option> </select><br><br>
Mutually exclusive scenarios, where only one among many choices can be true at a time, are catered with radio buttons. To create radio buttons, the input type needs to be set as 'radio' followed by the name for which the radio buttons are set- up and the respective value, for all the choices.
<label for="gender">Gender:</label> <input type="radio" id="male" name="gender" value="male"> <label for="male">Male</label> <input type="radio" id="female" name="gender" value="female"> <label for="female">Female</label><br><br>
On the other hand, for selecting multiple choices check- boxes are used. To create checkboxes, we just need to specify the input type as 'checkbox' followed by ID. Additionally assign the label- name with which the checkbox relates and the value. Thereafter a corresponding text (label) for the user needs to be placed as well. For example, a student can participate in multiple sports so the input can be taken using checkboxes as:
<label for="sports">Sports Participated:</label><br> <input type="checkbox" id="cricket" name="sports" value="cricket"> <label for="cricket">Cricket</label><br> <input type="checkbox" id="badminton" name="sports" value="badminton"> <label for="badminton">Badminton</label><br> <input type="checkbox" id="hockey" name="sports" value="hockey"> <label for="hockey">Hockey</label><br> <input type="checkbox" id="basketball" name="sports" value="basketball"> <label for="basketball">Basketball</label><br>
The 'for' attribute when used alongside with the <label> element indicates the form element with which a label is tied to. Such input and label needs to be placed for every input choice, like check- boxes.
Lastly, there is a reset button using <input type="reset" value="Reset"> that allows users to click it to clear every field in the form. If all the above codes are gathered in a single file, the output will look like as shown in figure.
Diagram image pending upload by Admin.
Lets us design a form for visiting the doctor, for the sake of appointment for a check- up. The code is shown in Fig.3.
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <title>Doctor's Visit Form</title> 5 </head> 6 <body> 7 <h1>Doctor's Visit Form</h1> 8 <form action="submit_form.html" method="post"><p>Patient Information:</p> 9 <label for="name">Name:</label> 10 <input type="text" name="name" id="name" required><br> 11 12 <input type="radio" id="male" name="Gender" value="Male"> 13 <label for="male">Male</label> 14 <input type="radio" id="female" name="Gender" value="Female"> 15 <label for="female">Female</label><br><br> 16 17 <input type="checkbox" id="visit1" name="visit1" value="First"> 18 <label for="visit1"> First Visit </label> 19 <input type="checkbox" id="visit2" name="visit2" value="Second"> 20 <label for="visit2"> Follow up Visit </label> 21 <input type="checkbox" id="visit3" name="visit3" value="Regular"> 22 <label for="visit3"> Regular Check-up Visit</label><br><br> 23 24 <label for="email">Email Address:</label> 25 <input type="email" name="email" id="email" required><br> 26 27 <label for="phone">Phone Number:</label> 28 <input type="tel" name="phone" id="phone" required><br> 29 30 <p>Appointment Details:</p> 31 <label for="date">Date of Appointment:</label> 32 <input type="date" name="date" id="date" required><br> 33 34 <label for="time">Time of Appointment:</label> 35 <input type="time" name="time" id="time" required><br> 36 37 <p>Reason for Visit:</p> 38 <textarea name="reason" id="reason" rows="5" cols="30" placeholder=" 39 Describe your reason for visit here..."></textarea><br> 40 41 <input type="submit" value="Submit"> 42 </form> 43 </body> 44 </html>
Finally, there is a button for submitting the form and a conformation message is shown in the output in Fig.4.
3.2.2 Tables in HTML
1 The <th> tag refers to a table's header cell & contents in <th> cells are in bold and centered. 2 <td> tag applies to ordinary table cells. It contains the real data. 3 <caption> tag puts a heading or description to the table. 4 <thead>, <tbody>, <tfoot> tags divide rows into parts, such as headers, major data and summary. 5 colspan/rowspan options allow cells to span several columns or rows, which is convenient for complicated layouts.
In continuation of our example, a sample website with a title is created next in Fig.5, such that a table in HTML is created to display an appointment list. The head section arranges the patient name, date, time, doctor and reason for visit as labels on the top row of the table.
The actual information about appointments is in the 'tbody' section, starting at line 18. There are two sample appointments available right now but we may add more. A 'tr' tag is used for each appointment in a row and a 'td' tag is used for each piece of information inside an appointment. Fig.6 shows the output.
26 <tr> 27 <td>Zaki</td> 28 <td>2024-05-15</td> 29 <td>2:00 PM</td> 30 <td>Dr. Qamar</td> 31 <td>Check-up</td> 32 </tr> 33 </tbody> 34 </table> 35 </body> 36 </html>