How to Create a Simple HTML Form and Understand Each Element

Creating forms for your website is likely one of the most important skills you should master. A form is amazing because it bridges the connection with your website visitors and you and takes your website one step closer to earning income from your website.

I'd like to go over a simple form so we can being to memorize how to create them and level up our website.

The form element explained

First, to initiate a form you need a container element called form. You can think of it as a div element just with additional semantic meaning.

<!--A div element with semantic meaning-->
<form>
</form>

Inside the form element you will place the form fields. Before we get there we need to discuss the form element attributes. You need to remember that your form needs to send data somewhere and needs to know how to send the data.

In your html form you will have an action attribute and a method attribute. The action attribute will specify where your data is being sent (server endpoint). The method attribute will specify how the data is being handled. For the method attribute you have two options in HTML Forms - GET & POST. Usually you will be storing data in a database such as customer details so be sure to use POST. The GET method is used more for like a search query. Think Google Search.

<!--A div element with semantic meaning-->
<form action="/submit" method="post">
</form>

So let's recap. You have a form element. The form element is like a div element but with extra semantic meaning. The form element has two attributes (action & method). The value of action will be a server endpoint and the method will be post (just to keep it simple). Got it? Got it.

Let's keep going.

The form fields explained

We now need to add form fields to our form element. Step 1 was create a form element. Step 2 is add the form fields.

The form field is made up of two elements: the input and the label. A the form fields core you really only need the input field to get the form to submit data to a server. However, without the input field your form severely lacks in usability.

Let's go over the input field first since it is arguably the more important field with respect to making the form submit. We want three form fields in our form - name, phone, & email.

<!--A div element with semantic meaning-->
<form action="/submit" method="post">
    <input type="text" id="name" name="name" required><br><br>
    <input type="tel" id="phone" name="phone" required><br><br>
    <input type="email" id="email" name="email" required><br><br>
</form>

We are using four attributes within our input element (type, id, name, & required). First the order of the attributes does not matter just be sure to remember the attributes.

type attribute - The type attribute specifies the type of field you'd like to display and use in the browser. Not all form fields are the same and the type attribute is used to add semantic clarity to your form. While you can capture lots of data with a type of text it is better to use the more specific types when you can the same way you use other more specific elements than the div element.

id attribute - This is a unique identifier you'll use link to your label element, which we will get to shortly. It is the same id attribute you can use for other html elements that you capture using javascript or stylize using css.

name attribute - This is the key associated to the value entered in the form field. Think key value pairs in a database. While the id is more client side (client-side interactions), the name is more server side (server-side processing).

required attribute - With this attribute you will be unable to submit the form without entering data in the form field.

Note: The input element does not end with a forward slash and greater than sign "/>"

Now that we have added the input element which is essentially to making the form work, lets add label elements for usability.

<!--A div element with semantic meaning-->
<form action="/submit" method="post">
    <label for="name">Name:</label><br>
    <input type="text" id="name" name="name" required><br><br>

    <label for="phone">Phone:</label><br>
    <input type="tel" id="phone" name="phone" required><br><br>

    <label for="email">Email:</label><br>
    <input type="email" id="email" name="email" required><br><br>
</form>

Here the label element has one attribute (the "for" attribute) which is used to link up with the "id" attribute of the form field we want to connect to. The label element has an opening tag and a closing tag and between the tags you specify what text you would like to display in the browser for the label.

The form submit button explained

Step 1 was creating the container for the form known as the form element. Step 2 was adding the form fields with the input and label elements. Step 3 is now to add the submit button used to send the data entered in the form fields to the server.

To create the submit button we will again use the input element.

<input type="submit" value="Submit">

There is a specially type for the submit button known as submit. The value attribute is use two fold. It is used as the text (almost like a label) that appears on the button in the browser and it is used as a means of the server knowing what form has been submitted.

Take this example where we have two forms with two submit buttons one for saving data to a server and the other deleting data from a server:

<input type="submit" name="action" value="Save">
<input type="submit" name="action" value="Delete">

The server would see this information

name=Matt+Seiwert&action=Save
name=Matt+Seiwert&action=Delete

This gives the versatility within the Server to perform two different actions. The server-side logic will decide what to do with the data based on the value of the submit button. This is different from the form's method attribute which is a message from the client on how it would like the server to act on the data (either send me data which is a GET request or process this data which is a POST request).

GET and Post are HTTP requests which is the communication protocol that client's and server's use to interact with one another over the web.

The Final Solution

<form action="/submit" method="post">
  <label for="name">Name:</label><br>
  <input type="text" id="name" name="name" required><br><br>

  <label for="phone">Phone:</label><br>
  <input type="tel" id="phone" name="phone" required><br><br>

  <label for="email">Email:</label><br>
  <input type="email" id="email" name="email" required><br><br>

  <input type="submit" value="Submit">
</form>

Congratulations! You created your first form. Forms can get much more complex but with a solid foundation in form building you'll be able to slowly tackle these harder form builds.