Form element

Social networks, dating sites, fan pages, online shops: there are many exciting opportunities to share your precious data with the world and get a sense of belonging. What could be more familiar than filling out yet another online form? You probably filled a few dozen of them in your lifetime, but have you ever created one? This topic will lead you through the process of creating an HTML form.

What are forms?

Forms are designed to send data from a web page to a server that can process it. With the help of forms, we can make purchases, send messages, register on various websites, and so on. Here's a typical login form:

To create a form like this, use the paired tag with a rather self-explanatory name <form>. The elements for information input are placed inside that tag:

<form>
  <label for="email">Email:</label>
  <input type="email" name="email" id="email">
  <label for="password">Password:</label>
  <input name="password" type="password" id="password">
  <button type="submit">Login</button>
</form>

In this example, we used two input elements for email, password, and a button to log in. You could use input elements without the label tag; however, it's good practice to include the latter for two reasons. First, it improves accessibility as screen-readers read out the label associated with the field. This means that people with reading disorders will know what info to put into a specific field. Secondly, it improves user experience because when you click on the label, the input automatically gets focus:

Method and action

When the form is filled out, you either want to send this info to the server or, on the contrary, request some information from the server. To accomplish these, the method and action attributes come into play:

• action specifies the address of the program or document that processes the data of the form;

• method informs the server of the request method (GET or POST).

The get and post methods are used to submit data from the form to a server. If the method attribute is not specified, get will be used by default.

The get method is designed to obtain the required information and pass the data in the address bar, so it is normally used in search forms. The post method is used when you need to send a lot of data to the server: for example, when databases need to be populated, in forums and mail services, or for sending files.

Our login form should use the post method because we want to send the user's data to the backend, verify it, and, if everything is fine, grant access to the resource. Moreover, this method is used when sending sensitive data. Below you can see what it should look like. The action attribute specifies a resource that will handle our post request. It's a dummy link, just for illustration purposes:

 <form method="post" action="https://myfriends.com/user">
    <label for="email">Email:</label>
    <input type="email" name="email" id="email">
    <label for="password">Password:</label>
    <input name="password" type="password" id="password">
    <button type="submit">Login</button>
</form>

The button is of submit type, which means that if we click it, it will look at the method and action attributes and submit the form.

To request something from the server, use the get method:

<form method="get" action="https://beautifulplaces.com/search">
    <label for="location">Search location</label>
    <input id="location" type="search" name="location" placeholder="Search..">
    <button type="submit">Go</button>
</form>

If you'd like to learn more about the differences between the two methods, refer to this article.

Form attributes

Apart from method and action, other attributes may come in handy in different scenarios. Let's briefly go over them.

• target⁣ tells the browser where to load the response after submitting it. Typical values for this are _blank, meaning to load the response into the new tab, and _self⁣ — to load the response into the same browser tab:

<form>
   <!-- inputs here -->
</form>

• name⁣, as the name suggests, is used to name the form. This can be useful when you have a lot of forms and need a way to reference them from a JS file:

<form name="loginForm">
  <!-- inputs here -->
</form>

• novalidate⁣ is a boolean value that, when present, resets all validations required by the inputs. For example, the input with type email will require a standard email format (ex. [email protected]) when submitting the data. If you want to avoid this behavior and let users type in any text, use novalidate:

<form novalidate>
  <!-- inputs here -->
</form>

Conclusion

In this topic, you learned where forms are used and how to create them. Two main methods used with forms are get and post: the former retrieves the data from the server, and the latter sends the data to the server. Apart from common attributes like method and action, there are additional attributes, including name, target and novalidate.