All TalkersCode Topics

Follow TalkersCode On Social Media - A Social Media Network for developers Join Now ➔

How To Make A Form In HTML

Last Updated : Mar 11, 2024

How To Make A Form In HTML

In this tutorial we will show you how to make a form in HTML, in HTML, a developer is also able to make a form in html. The form may be used for feedback purpose, for a survey, for sign in or sign-up screens and for many other tasks as you want.

But there is a problem that you don’t know how to create a form in html. So, we are here to show you that how you are able to create a form in html.

Step By Step Guide On How To Make A Form In HTML :-

As, forms are used for many purposes. So, there are many in built functions in html. There are some tags that are used under form tag to give it user specified look or information for users.

Now, in next example we will show you the simplest way to make a form with all the example of tags that are used in form.

<!DOCTYPE html>
          <title> Title of the document<title>
		<form action="" method="get" style="text-align: center;">
        <label for="f_name">
            First name
        <input type="text" name="f_name" id="">
        <label for="l_name">
            Last name
        <input type="text" name="" id="">
        <label for="dob">
            Date of Birth
        <input type="date" name="dob" id="">
        <label for="email">
        <input type="email" name="email" id="">
        <label for="gender">
            Select Gender
        <input type="radio" name="gender" id=""> Male
        <input type="radio" name="gender" id=""> Female
        <input type="radio" name="gender" id=""> Transgender
        <label for="subject">
        <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
        <label for="password">
        <input type="password" name="password" id="">
        <label for=""> 
            Please upload your photo
        <input type="file" name="" id="">
        <input type="button" value="Submit">
        <input type="button" value="Reset">
  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.
  5. In the body tag, here we create a form tag and input value is get, which we will define you next session.
  6. And 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.
  7. And the input values by default have many types and each type have different perspective in html like when you write text their then it will show you text and when you write password here, then it will shows only dots.
  8. Hence, all the types give different output on webpage. In next sessions, we will deeply define you about the each and every type of input tag.
  9. At last, the <body> and <html> tags are closed with </body> and </html> respectively.

Conclusion :-

In conclusion, here we can say that form is a very creative and profitable thing that is used in html.

All the process occurs between form tag but with the help of label and input tags, some other additional tags are also used in forms.

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

Author Image About Riya

A recent graduate with a Bachelor of Technology (B.Tech) in Computer Science from India. She is passionate about leveraging technology to solve real-world problems. With a strong foundation and experience in programming languages such as Python, Django, HTML, CSS, and JavaScript, java, php and have honed her skills through hands-on projects and coursework.

Follow Riya On Linkedin 🡪