Forms 101: Creating a form

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

<form>

</form>

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:

<form>
  <input name="city" />
</form>

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:

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

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

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

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 in 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