HTML: Tables and Forms

Introduction

 
In the last chapter, we took a quick glance at Full-Stack Development in Python. Here, we will cover more two features of HTML tables and Forms.
 

HTML Tables

 
Tables in HTML consist of several tags together,
 
<table>
  • <thead>: Table head
               <th>: Table coloumns
  • <tr>: Table rows
                 <td>: Table cells
 
Every tag has an opening, and closing tags are required. <thead> is not a compulsory section for the table structure but it will give to the user a proper idea about the columns and arrangement of the rows. Let's check the below code and example with table tags. 
 
Example 1
 
In this example, we have taken three countries with names, flags, and weather details.
 
We have used image tags within a row and <img> tag is used with another attribute like height and width.  
  1. <!DOCTYPE html>  
  2. <html lang="en" dir="ltr">  
  3.   
  4.      <head>  
  5.           <meta charset="utf-8">  
  6.           <title>This is part-2 file</title>  
  7.      </head>  
  8.   
  9.      <body>  
  10.           <table border="1">  
  11.                <thead>  
  12.                     <th>Countries Name</th>  
  13.                     <th>Countries Flag</th>  
  14.                     <th>Weather</th>  
  15.                </thead>  
  16.                <tr>  
  17.                     <td>India</td>  
  18.                     <td>  
  19.                          <img src="255px-Flag_of_India.svg.png" width="200" height="100" alt="">  
  20.                     </td>  
  21.                     <td>30 Degree Celcius</td>  
  22.                </tr>  
  23.                <tr>  
  24.                     <td>USA</td>  
  25.                     <td>  
  26.                          <img src="220px-Flag_of_the_United_States.svg.png" width="200" height="100" alt="">  
  27.                     </td>  
  28.                     <td>21 Degree Celcius</td>  
  29.                </tr>  
  30.                <tr>  
  31.                     <td>Germany</td>  
  32.                     <td>  
  33.                          <img src="255px-Flag_of_Germany.svg.png" width="200" height="100" alt="">  
  34.                     </td>  
  35.                     <td>24 Degree Celcius</td>  
  36.                </tr>  
  37.           </table>  
  38.      </body>  
  39.   
  40. </html>   
Output
 
 
 
Try this code for the practice. 
 
We can also do styling with table attributes. For a more functional site, we have to do this styling with CSS. We will discuss it soon.
 
Let's move on with forms.
 

HTML Forms

 
The form will be a key component of Django later on, but in order to understand how to use them with Django, we need to fully understand them with just HTML.  
 
To make a form we will use <input> tag. Different input types are used with input tag like text, radio, checkbox, email, password, color reset, etc. 
 
Example 2 
 
Let's check this example having three different input types: Email, Password, and Submit 
 
Here is the code for the output screen as below,
  1. <!DOCTYPE html>    
  2. <html lang="en" dir="ltr">    
  3.   <head>    
  4.     <meta charset="utf-8">    
  5.     <title>HTML Forms</title>    
  6.   </head>    
  7.   <body>    
  8.     <form>    
  9.     <h1>Login Form</h1>    
  10.     <h2>Please fill the details:</h2>    
  11.     
  12.     <input type="email" name="useremail" value="Enter Email">    
  13.     <input type="password" name="password" value="valid password Please">    
  14.     <input type="submit" name="Submit" value="Submit">    
  15.     </form>    
  16.   </body>    
  17. </html>    
Output
 
 
 
 
 
You can see the differences between these two images. Without a valid email format, it couldn't be possible to click Submit. It will generate a pop-up message. Also, there is a password in non-readable mode or we can say it is encrypted type. Submit is a button most probably so it's in Button form. In this form, there are email, password, and submit input types executed. 
 
Now, we will move on with labels and actions. 
 
The use of the label tag will allow you to add labels in front of input in your HTML form. We will also learn how to activate actions by clicking submit.
  1. <body>    
  2.    <form action="https://www.Google.com" method="get">    
  3.       <h1>Enter text and take me to Google</h1>    
  4.          <input type="text" name="userinput" value="">    
  5.          <input type="submit" name="Submit" value="Submit">    
  6.    </form>    
  7. </body>  
Output
 
 
 
We can see the redirection of these two windows in an image, where username value is "hello" and page performs the action to the mentioned link: in the form tag. This is the example of ACTION in form.
 
Let's check with Label Tag.
 
In this example, we will give two simple labels to the text boxes. Label tag has an attribute 'for' and we will take a quick glance below. 
  1. <body>  
  2.      <form>  
  3.           <label>  
  4.                Enter Text:  
  5.                <input type="text" name="" value="block1">  
  6.           </label>  
  7.           <label>  
  8.                Enter Text:  
  9.                <input type="text" name="" value="block2">  
  10.           </label>  
  11.      </form>  
  12. </body>   
Output
 
 
 
Now, we will see how the attribute is used with <label> tag. 
 
In Label tag, for attribute has a value which always matches the other value of the <input id=""> id attribute. Also we have used placeholder attribute with input tag which will be good looking compared to value attribute.  See this in the below code snippet, 
  1. <body>    
  2.    <form>    
  3.       <!--use of for with label-->    
  4.       <label for="username">Enter User Name:</label>    
  5.       <input id="username" type="text" name="Enter name" placeholder="Enter Name">    
  6.     
  7.    </form>    
  8. </body>     
Output
 
 
 
That's all about the Labels and Actions using Form. 
 

Form Selection

 
Let's explore the input methods for forms:
  • Radio Button
  • Drop Down Menu
  • Text Area Inputs
There is another example which has all these methods used in different ways. 
  1. <body>  
  2.      <h1>Feedback Form</h1>  
  3.      <form method="get">  
  4.           <h2>Are you from India?</h2>  
  5.           <label for="in">Inside:</label>  
  6.           <input id="in" type="radio" name="a" value="">  
  7.           <label for="out">Outside:</label>  
  8.           <input id="out" type="radio" name="a" value="">  
  9.           <h2>Service Stars</h2>  
  10.           <select name="Stars">  
  11.                <option value="Excellent">3</option>  
  12.                <option value="Good">2</option>  
  13.                <option value="Average">1</option>  
  14.           </select>  
  15.           <input type="submit" name="" value="SUBMT">  
  16.           <h2>Any Other Feedback?</h2>  
  17.           <textarea name="mytext" rows="8" cols="80"></textarea>  
  18.           <input type="submit" name="" value="SUBMT">  
  19.      </form>  
  20. </body>   
Output
 
 
 
Inside this image, there are two values generated in the address bar after clicking the Submit Buttons.
 
Here, we have checked the <input> tag type with radio button, used two different tags: <select> for Drop Down Menu, <textarea> for writing some text in a box, with enough space.
 
Example
 
This is a complete combo of this article's content. 
  1. <!DOCTYPE html>  
  2. <html lang="en" dir="ltr">  
  3.   
  4.      <head>  
  5.           <meta charset="utf-8">  
  6.           <title>HTML Forms</title>  
  7.      </head>  
  8.   
  9.      <body>  
  10.           <h1>Course Signup Page</h1>  
  11.           <form method="get">  
  12.                <p> Please note First Name, Last Name, Email and Password are required:</p>  
  13.                <lable>First Name:  
  14.                     </label>  
  15.                     <input type="text" name="fn" placeholder="First Name">  
  16.                     <lable>last Name:  
  17.                          </label>  
  18.                          <input type="text" name="ln" placeholder="Last Name">  
  19.                          <p>  
  20.                               <lable>Email:  
  21.                                    </label>  
  22.                                    <input type="Email" name="e" placeholder="[email protected]">  
  23.                                    <lable>Password:  
  24.                                         </label>  
  25.                                         <input type="password" name="ln" placeholder="Password">  
  26.                          </p>  
  27.                          <p>Are you over age of 18?  
  28.                               <p>  
  29.                                    <label for="r">Yes</label>  
  30.                                    <input id="r" type="radio" name="y" value="">  
  31.                                    <label for="ra">No</label>  
  32.                                    <input id="ra" type="radio" name="y" value="">  
  33.                               </p>  
  34.                          </p>  
  35.                          <p>Do you have a Credit Card or PayPal?  
  36.                               <p>  
  37.                                    <select name="Payment">  
  38.                                         <option value="Credit Card"> Credit Card </option>  
  39.                                         <option value="PayPal"> PayPal </option>  
  40.                                    </select>  
  41.                               </p>  
  42.                               <input type="submit" name="" value="SIGN UP">  
  43.                          </p>  
  44.           </form>  
  45.      </body>  
  46.   
  47. </html>   
Output
 
 
 

Summary

 
In the next article, we will learn some basics of CSS.
Author
Dipa Mehta
147 12.6k 494k
Next » Introduction to CSS

©2024 C# Corner.