🎓 A1Learner
🔍

HTML Forms

An HTML form is an area that collects input from a visitor and sends it. Input is the information a visitor types or picks in a field.

A form with one field

The form element wraps the field. The input element makes a one-line text field.

<form>
<p>Your name</p>
<input type="text">
</form>

Add a submit control

A submit input appears as a button on the page. Clicking it sends the form.

<form>
<p>Your city</p>
<input type="text">
<input type="submit">
</form>

Two fields in one form

One form can hold many fields. Both fields here send their answers together.

<form>
<p>Your name</p>
<input type="text">
<p>Your city</p>
<input type="text">
<input type="submit">
</form>

Example

<!DOCTYPE html>
<html>
<head>
<title>Forms</title>
</head>
<body>
<h1>Join Our Walk</h1>
<p>Sign up for the Saturday walk.</p>
<form>
<p>Your name</p>
<input type="text">
<p>Your town</p>
<input type="text">
<input type="submit">
</form>
</body>
</html>

Key points

  • Form element: the container that collects and sends visitor input
  • Input element: a field where a visitor types or picks a value
  • Submit control: the control that sends the form
  • A form groups fields and sends their answers together.
  • The input element is an empty element with no closing tag.

In this example, the heading and the first paragraph introduce the form. The form holds two prompt paragraphs. Each prompt sits above a text field. A submit input ends the form. A visitor types answers and clicks the submit control to send them.

Note

Pressing Enter inside a text field can also send a form.

Try it Yourself

Edit the code, then press Run.

Runs in your browser — the preview under the editor is the real result. Nothing is sent to a server. The code runner panel (right) does the same with more room.

Exercise

What does the submit control in a form do?