Forms: Giving Submit Its Actual Meaning

Name and Email exist, but pressing Enter or clicking near them does nothing. Neither field belongs to anything yet. This lesson wraps them in a real form, and gives the word submit its actual meaning.

The concept

Here is your page as it stands. Run it:

Here is a field and a button, sitting next to each other with nothing connecting them. Run it, then click Send:

Nothing happens. The button has nowhere to send anything, because there is no form for it to belong to. Now the same two pieces, wrapped. Run it, then click Send:

A message appears in the console, the dark panel labeled CONSOLE under the preview. Your field's value is reported back. That is a real submission, caught safely before it goes anywhere. <form> did not change how anything looks. It grouped the field and the button into one unit, so clicking Send now means something.

The syntax

<form>
  <label for="name">Name</label>
  <input type="text" id="name" name="name" />
  <button>Send</button>
</form>

<form> wraps a set of fields into one submittable unit. <button> inside a form defaults to type="submit", so clicking it, or pressing Enter inside any field in the form, triggers submission. name is new here: it is the key each value is submitted under, separate from id. id is what a label's for matches. name is what the data is called once it is sent. They often share the same value, for convenience, but they are answering two different questions.

Once that Email field sits inside a form, type="email" also earns a visible check. Type something like myemail with no @, then click Send: the browser shows a small message on the field and refuses to submit. That is the first place the browser visibly checks your work before anything else happens.

On a real, deployed page, submitting sends this data to wherever the form is set up to receive it. By default, it also reloads the page to show the result. This sandbox catches that moment and reports it to you instead. You get to see exactly what would have been sent, without actually leaving the page.

A minimal working example

<form>
  <label for="name">Name</label>
  <input type="text" id="name" name="name" />
 
  <label for="email">Email</label>
  <input type="email" id="email" name="email" />
 
  <button>Send</button>
</form>

Two labeled, named fields, and one button that means something now.

Common mistakes

A field with no name. You add an <input>, give it an id for the label to bind to, and stop there. It looks completely normal on screen and even accepts typed text. When the form submits, that field's value is left out entirely, because nothing told the browser what to call it.

A second button with no explicit type. You add a button for something else inside the same form, maybe to clear a field, and give it no type. Clicking it submits the whole form, because every button inside a form defaults to type="submit" unless told otherwise. A button that is not meant to submit needs type="button" said explicitly.

Assuming nothing happens without JavaScript. You leave your page with no <script> anywhere, expecting a click on Send to do nothing at all. You click it anyway, and the console, the dark panel labeled CONSOLE under the preview, still shows your submitted data. <form> and <button> alone already trigger a real submission. JavaScript's job, later, is customizing what happens next, not making submission possible in the first place.

Try it yourself

Name and Email exist, but nothing connects them to anything. Make them real. After each Run, scroll the preview to Contact if you do not see the fields yet. The header and About sit above them, so the form can land below the fold.

1. Run the starting code below. Scroll the preview to Contact if you do not see it yet. Confirm the two fields do nothing when you press Enter inside them.
2. Wrap both label-and-input pairs in a <form>.
3. Give each input a name attribute: name="name" on the Name field, name="email" on the Email field.
4. Add a <button>Send</button> at the end of the form.
5. Run it. Scroll to Contact. Fill in both fields with real-looking values (the email needs an @), and click Send. Confirm the console, the dark panel labeled CONSOLE under the preview, shows both values.
6. Break it on purpose: delete name="email" from the email input, leaving its id and label binding in place. Run it, scroll to Contact, fill in both fields again, and click Send. Confirm the console message no longer includes the email value, even though the field still looks completely normal on screen. Put the name back.

Contact can now actually send data: labeled, bound, named, and wrapped in a form with a working submit button. Every lesson in this act added exactly one piece, from a single labeled heading to a working form. Your page is structurally complete.