HTML Forms - Basics

Back in time, when HTML was created, it had only a few elements. And those few elements were mainly concerned with presenting static information to the user, with a means of hyperlinking between documents (the reason why HTML is termed as being 'hypertext').

As time progressed, more and more elements kept on being added to HTML. Perhaps, the most important of these that completely revolutionized the potential packed in the World Wide Web were those related to obtaining user input.

Forms in HTML, as they are typically termed, can be thought of as a digital, HTML model of forms in the real world.

Think of an admission form for enrolling as a new student in a school. Or think of a form for creating a new bank account. What do you do? Enter some information in the required fields and then submit the form to a person/authority responsible for processing the form, right?

This is exactly what a form is in HTML.

An HTML form is comprised of a set of inputs, more commonly referred to as form controls. Each input, or form control, represents one aspect of information for the underlying form.

A form control is basically an interactive widget that we can use to input given information in a form. For example, a text field is a form control — we can input text into it. We'll consider many form controls throughout the rest of this unit.

Forms are a pervasive part of the web. They're in use just about everywhere! It's really hard — like really really hard — to have a website these days that doesn't use HTML forms in one way or the other.

But why are forms in such heavy use?

Well, this is because there is a heavy need of user input in building dynamic websites which are part and parcel of the modern-day web.

Today, there's no reason to believe that the web isn't comprised of mostly dynamic websites, some even paralleling the dynamicity and sophistication of desktop applications. Much of this, or even all of this, dynamicity is powered by HTML forms.

Searching for stuff online, logging into our favorite movie streaming service, wishing our close friends their birthday on chat — essentially, everything requires user input in one way or the other. And when we talk about user input on the web, we mean HTML forms.

With this high-level overview of what a form is in HTML, let's dive into exploring the cornerstone element — basically the entry point — in working with forms in HTML.

The <form> element is used to create a form in HTML. Sensibly, it's a container element meant to contain all the necessary form controls for retrieving given information from the user.

While there are a handful of attributes to take note of for the <form> element, the two most common and most important are:

• action — specifies the location where all the data input into the form is submitted once it's submitted by the user.
• method — specifies the HTTP method used for sending the data.

Unfortunately, both these attributes are related to concepts tied to HTTP and servers, and so we won't be going into their details, nor could we, in this course.

action basically represents a URL where all the data entered into a form is submitted. Server-side technologies are used in reading this data and then usually processing it for further use, for e.g. storing it in a database.

Similarly, method is used to specify the HTTP method which the browser uses to dispatch the HTTP request holding the entered data. The default method in case method is omitted is "get", however we can use any other valid HTTP method as we want to.

Now, even though, we won't be using action or method in this unit, and course, it's still important for us to be aware of what they do because once we get into backend development, it'll help knowing a little bit about these HTML <form> basics.

The <form> element, as stated, itself only represents a form in an HTML document — it doesn't represent the individual bits and pieces of the form. These bits and pieces are given by a multitude of form control elements in HTML, as we discuss up next.

Just like a form in real life can be made up of different pieces of information, such as input fields, checkboxes, yes/no questions, and so on, so can a form in HTML.

There are numerous elements in HTML that can be nested inside a <form> to denote a form control (form input) of some kind. Since there is a plethora of possibilities for a form control, so is there of these individual elements.

The table below lists all the possible form control elements in HTML:

Perhaps, the simplest of all is <input>. The <input> element basically represents an input field of some kind where the user can enter some data.

Next, we have <textarea> which is simply a larger, multi-line text box.

A <select> is used to create a list of options to select from, hence the name 'select.' It consists of <option>, and optionally <optgroup>, elements inside of it. We'll cover selection lists in detail in the HTML Forms — Selection Lists chapter.

Finally, we have <button>. As per its name, it represents a button in a form, an interactive element that can be clicked to get some action accomplished.

We'll explore buttons in more detail in the upcoming HTML Forms — Buttons chapter, where we'll see the multitude of ways of creating buttons in a form, the mechanics of each approach, and the different actions that can be accomplished by buttons in a form, for e.g. resetting all input fields, submitting the form, etc.

Note that it's possible to have form control elements outside of a <form> in the HTML source code. However, because they represent form controls (notice the emphasis on the word 'form'), it makes utmost sense to have them inside <form>.

No matter what form control element we use, there are two highly important aspects of it that convey the entered data into the form control to the server: name and value.

A form control's name represents the name by which the underlying data of the control is sent to the server. The value, likewise, represents the value corresponding to this name. Customarily, the name of a form control, regardless of which concrete element we use, goes in its name attribute.

The value, however, is a dynamic trait — it changes as the user enters or modifies data in a form control. We can, however, specify the initial value, also known as the default value, of a form control.

There are two ways for this: either use the value attribute for all but the <textarea> element, or leverage the content inside element in the case of <textarea> (which is a container element).

Since only <textarea> is different in its approach of providing the initial value, it's safe to say that the name and initial value of a form control element in HTML is given by its name and value attributes, respectively.

Alright, alot of theory, let's now create a simple HTML form.

The idea is to have an input field to obtain the user's name followed by a submit button to submit the form to the given action location.

Note that because we haven't yet learnt about web server technologies, we'll omit action attribute from <form> — in such a case, action defaults to the current HTML document, i.e. form data is sent to the HTML document itself.

The second one is for asking the user to select one of two programming languages and then write a nice comment (possibly multi-line) on it.

Starting with the entry point, we'll create the <form> element:

<form></form>

Inside the form, we need a simple text input field followed by a button. The text input field is given by the <input> element. And now, the type attribute of <input> comes at play.

The type attribute of the <input> element specifies the type of the input. There are more than a bunch of types capable of being represented by an <input>. To name a few, we can have password inputs, file inputs, number inputs, telephone inputs, and so on.

In this case, we need the most trivial type: a generic text box. This is given by the "text" type.

Let's define this input now:

<form>
   <input type="text">
</form>

While <input type="text"> does create the desired text box, it doesn't hold a name. As we stated earlier, a form control's name is one of the most important aspect of it — one that we must NOT omit at any cost.

In the code below, we add a name to the <input> element:

<form>
   <input type="text" name="name">
</form>

As the field represents the name of the user, the name of the field becomes...well..."name".

The final thing needed after this is a button. This is given by the <button> element. The content of the button goes inside the element:

<form>
   <input type="text" name="name">
   <button>Submit</button>
</form>

Here's what this code outputs (note that form submission is disabled deliberately here; for that, open the linked example page):

Live Example

Enter any name and then press the Enter key or manually click on the submit button. This will submit the form to the same page, updating the URL in the address bar.

For instance, before we type in the name 'Alice', here's how the URL looks:

But after we type it in and submit the form, here's how it looks then. Notice the extra bit at the end of the URL, that is, ?name=Alice:

The reason why the URL changes is because the browser sends the form data via the HTTP GET request method to the same page, which is basically the same thing as loading the given page in the browser.

In the GET method, all form data is placed in the query string of the URL denoted by the form's action, in this case the same file that contains the form (basic-form-1.html). So, when we submit the form with the name 'Alice', the ending part of the URL becomes basic-form-1.html?name=Alice. Some name data with the value Alice is sent to the location.

Of course, as stated earlier in this chapter, since basic-form-1.html is merely a static HTML file endpoint, there's nothing special that we get upon submitting the form. But if this were a real web server endpoint, we might have the name 'Alice' stored in a database, or processed for some other use case.

In this section, we'll quickly walk through some other common features of forms, particularly of form control elements.

Placeholder values

In the code above, we don't specify explicitly in the form that the input field is meant for the user's name. A simple way to do so is to use the placeholder attribute of the <input> element.

The placeholder attribute specifies a placeholder value to use for the input in case it's empty. The attribute also applies to the <textarea> element.

Consider the following augmentation of our previous HTML:

<form>
   <input type="text" name="name" placeholder="Your name">
   <button>Submit</button>
</form>

Live Example

The presence of placeholder now means that when the page loads, with an empty name field, we have the placeholder clearly labeling the purpose of the field — representing the user's name.

However, do keep in mind that placeholder isn't the best way of labeling a form input field. We don't need to go far off to reason about this.

With a placeholder, we can only make sense of a field's purpose so long as it's empty; the moment it gets some input, the placeholder goes away and we're left with making sense of the field on our own, or clearing it up in order to review the placeholder text.

The best approach to labeling form inputs is to have the label text above them, using the standard way of doing so — the <label> element. We'll cover <label> in detail in an upcoming chapter, HTML Forms — Labels, in this unit.

Disabling form controls

As we develop complex forms, with different controls depending on the interaction with and value of other controls, we'll at some point come across the need to disable a form control.

Disabling a form control means that it will be rendered but won't be interactive as a normal form control. Furthermore, a disabled form control isn't sent to the server either, even if it contains a value.

On the styling part, browsers typically grey out disabled fields to make them stand out from normal fields.

To disable a given form control element, we set the disabled attribute on it. disabled is a Boolean attribute.

In the following code, we disable the <input> element by setting disabled on it:

<form>
   <input type="text" name="name" placeholder="Your name" disabled>
   <button>Submit</button>
</form>

Live Example

With this addition to our HTML, we can no longer interact with the name field. Submitting the form also just appends a standalone ? at the end of the URL; there's no name parameter in the query string, confirming that the name field isn't sent in the dispatched request.

It's time for a quick task to revise your learning...

<form>
   <input type="text" name="name" value="Bob" placeholder="Your name" disabled>
   <button>Submit</button>
</form>