HTML form submission visualiser

This page does not send anything to a server. When you submit the form, JavaScript prevents navigation and asks the browser to construct the FormData that would normally be submitted.

Hidden field

Hidden field here to provide record identification - recordId 

<input type="hidden" name="recordId" value="ABC-12345">

Users never see this field, but it is submitted like any other control. In a real form, the server usually fills in the value, such as the ID of the record being edited.

Text fields

id="full-name" connects the label. name="fullName" becomes the submitted field name.

Type something here. The control works normally, but because it has no name, it does not appear in the submitted data.

Checkboxes as separate yes/no questions

Each checkbox has its own name, so each one is a separate question. The name carries the meaning and the value is just "yes". The server checks whether each name turned up at all.

Checkboxes as one tick-all-that-apply question

Best times to contact you (tick all that apply)

All three checkboxes share name="contactTime", so together they answer one question. Here the value carries the meaning. Checked boxes create repeated entries such as contactTime=morning and contactTime=evening, which the server reads as a list.

Radio buttons

Preferred contact method

The shared name="contactMethod" creates the radio group and also becomes the submitted field name. If no radio button is selected, the group sends nothing at all.

Select elements

A multiple select can create several entries with the same name.

Textarea and number
Submit buttons

The button you use to submit can contribute its own name=value pair.

What the browser would submit

Submit the form to see the result.

FormData entries

No submission yet.

URL-encoded view

This string is URL-encoded, which is the default format for form data (enctype="application/x-www-form-urlencoded"). With method="post" the browser sends it in the body of the request. With method="get" it is added to the end of the action URL after a ?. 

No submission yet.

Request summary

Method POST
Action /example-endpoint
Encoding type application/x-www-form-urlencoded

The default. Only used with method="post", since method="get" always url-encodes into the address bar.

Key lessons

The browser submits controls by their name, not their id. The id connects the label; the name labels the data.

What gets submitted

  • Controls that have a name
  • Readonly fields
  • Hidden inputs
  • Checked checkboxes, using their value
  • The selected radio button in each group
  • Selected options in a select (every selected option in a multiple select)
  • The submit button that was used, if it has a name

What does not get submitted

  • Controls with no name
  • Disabled fields
  • Unchecked checkboxes (not even as false or no)
  • Radio buttons that are not selected
  • Options that are not selected
  • Submit buttons that were not used, and reset buttons
  • Anything at all, if the form fails validation