Forms 101: Creating a form

You create a form using the <form> HTML tag:



Inside this form you’ll have form fields, and a button to submit the form.

The simplest form field is a text input, which you create using the input tag:

  <input name="city" />

Typically an input element as a type attribute, because you can create many different kinds of inputs, as we’ll see in the unit dedicated to form fields. type="text" is the default for input fields, so you can omit it, but it’s nice to set it:

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

You can test it by creating a simple index.html file with this content:

<html lang='en'>
    <title>Form example</title>
      <input type='text' name='city' />

and opening it with the browser from your filesystem.

This is how the browser renders a form with an input field by default:

If you click the item, or press the tab key on your keyboard, the form will enter in a “focused” state, and the browser will add some visual cues to show that:

Now we can write in the field:

The data we write will be sent somewhere when you submit the form.

Lessons this unit:

0: Introduction
1: ▶︎ Creating a form
2: Submitting a form
3: Receiving the form data
4: Form validation
5: More tags useful in forms