HTML Forms

Why is this important?

This workshop is important because:

Forms are an important way a web application receive user input. The proper use of forms makes it easier to develop accessible websites with a good user experience.

What are the objectives?

After this workshop, developers will be able to:

• Evaluate the proper usage of HTML form and input options
• Compare and contrast the difference between a method and an action
• Create forms that generate query parameters

Where should we be now?

Before this workshop, developers should already be able to:

• Write HTML & JavaScript
• Understand the basics of the client/server model

An Example <form> Element (Tag)

<form method="POST" action="/entries">
  <input type="text" name="title" />
  <input type="text" name="content" />
  <input type="submit" value="Create an Entry" />
</form>

Attributes

In the opening of the <form> tag you can see two attributes: method & action

• method: the HTTP verb (method) that the browser uses to submit the form.
• action: the path of the HTTP request page that processes the information submitted via the form.

A route is simply a combination of a method & action. For example GET '/page' or POST '/users' are both valid routes.

For now simply understand that it is convention for GET to be used in a request when the client wants to receive data, and for POST to be used in a request when the client wants to send data.

###Challenge: Doomed?

Create an html form that, on submit, sends the user to "hasthelargehadroncolliderdestroyedtheworldyet.com". Hint: what's the form action? Bonus: Can you change the submit button to say "Are we doomed?".

Example solution

<form action="http://hasthelargehadroncolliderdestroyedtheworldyet.com" method="GET">
  <input type="submit" value="Are we doomed!?">
</form>

Client / Server Model

Common Inputs

Field Type	HTML Code	Widget (Control)	Notes
plain text	<input type="text">		the type attribute can be omitted
password field	<input type="password">		echoes dots instead of characters
text area	<textarea></textarea>		a more customizable plain text area
checkbox	<input type="checkbox">		can be toggled on or off
radio button	<input type="radio">		can be grouped with other inputs
drop-down lists	<select><option>		check here for more info
file picker	<input type="file">		pops up an “open file” dialog
hidden field	<input type="hidden">		nothing there!
submit button	<input type="submit">		activates the form's submission (a POST request or Javascript action)

Important Attributes

All input types (including <textarea>s):

• type: the type of data that is being input (affects the "widget" that is used to display this element by the browser).
• name: the key used to describe this data in the HTTP request.
• id: the unique identifier that other HTML elements, JavaScript and CSS use to access this element in the browser.
• value: the default data that is assigned to the element.
• placeholder: not a default value, but a useful HTML5 addition of a data "prompt" for an input.
• autofocus: defaults the cursor to a specific input when the page originally loads. You can only have one autofocus on your page.
• disabled: a Boolean attribute indicating that the "widget" is not available for interaction.
• required: a Boolean attribute indicating that the field must have a value / cannot be left empty.

Radio buttons or checkboxes:

• checked: a Boolean that indicates whether the control is selected by default (is false unless).
• name: the group to which this element is connected. For radio buttons, only one element per group (or name) can be checked.
• value: the data or value that is returned for a specific group (a multi-element control), if this element is checked.

Challenge: Login Form

Create an html form with two inputs: one for a username (named "username"), the other for password (named "password") (normally you don't see your password when you type it, so make sure it's blocked out!). What happens in the URL when you click submit?

Example solution

<form>
	<input type="text" name="username" placeholder=" username..." required>
	<input type="password" password="password" placeholder="password..." required>
	<input type="submit">
</form>

Form Submission Experiments

1) Given the following HTML...

<form>
    <input name="instrument" value="bongos"> <!-- Text Field -->
    <input type="submit">                   <!-- Submit Button -->
</form>

**What endpoint/action are we submitting to?**

We did not supply a form `action`. That means that it will default to the current endpoint. In otherwords, you will refresh the current page.

**What data will be submitted to the server?**

instrument: "bongos"

**What will that data look like? How will it be formatted**

`?instrument=bongos`

2) Given the following HTML...

<form id="artist-search-form" action="https://musicbrainz.org/search" method="GET">
    <label for="query">Search by Artist</label>
    <input id="query" name="query" value="Adele">
    <input id="type" name="type" value="artist" hidden>
    <input type="submit">
</form>

**What endpoint/action are we submitting to?**

We are making a "GET" request to "https://musicbrainz.org/search".

**What data will be submitted to the server?**

artist: "Adele", type: "artist"

**What will that data look like? How will it be formatted?**

It will be in the form of a query parameter: `?query=adele&type=artist`

Form Submission

Sometimes we want to submit a form, in the background, without ever refreshing the page. This is a common pattern in modern "single page applications". How do you submit form data in the background?

When a form is submitted it triggers the submit event. We can set an event listener on the form using an element's method .addEventListener. Additionally, in order to stop the form from submitting, we have to prevent it's default behavior. Calling preventDefault will allow us to later us AJAX to submit the form data without refreshing the page!

$("#artist-search-form").addEventListener("submit", function(event) {
    event.preventDefault(); // Stops the form from submitting!
    alert("We've submitted the form!")
})

Why is .preventDefault useful?

Let's grab data from the form by using the keyword this, which refers to the element that triggered the event—aka, the form! Then let's drill down into the forms data using .querySelector to target children elements inside it.

// target the form
var artistSearchFrom = document.querySelector("#artist-search-form");
artistSearchFrom.addEventListener("submit", function(event) {
  // stop the form from submitting!
  event.preventDefault(); 
  // grab the user input
  var artist = this.querySelector("#query").value;
  var type = this.querySelector("#type").value;
  // do something with the user input
  console.log(artist, "is a", type);
});

The <label> element and placeholder attribute

We encourage you to always use the optional <label> tag with each of your form inputs.

"This is the most important element if you want to build accessible forms." — MDN

Label

<label for="password">Password:</label>
<input id="password" type="text" name="password" />

"Do not use the placeholder attribute instead of a element. Their purposes are different: the attribute describes the role of the form element; that is, it indicates what kind of information is expected, the placeholder attribute is a hint about the format the content should take. There are cases in which the placeholder attribute is never displayed to the user, so the form must be understandable without it." -MDN

Placeholder

<input type="text" name="username" placeholder="Enter a unique username...">

Make sure the label's for attribute matches the input's id attribute!

Common Validations

Form validations help to prevent users from submitting bad data to the server. They are very important to improve UX, but do not increase the security of the application.

• a missing or empty field (required)
• an email address that was missing an "@" symbol (wrong pattern)
• a password that is obiously too short (invalid length)

required attribute

Try submitting the below form without entering your name:

<form>
  <label for="colorField">What is your favorite color?</label>
  <input id="colorField" name="favColor" required>
  <button>Submit</button>
</form>

Notice the required attribute on the input. Therefore, the form will not submit until some information is entered into the field.

pattern attribute

<form>
  <label for="kindOfBob">Do you go by bob or bobert?</label>
  <input id="kindOfBob" name="bobType" pattern="bob|bobert" required>
  <button>Submit</button>
</form>

The pattern attribute allows us to specify the values we will accept. In this case only bob or bobert are acceptable.

length attribute

You may need the user to enter a specific amount of characters. Let's say you need a username to be at least 6 characters. You can use the minlength or maxlength attributes to help.

<form>
  <label for="password">What's your password?</label>
  <input id="password" type="password" name="password" minlength="8" required>
  <button>Submit</button>
</form>

Independent Practice

1) Create an html form that contains the html5 color-picker input (named "i"). When the user picks a color, let's say one with the hex code #18967A, and clicks submit, redirect them to, e.g. "https://www.wolframalpha.com/input/?i=%2318967A".

Note: the # character automatically gets converted to %23 in this context because it is a special character and not a fragment in this context.

Example solution

<form action="https://www.wolframalpha.com/input/" method="GET">
  <input type="color" name="i">
  <input type="submit" value="search">
</form>

2) Create an html form that searches github for code examples that match a specific query (q) and language (l). Use html, javascript, and ruby as the languages the user can select from a drop down menu. A search for "audio" in the language "javascript" should direct to https://github.com/search?q=audio&l=javascript.

Example solution

<form action="https://github.com/search" method="GET">
  <input type="text" name="q" placeholder="search">
  <select name="l">
    <option value="HTML">HTML</option>
    <option value="Javascript">Javascript</option>
    <option value="Ruby">Ruby</option>
  </select>
  <input type="submit" value="Search Github">
</form>

Closing Thoughts

• What is a form method and a form action?
• How do we prevent a form's submission from leaving or refreshing the current page?
• Do validations make our application more secure?

Additional Resources

MDN has a number of exhaustive resources on HTML forms and inputs. It can be a lot to absorb, so look for patterns and try to grasp the big picture.

• HTML Form Reference
• HTML Input Reference
• Native Form Widgets
• Form Validation
• Inspiration for Text Inputs