Igor Irianto

Posted on Feb 27, 2020 • Updated on Jun 15, 2021 • Originally published at irian.to

HTML forms 101

#html #form #input #label

When I was learning HTML, I struggled to understand how HTML forms work.

This post will cover HTML forms basics. Here are the things that will be covered:

What HTML form is
How to create a simple HTML forms
Form action and method
Label and input
Different form inputs

What HTML Form is

According MDN, form is an "element represents a document section containing interactive controls for submitting information."

In short, it allows users to submit information. It also gives this example:

<form action="" method="get" class="form-example">
  <div class="form-example">
    <label for="name">Enter your name: </label>
    <input type="text" name="name" id="name" required>
  </div>
  <div class="form-example">
    <label for="email">Enter your email: </label>
    <input type="email" name="email" id="email" required>
  </div>
  <div class="form-example">
    <input type="submit" value="Subscribe!">
  </div>
</form>

A basic working form

The code above is a bit verbose. Here is a sample of shorter, functioning HTML form:

<form method="POST" action="create">
  <label for="name">Name:</label>
  <input type="text" id="name" name="user_name">
  <button type="submit">Submit</button>
</form>

Let's go through it line-by-line. Check out the first line:

<form method="POST" action="create">

It tells that the form will do a POST method. Notice that form element is a wrapper (like <footer> or <section>). Here it wraps a label, an input, and a button.

These two attributes are important in a form: an action and a method (I will cover them later). A form could technically work without having a method or action attribute, but if you are doing plain HTML form, it is good to include both action and method.

Let's go over then next 2 lines:

<label for="name">Name:</label>
<input type="text" id="name" name="user_name">

Label and input usually come together. A label describes its input counterpart. An input passes user input as form values. We will cover more later. Lastly, we hav a submit button:

<button type="submit">Submit</button>

When we give it a type="submit", every user inputs wrapped inside the form get submitted.

Form action and method

Let's go over method first. You will usually see two different form methods: GET and POST.

A GET performs a GET HTTP method. If you want to code along, just create an html file and copy the path in your browser (ex: /Users/iggy/my/path/to/this/html/index.html):

<!-- index.html -->
<form  action="" method="get">
  <label for="name">Name:</label>
  <input type="text" id="name" name="user_name">
  <button type="submit">Submit</button>
</form>

Btw, if we have "" (blank) action, we are telling our form to perform the HTTP request to the same URL. If I enter "test" as username and press submit, note that the URL changes to: form.html?user_name=test

Doing GET request on HTML form will pass user input into query params.

Cool! But what about POST method?

<!-- index.html -->
<form action="" method="POST">
  <label for="name">Name:</label>
  <input type="text" id="name" name="user_name">
  <button type="submit">Submit</button>
</form>

When we do POST request, it will perform POST HTTP request to the page you define inside "action". Since we have "" as action, it will do POST HTTP request into this page.

You can check out your form request inside dev tool. Open Chrome dev tool -> Network -> make sure "Filter" is on -> Click on Docs -> fill out the form and Submit. You'll see the request you just made.
If you look at the detail, you'll see, in the bottom, "Form Data" and it says "user_name: hello"

Bonus: you can use filter to search only for POST requests with "method:POST" in the search box (Check out this article for more detail).

Btw, if you change the form action from "" to for example, "create" page (<form action="create" method="POST">), you will be redirected to create page when you submit. There are ways you can avoid redirect, like using AJAX. I will not cover them here, but you can check out this so post.

There are several ways you can define a form action:

Relative (same origin) (<form action="somewhere_else">)
Absolute (different page url)(<form action="https://example.com">)
Default (same page) (<form>)

Label and Input

I will briefly cover label and input. An entire article can be written about them, so I will cover just the basics.

The important thing about label is that input would still work without a label. You can try substituting it with a div or other elements:

<form action="" method="POST">
  <div>Name:</div>
  <input type="text" id="name" name="user_name">
  <button type="submit">Submit</button>
</form>

However, you should still use label. A label provides meaningful structure to inform end-user about input. When you provide a label, it tells screen readers to expect an input. HTML is not about presentation, but presenting data. As rule of thumb, please always provide a label whenever you have an input.

  <label for="name">Name:</label>
  <input type="text" id="name" name="user_name">

The most important attribute in a label is "for" attribute.

A label's "for" references to an input's "id". Note above I have a label for "name" and the input has an id of "name". If I click on the label, it focuses on "name" input. Neat!

The important attributes here are:

label: "for" attribute links to an input element
input: "id" attribute pairs with a label
input: "name" tells form submission attribute name
input: "type" tells input type - which I will cover below.

Input type

There are many different types of input we can have. So far we've only looked at the most basic input type: "text". I will not cover every single one of them here.

Text field

<label for="Email Id">Email Id:</label><br> 
<input type="text" name="Email id" id="Email id">

Password field:

<label for="user-password">Password:</label><br> 
<input type="password" name="user-pwd" id="user-password">

Radio button:

<input type="radio" name="gender" id="male"> 
<label for="male">Male</label><br> 
<input type="radio" name="gender" id="female"> 
<label for="female">Female</label>

Textarea

<label for="Description">Description:</label> 
<textarea rows="5" cols="50" name="Description" id="Description"></textarea>

Select boxes

<label for="country">Country:</label> 
<select name="country" id="country"> 
  <option value="India">India</option> 
  <option value="Sri Lanka">Sri Lanka</option> 
  <option value="Australia">Australia</option> 
</select>

Submit + reset buttons

  <label for="username">Username:</label> 
  <input type="text" name="username" id="Username"> 
  <input type="submit" value="Submit"> 
  <input type="reset" value="Reset">

This is not the whole list. For a comprehensive list of different inputs available, check this page out!

name is a required attribute for input field. If we have <input type="text" name="user_name">, it tells the form that we are sending "user_name" data. If we don't have "name" attribute in input, form will send nothing.

Conclusion

That's all folks. Thank you for reading this far. Hope you have better understanding of HTML forms. Now that you have more understanding how form works, I suggest looking up how it works with AJAX. Happy coding! 💻📄🤓