Forms and Inputs

Forms are used when you need to collect users’ data.

When you login to a website and you need to type your email and password, those fields are inputs.

An input tag can have different types and attributes. (Input tag is self closing)

<form action="">
  Enter your name:
  <input type="text" />
  <br />
  Enter your age:
  <input type="number" min="0" />
</form>

You should wrap the input tags with a form tag. We will explain more about the form tag later.

Input Types

There are many different types of input available.

The most basic one is text. You can be a bit more specific and set it to email, password, etc.

<form>
  Text
  <input type="text" />
  <br />
  Email
  <input type="email" />
  <br />
  Password
  <input type="password" />
</form>

You can set the type to number if you only want numbers to be inputted. You can set the min and max attributes.

<form>
  Number
  <input type="number" min="0" max="5" />
</form>

To input dates, you can set the type to, well, date. You can also set the min and max for dates.

<form>
  Date Picker
  <input type="date" value="2018-07-22" min="2018-01-01" max="2018-12-31" />
</form>

You can make a checkbox by setting the type to checkbox. You can also set the checked attribute to true.

<form action="">
  Checkbox
  <input type="checkbox" checked /> <!-- this is same as checked={true} -->
</form>

You can check out more input types here.

Labels

You can use the label tag <label></label> when you want to focus on the input when the user clicks on some text.

When you set the id attribute on an input tag, then put the same value as the “for” attribute on the label tag. You can click on the label and it will focus or trigger the corresponding input.

<form>
  <label for="input1">Click on me</label>
  <input type="text" id="input1" />

  <p>Or you can wrap the input inside the label</p>

  <label for="input2">
    I like Ado
    <input type="checkbox" id="input2" />
  </label>

  <p>Just make sure that id is unique.</p>
</form>

How a form works

It’s cool that you can collect data in different ways. But how do we actually get the data back to our servers?

Firstly, to submit a form, you need to add a button inside the form and set a url in the action attribute on the form.

<!-- this is a relative path -->
<form action="/handle-data">
  <!-- some inputs... -->
  <button>Submit form</button>
</form>

When you click the button, a HTTP request is sent to the url, together with all the data in the form.

A server will process the data in the backend.

You can learn more about relative and absolute paths here.

Name Attribute

But remember data is only useful when we know what field it corresponds to.

To identify an input, we can add the name attribute to the input tag.

For example, we have two text inputs below, one with name “name”, and the other one with name “job”.

<form action="/handle-data">
  <input type="text" name="name" />
  <input type="text" name="job" />
  <button>Submit</button>
</form>

(Suppose we enter Sam for name and none for job)

After the user submits the form, the body of the request may look something like this.

{
  "name": "Sam",
  "job": "none"
}

Try it out for yourself!