HTML - Forms

HTML forms are simple form that has been used to collect data from the users. HTMl form has interactive controls and varius input types such as text, numbers, email, passowrd, radio butons, checkboxes, buttons, etc. We can see its application in various areas, including registration forms, customer feedback forms, online survey forms and many more.

Why use HTML Form?

Consider a scenario where we incorporate a Form section into our HTML webpage. Whenever the browser loads that page and encounters the <form> element, it will generate controls on the page allowing users to enter the required information according to the type of control.

Creating an HTML Form

The HTML <form> tag is used to create an HTML form. There are a few more tags which are required to create an actual form - all those tags are briefly desribed in this post. The <form> element contains various predefined tags and elements termed as form controls.

Syntax

<form action = "Script URL" method = "GET|POST">
   form controls like input, textarea etc.
</form>

Try to click the icon run button run button to run the following HTML code to see the output.

HTML Forms Examples

We create two basic form with using less form elements, a form can be used for multiple puposes, depending on the purpose we should design the form.

Creating Simple HTML Form

In the following example, we will create a simple HTML form(login form) where a user can enter his/her name with the help of <form> element and form controls like input, type and name.

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>Sample HTML Form </title>
</head>
<body>
   <!-- Start of the form element -->
   <form action = " ">
      <!-- various form controls -->
      <label for="first_name">First name:</label>
      <input type = "text" name = "first_name" />
      <br><br>
      <label for="first_name">Last name:</lable>
      <input type = "text" name = "last_name" />
      <br><br>
      <input type = "submit">
   </form>
</body>
</html>

HTML form with Redirection

In the previous example, we designed a form that accepts user input but doesn't process the data. In this example, however, when users enter their name and click the Submit button, they will be redirected to Tutorialspoint's HTML Tutorial. The redirection only occurs if a name is provided, if not, the form will prompt the user to enter their name.

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>Sample HTML Form </title>
</head>
<body>
   <!-- Start of the form element -->
   <form action = "https://www.tutorialspoint.com/html/index.htm" 
         target="_blank" 
         method = "post">
      <!-- various form controls -->
      <label for="first_name">First name:</label>
      <input type = "text" name = "first_name" required/>
      <br><br>
      <label for="first_name">Last name:</lable>
      <input type = "text" name = "last_name" required/>
      <br><br>
      <input type = "submit">
   </form>
</body>
</html>

HTML Form Elements

There are list of elements which can be used within the form element. All the elements are briefy described bellow.

1. HTML <form> Element

HTML form tag is used to create the form element, this element is the container for all other form elements. The form element soes not create the form it's container that keeps the other form elements.

Syntax

<form>.....</form>

2. HTML <input> Element

HTML input tag is an essential element of form control for gathering user input from the web sites, we can use this tag to create an input element.

Syntax

<input type = ".."/>

3. HTML <label> Element

HTML label tag is used to create label element that represent a caption for an item in a UI(user interface), or to add labels to a form control like text, textarea, checkbox, radio button, etc.

Syntax

<label>.......</label>

4. HTML <legend> Element

HTML legend tag is the element's first child, specifies the caption or title for the <fieldset> tag.

Syntax

<legend>.......</legend>

5. HTML <select> Element

HTML select tag is used to create the dropdon in HTML forms, we can use this tag to create dropdown anywhere we want.

Syntax

<select>....</select>

6. HTML <button> Element

HTML button Tag is an interactive element that is used to create a button in HTML.

Syntax

<button>Button</button>

7. HTML <fieldset> Element

HTML fieldset tag is used to group several controls within a web form. By using the <fieldset> tag and <legend> tag a form can be much eaiser to understand to the users.

Syntax

   <fieldset>....</fieldset>

8. HTML <datalist> Element

HTML datalist tag contains a set of <option> elements that represent recommended options available to choose from among others.

Syntax

<datalist>....</datalist>

9. HTML <output> Element

HTML output tag is a flexible and under used component that enables programmers to dynamically show the outcomes of calculations or scripts inside the content.

Syntax

<output> Results... </output>

10. HTML <option> Element

HTML option tag defines either the elements of the data list for autocomplete, specified by the <datalist> tag, or the items of a drop-down list, defined by the <select> tag.

Syntax

<option>.....</option>

11. HTML <optgroup> Element

HTML optgroup tag is used in the <select> element to group together relevant <option> elements.

Syntax

<optgroup>
   <option>..</option>
     .
     .
</optgroup>

12. HTML <textarea> Element

HTML textarea tag is used to represent a multiline plain-text editing control.

Syntax

<textarea>.......</textarea>

HTML Form Example with Code

Here in this example we will create a registration form using HTML form elements and accetted attributes of each elements. Will style the form by using some CSS properties which will learn from our CSS Tutorial.

<!DOCTYPE html>
<html>
    <head>
        <title>HTML Form</title>
        <style>
            body {
                display: flex;
                justify-content: center;
                align-items: center;
                height: 100vh;
                background-color: #f0f0f0;
            }

            form {
                width: 600px;
                background-color: #fff;
                padding: 20px;
                border-radius: 8px;
                box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            }

            fieldset {
                border: 1px solid black;
                padding: 10px;
                margin: 0;
            }

            legend {
                font-weight: bold;
                margin-bottom: 10px;
            }

            label {
                display: block;
                margin-bottom: 5px;
            }

            input[type="text"],
            input[type="email"],
            input[type="password"],
            textarea {
                width: calc(100% - 20px);
                padding: 8px;
                margin-bottom: 10px;
                box-sizing: border-box;
                border: 1px solid #ccc;
                border-radius: 4px;
            }
            input[type="submit"] {
                padding: 10px 20px;
                margin-left: 475px;
                border-radius: 5px;
                cursor: pointer;
                background-color: #04af2f;
            }
        </style>
    </head>
    <body>
        <form>
            <fieldset>
                <legend>
                    Registration Form
                </legend>
                <label>First Name</label>
                <input type="text" name="FirstName" />
                <label>Last Name</label>
                <input type="text" name="LastName" />
                <label>Email id</label>
                <input type="email" name="email"/>
                <label>Enter your password</label>
                <input type="password" name="password"/>
                <label>Confirm your password</label>
                <input type="password"name="confirmPass"/>
                <label>Address</label>
                <textarea name="address"></textarea>
                <input type="submit" value="Submit"/>
            </fieldset>
        </form>
    </body>
</html>

How does an HTML Form Work?

When users submit the form by clicking the button, the browser creates a package and forwards it to the server. Next, the server will perform the required processing and sends back a response to the browser in the form of a HTML web page.

Advertisements