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 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
Are you intimidated by Git? Can’t figure out merge vs rebase? Are you afraid of screwing up something any time you have to do something in Git? Do you rely on ChatGPT or random people’s answer on StackOverflow to fix your problems? Your coworkers are tired of explaining Git to you all the time? Git is something we all need to use, but few of us really master it. I created this course to improve your Git (and GitHub) knowledge at a radical level. Launching May 21, 2024. Join the waiting list!