What are Form Control elements in HTML?

About

control form elements are elements that are used specifically inside a form.

They are used:

• to specify a key and a value.
• to layout the form
• to submit it
• or reset it

List

• field set [optional] that groups:
  • input element for the definition of a scalar value on a single line such as:
    • basic primitive: text, boolean, number, …
    • a little bit more complex: such as file, email, color, date, …
• textarea for the definition of a text on multiple-line
• select element that create a list where a single or multiple choice can be made where
  • optgroup groups [optionally] the option
    • option defines the values
• datalist to defines sets of values that may be used in a input and shown as a list.
• label [optional] label/named each element
• a submit button
• a reset button
• an output element [optional] that defines where the results / output will be shown

Successful

From a form, only successful form controls are included when the form is submited, i.e. those:

• with a name,
• not disabled (readonly are included)
• checked for radio buttons and checkboxes
• or selected one or more options within a select.

Styling

If you want to style a control, you need first to disable the platform-native styling with the appearance property set to none.

Example with a checkbox

input[type="checkbox"] {
  appearance: none;
}