Prev
Home
Next
Menu

HTML Forms

The uses of HTML forms are very common in the Internet. Several users may want to create a simple email signup, a moderately complex checkout and payment page, or a richly interactive web application using HTML forms​.

The “<form>” tag or element is used to create an HTML form. It basically defines a form that is used to collect user input.

An HTML form contains elements called form elements. These are essentially different types of input elements, such as text fields, password fields, check boxes, radio buttons, submit buttons, reset buttons, and many more.

 

1) The “<form>” element

The “<form>” element is the most important form element and can be displayed in several ways, depending on the type attribute. The corresponding description is also given using comments in HTML (<!– HTML Comment –>). See examples below:

<!-- Example below defines a one-line field for text input -->
<input type="text">

<!-- Example below defines a password field -->
<input type="password">

<!-- Example below defines a check box -->
<input type="checkbox">

<!-- Example below defines a radio button -->
<input type="radio">

<!-- Example below defines a submit button -->
<input type="submit">

<!-- Example below to reset all form values to the default -->
<input type="reset">

We can also have several other input types such as , “textarea“,  “color“,  “button” etc.  A code snippet for “button” input type is given below:

<h3>HTML Button</h3>
<input type="button" onclick="alert('Happy Learning!')" value="Click">

 

2) The “action” attribute

The “action” attribute of “<form>” element defines the action to be performed when the HTML form is submitted.

Normally, the form data is sent to a web page when the user clicks on the submit button.

In the example below, the form data is sent to a page called “test.html“.

<form action="test.html" method="get">
   <b>User Id:</b><br>
   <input type="text" name="userid" value="">
   <br><br>
   <b>Password:</b><br>
   <input type="password" name="password" value="">
   <br><br>
   <input type="submit" value="Submit">
</form>

The “method” attribute of element specifies the HTTP method (GET or POST) to be used when submitting the form data.

The default method when submitting form data is GET.

However, when GET is used, the submitted form data will be visible in the next page address field. See below:

 

As because GET method does not have any body, it is not being able to provide security.

That is why to ensure security the “POST” method is recommended.

 

Difference between HTTP GET and HTTP POST

HTTP GET
HTTP POST

1) Target resource type active or passive.

1) Target resource type active.

2) GET has no body.

2) POST has body.

3) Sends only text data.

3) Sends text as well as binary data.

4) Data is part of the URL and is visible to the user in the URL field of the browser. So, it is insecure.

4) Data is not a part of the URL and is sent as the request message body. It is not visible to the user in the URL field of the browser. So, it is secure.

5) Data can be cached in the browser’s URL history.

5) Data is not cached in the browser’s URL history.

6) Parameters are not encrypted.

6) Parameters are encrypted.

 

See the example below which uses the HTTP POST method.

Example 16: The coding example involves different input types as given below.

<html>
<body>
   <h3>A Sample HTML Form</h3>
   <form action="test.html" method="post">
      <b>User Id:</b><br>
      <input type="text" name="userid" value="">
      <br><br>
      <b>Password:</b><br>
      <input type="password" name="password" value="">
      <br><br>
      <input type="checkbox" name="addPhone" checked>
      Add me to your contact list.<br>
      <input type="checkbox" name="addEmail" checked>
      Add me to your mailing list.<br><br>
      Contact me by:<br>
      <input type="radio" name="contactVia" value="Email">Email
      <input type="radio" name="contactVia" value="Postal Mail">Postal mail
      <input type="radio" name="contactVia" value="Both" checked>Both
      <br><br>
      <input type="submit" value="Submit">
      <input type="reset" value="Reset">
   </form>
   <p>
      By clicking on the "Submit" button, the form data 
      will be sent to a page named "test.html".
   </p>
</body>
</html>

By clicking on the “Submit” button, the form data
will be sent to a page named “test.html”.

Output:

 

3) The “<select>” element 

The “<select>” element element defines a drop-down list.

Th “<option>” element denotes an option that can be selected.

By default, the first item in the drop-down list is selected.

To define a pre-selected option, add the selected attribute to the option.

Example 17a:  See the code below.
<html>
<body>
   <form action="test.html" method="post">
      <b>Select a country:<br><br>
      <select name="country">
         <option value="USA">United States</option>
         <option value="Canada">Canada</option>
         <option value="India" selected>India</option>
         <option value="England">England</option>
      </select>
      <br><br><br><br><br><br>
      <input type="submit" value="Submit">
   </form>
</body>
</html>
Output:

 

We can also use the “size” attribute to specify the number of visible values and “multiple” attribute to allow the user to select more than one value.

Example 17b:  See the code below.

<html>
<body>
  <form action="test.html" method="post">
     <b>Select a country:<br><br>
     <select name="country" size="3" multiple>
        <option value="USA">United States</option>
        <option value="Canada">Canada</option>
        <option value="India" selected>India</option>
        <option value="England">England</option>
     </select>
     <br><br><br>
     <input type="submit" value="Submit">
</form>
</body>
</html>

Output:

 

4) Grouping form data with “<fieldset>” tag

The “<fieldset>” tag is used to logically group together elements in an HTML form. It also draws a box around the related form elements.

The “<legend>” tag defines a caption for the fieldset element.

Example 18:  See the code below.

<html>
<body>
<form action="test.html">
   <fieldset>
      <legend><b>Personal Information:</b></legend>
      <br>
      Name: <input type="text" size="30" />
      <br><br>
      Email: <input type="text" size="30" />
      <br><br>
      Date of birth: <input type="text" size="15" />
      <br><br>
      <input type="submit" value="Submit">
   </fieldset>
</form>
</body>
</html>

Output:

 

 

 

 

Prev
Home
Next