HTML Forms

Let’s learn about HTML form controls and form elements.

We'll cover the following

The web browser needs to render a user interface (UI) for user-interactive web applications. The a software application’s UI operates much like a form. The special elements for data input, data output, and user actions are called form controls or UI widgets.

What is a form element?

In HTML, a form element is a section of a web page consisting of block elements that contain form controls and labels on those controls. Users complete a form by entering text into input fields and by selecting items from choice controls, including dropdown selection lists, radio button groups, and checkbox groups. A completed form is submitted when the “Submit” button is clicked. When a user submits a form, it’s normally sent to a web server using either the HTTP GET method or the HTTP POST method.

The standard encoding for the form is URL encoding. It’s represented by the Internet media type application/x-www-form-urlencoded. In this encoding, spaces become plus signs, and any other reserved characters become encoded as a percent sign and hexadecimal digits, as defined in RFC 1738.

Form control

Each form control has both an initial value and a current value, both of which are strings. The initial value is specified with the control element’s value attribute, except for the initial value of a textarea element, which is given by its initial contents.

The control’s current value is first set to the initial value. Thereafter, the control’s current value may be modified through user interaction or scripts. When a form is submitted for processing, some controls have their name paired with their current value and these pairs are submitted with the form.

Labels are associated with a control by including the control as a child element within a label element (implicit labels), or by giving the control an id value and referencing this ID for an attribute of the label element (explicit labels).

In the simple user interfaces of our “Getting Started” applications, we only need four types of form controls:

  1. Single-line input fields created with an <input name="..."/> element.
  2. Single-line output fields created with an <output name="..."/> element.
  3. Push buttons created with a <button type="button">...</button> element.
  4. Dropdown selection lists created with a select element of the following form:

Get hands-on with 1200+ tech skills courses.