HTML forms 101
Tags: html, form, input, label
Published: 2020-02-27 20:07:25

---
title: HTML forms 101
published: true
description: Basic HTML forms
tags: html, form, input, label
canonical_url: https://irian.to/blogs/html-forms-101
---
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](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form), 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](https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/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](https://developers.google.com/web/tools/chrome-devtools/network#filter) for more detail).*



![HTML Post request](https://dev-to-uploads.s3.amazonaws.com/i/2jdn7i3e1cn3s5lbu5r5.png)


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](https://stackoverflow.com/questions/25983603/how-to-submit-html-form-without-redirection/30666118).

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](https://www.coolfields.co.uk/2011/04/accessible-forms-should-every-input-have-a-label/) to expect an input. HTML is [not about presentation](https://stackoverflow.com/questions/7636502/why-use-label), 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](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) 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! 💻📄🤓

# Resources
- [How can I debug HTTP post in chrome](https://stackoverflow.com/questions/15603561/how-can-i-debug-a-http-post-in-chrome)
- [Your first form](https://developer.mozilla.org/en-US/docs/Learn/Forms/Your_first_form)
- [HTML design form](https://www.geeksforgeeks.org/html-design-form/)
- [HTML5 input types](https://developer.mozilla.org/en-US/docs/Learn/Forms/HTML5_input_types)
- [Sending and retrieving form data](https://developer.mozilla.org/en-US/docs/Learn/Forms/Sending_and_retrieving_form_data)