Form fields: Form submit field

In the Forms 101 unit I didn’t use a submit field, we relied on pressing the enter key while focused on the input field to submit the form.

But usually forms have a button to submit the data.

You create one using:

<input type="submit" />

Here’s how it appears:

<form method='post'>
  <input type='text' name='city' />
  <input type='submit' />
</form>

Now you can submit the form by clicking that element.

The value attribute lets you change “Submit” to something else:

<input type='submit' value='Go' />

You can also use the button HTML tag to achieve the same effect, using type='submit'. This time the button text is inside the opening and closing tags:

<button type='submit'>Go</button>

It’s a good time to also introduce a button to clear the form:

<input type='reset' />

Lessons in this unit:

0: Introduction
1: ▶︎ Form submit field
2: Specialized input fields
3: Checkboxes
4: Radio buttons
5: File input fields
6: Textarea
7: Select
8: Autocompleting form fields