CODE --> HTML Published: 2019-02-24
How to create a HTML form, simple and easy
Creating an HTML form is simple. First, let's list the things that you'll need to get started:

  • Note Pad Editor
  • Apeache server



  • Code Editors


    If you don't have a note pad editor already, some good ones to use are: NotePad ++ and the one I personally use which is loaded with a ton more features is Visual Studio Code. Alternatively, you can always do a good search for code editors and see what you might like out there the best.


    Apeache Server




    As far as Apache servers go, I've found that WampServer is the easiest to use and install. But again, you can do a simple Google search to go and find Apache Server client that best fits you. If you have a web host, that would work well for this tutorial too.


    Moving right along


    Okay, so now, the first thing you need to do in order to create a simple web form is, start out with a basic HTML template. In Visual Studio Code its just the '!' mark and enter on any .php or .html document. So what you should have is something like this:


    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Simple HTML template</title>
    </head>
    <body>

    </body>
    </html>



    This is a basic HTML for a template that you would use for pretty might any beginning of a web page.

    Now we should create the <form> tag. Now there are two different methods that you can use. You can use get which is the simplest and a little less secure than post. All these are the different types of methods in which that server side script handles your request to the server. For this tutorial, I'm going to go with the post method. If you want to learn more about how the server handles the different request, see my tutorial on how to retrieve the get and post method here

    Creating a form



    <!--
    method is how the server is going to handle your request
    and the action is used for where you want to send your data to be handled from the server
    -->
    <form method="post" action="myform.html">

    </form>


    After that, we have to decide what type of infomation we are going to be gathering from the user. For simplicity sake, we are going to make a form that gathers a person's first name, last name, and age. So inside of the body tag, we will enter the following:


    <input name="fname" type="text" placeholder="First name" />
    <input name="lname" type="text" placeholder="Last name" />
    <iput name="age" type="number" placeholder="Your age" />
    <input name="submit" type="submit" value="Submit" />



    So all together the form should look like should look like:


    <form method="post" action="myform.html">
    <input name="fname" type="text" placeholder="First name" />
    <input name="lname" type="text" placeholder="Last name" />
    <iput name="age" type="number" placeholder="Your age" />
    <input name="submit" type="submit" value="Submit" />
    </form>


    Now all of this goes inside of the body tag. Like so:


    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Simple HTML template</title>
    </head>
    <body>
    <form method="post" action="myform.html">
    <input name="fname" type="text" placeholder="First name" />
    <input name="lname" type="text" placeholder="Last name" />
    <iput name="age" type="number" placeholder="Your age" />
    <input name="submit" type="submit" value="Submit" />
    </body>
    </html>


    After that, just save and view it. If you have done everything right, you should have something that looks something like this:



    After that your all done. And that's how to make a simple a quick HTML form. If you want to learn how to get the data through get or post, click here



    Nerd+Geek is a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for sites to earn advertising fees by advertising and linking to amazon.com.