All TalkersCode Topics

Follow TalkersCode On Social Media

How To Create A Form On HTML

Last Updated : Jul 1, 2023

How To Create A Form On HTML

In this tutorial we will show you the solution of how to create a form on HTML, in HTML a developer is also able to make a form. A form is a used for feedback purpose, surveys and for other things also. In html form, user have to fill information or answer of question provided in HTML.

You are able to insert or write alphabets, numbers, emails, password, and also attach a file in html form. In html, a form can be used in many ways.

That’s the reason behind the html form, that why it is so popular. Today, we show you that how you are able to make a form as an html developer.

Step By Step Guide On How To Create A Form On HTML :-

As, there are many ways or types of forms. A form’s type is based on the way or data in form with the help it created.

A parent tag that is form tag is mandatory for using form and in the end you have to submit your form.

As, there are also some methods with the help a form in created i.e. get and post methods, which will be described in next article.

There are some tags which are used under form tag. We will show you an example of most of tags which are used under form tag.

<!DOCTYPE html>
      <html>
        <head>
          <title> Title of the document<title>
        </head>
          <body>
		<form action="" method="get" style="text-align: center;">
        <label for="first_name">
            First name
        </label>
        <input type="text" name="first_name" id="">
        <br><br>
        <label for="last_name">
            Last name
        </label>
        <input type="text" name="last_name" id="">
        <br><br>
        <label for="dob">
            Date of Birth
        </label>
        <input type="date" name="dob" id="">
        <br><br>
        <label for="email">
            Email
        </label>
        <input type="email" name="email" id="">
        <br><br>
        <label for="gender">
            Select Gender
        </label>
        <input type="radio" name="gender" id=""> Male
        <input type="radio" name="gender" id=""> Female
        <input type="radio" name="gender" id=""> Transgender
        <br><br>
        <label for="subject">
            Subjects
        </label>
        <input type="checkbox" name="subjects" id=""> Math
        <input type="checkbox" name="subjects" id=""> Science
        <input type="checkbox" name="subjects" id=""> English
        <input type="checkbox" name="subjects" id=""> Hindi
        <br><br>
        <label for="password">
            Password
        </label>
        <input type="password" name="password" id="">
        <br><br>
        <label for=""> 
            Please upload your photo
        </label>
        <input type="file" name="" id="">
        <br><br>
        <input type="button" value="Submit">
        <input type="button" value="Reset">
    </form>
          </body>
      </html>
  1. First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
  2. Secondly, the <html> tag is used to indicate the beginning of an HTML document.
  3. As above now <head> tag is used to contain information about web page. In this tag a <title> tag is used which helps us to specify a webpage title. Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
  4. Thirdly, <body> tag is used to define the webpage body. All the contents to show on website are written here. In the body tag, here we create a form tag and input value is get, which we will define you next session.
  5. After this we create many label tags and input tags. The label tags are to give text before input tag that what you have to fill in the next input field. Also, the input tag have a type attribute in it.
  6. The type is most important thing in html form, a type defines that what type of data to type in input box have showed on browser.
  7. You can see the actual working and able to understand the form inputs if you change them and run on browser.
  8. At last, the <body> and <html> tags are closed with </body> and </html> respectively.

Conclusion :-

In conclusion, here we can say that a form is a very interesting, creative way to get information from people about your products and what they want.

These are some reasons that why forms are used. You can make a form according to your needs with the knowledge of proper html form tags.

I hope this tutorial on how to create a form on HTML helps you and the steps and method mentioned above are easy to follow and implement.