Home Web DevelopmentHTML Beginner guide to creating HTML forms

Beginner guide to creating HTML forms

Html forms are one of the most important HTML tags for interacting with the user. They are used to taking input from the user, and most commonly, the inputs were sent to the server-side for further processing. Forms are used to build contact pages, login pages, etc., on a site. We can collect different types of data using forms such as email addresses, usernames, passwords, phone numbers, credit card numbers, etc. To build an HTML form, we need to use the <form> tag element of Html.

The <form>element

The Html <form> element is used to create an HTML form. The Html form element is a container for different form elements like input elements, submit button, etc. The below code shows the Html content for a simple Html form.

<form>
    <label>
        Enter Your Name:
        <input type="text">
    </label>
</form>

The above code will create a form to take the name as text input from the user. Then, you can run the code by clicking the run button present in the top menu of the code block.

We also need to provide some attributes to the form element. First, let us see some common attributes of the form element.

The method Attribute

This attribute is used to specify the HTTP method that will be used while submitting the form data. Two HTTP methods can be used to submit the form data, they are POST and GET. If we don’t mention the method, then the default method used by the form is the GET method. But the GET method has some disadvantages due to which we can’t use I for submitting critical data like passwords, credit card numbers, etc. The below code shows how we can use the GET method in an HTML form.

<form method="GET">
    <label>
        Enter Your Name:
        <input type="text">
    </label>
</form>

Now, we will see how to send the form details using the POST method. See the below code for illustration.

<form method="GET">
    <label>
        Enter Your Name:
        <input type="text">
    </label>
</form>

You can run both the codes by using the run button present in the top menu of the code block.

The action attribute

The action attribute is used to define the action that will be performed after the form is submitted. If we do not provide the action attribute, the action attribute is set to the current page.

The <input> element

The Html input element is the most used element of the Html form. This element is used to declare the input field in the form. The <input> element can be displayed in many ways depending on the type attribute. For example, to use a radio button in the form, we need to provide the attribute type=”radio” in the input tag element. See the below code for illustration.

<p>Enter Your Gender</p>
<form>
    <input type="radio" id="male" value="Male" name="gender">
    <label for="male">Male</label><br>
    <input type="radio" id="female" value="Female" name="gender">
    <label for="female">Female</label><br>
    <input type="radio" id="other" value="Other" name="gender">
    <label for="other">Other</label>
</form>

You can run the above code by clicking the run button present in the top menu of the above code block. Many types of input can be taken from the user. Some popular inputs fields are:

Text: This type of input field is declared by providing the attribute type=”text” in the input tag.
Password: To enter a password, there is a special input field. This field takes the input password in bullet symbols so that no one can see the password content. This field can be used in the form element by giving the attribute type=”password” to the input element.
Submit button: We can also give a submit button to our form using the input tag element. To provide a submit button, we need to give the attribute type=”submit” in the input tag.
Reset button: Similar to the submit button, we can also provide a reset button to our form. To give a reset button, we need to provide the type=”reset” attribute to the input button.

The following code block shows a simple form using the type of input as text and password, and it also provides submit and reset button.

<form>
    <label for="name">Enter You Name</label>
    <input type="text" id="name"><br><br>
    <label for="password">Enter You Password</label>
    <input type="password" id="password"><br><br>
    <input type="reset">
    <input type="submit">
</form>

You can run the above code by clicking the run button present in the top menu of the above code block.

The <label> element

The label element is used to provide a label for a form input element. We can give the ID of the input element in the for attribute of the label tag. See the below code for an illustration.

<form>
    <label for="name">Enter You Name</label>
    <input type="text" id="name"><br><br>
</form>

You can run the code by clicking the run button present at the top of the above code block.

Conclusion

In this tutorial, we have learned the basics of creating an Html form. We have discussed some input elements like radio box, password with the help of suitable examples. We also discussed the label element of a form. You may also want to see our guide on Html horizontal lines.

You may also like

Leave a Comment

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More