When researching how to write forms in HTML I see mention of the term “form control”.
In particular using Twitter Bootstrap which has classes like form-control
and control-label
.
What exactly is a “form control”?
When researching how to write forms in HTML I see mention of the term “form control”.
In particular using Twitter Bootstrap which has classes like form-control
and control-label
.
What exactly is a “form control”?
3
Answers
For Bootstrap it seems to be a styling thing: From bootstrap’s page:
Individual form controls automatically receive some global styling. All textual
<input>
,<textarea>
, and<select>
elements with.form-control
are set towidth: 100%;
by default. Wrap labels and controls in.form-group
for optimum spacing.But more broadly it seems to be more, as per @the_velour_fog ‘s comment:
it seems to be more than just a styling thing: it seems form control just refers to the individual HTML elements in a HTML form e.g. from https://html.spec.whatwg.org/multipage/forms.html; A form is a component of a Web page that has form controls, such as text fields, buttons, checkboxes, range controls, or colour pickers.
The term has very little to do with styling, though styling forms is a special art.
‘Form elements’ are the (usually interactive) controls whose values are submitted automatically with the http request that is initiated by clicking the “submit” button – even without javaScript. Most commonly this would be
button
,input
,textarea
and similar element types. MDN has this entry with hyperlinks to documentation of each type.Anything where a
value
attribute is meaningful or expected can be a form element. Thename
attribute is also important, since this is used (e.g. on the server side) as a ‘key’ for the value in the form data.The supporting elements such as
label
,fieldset
andlegend
are commonly regarded as form elements, since they exist to name and group the other form elements from the user’s point of view, although they contribute nothing to the submitted form data.There may be elements in the form which have no ‘value’ attribute (e.g. headings, hyperlinks or images), but strictly speaking, these are not ‘form elements’. They may however contribute to the form data via client-side javaScript.
And you can use form elements in something which is not a form, or which makes parameterised http requests without an explicit form element. This is very common.
A form control is a user interface control that serves as the point of connection between the user and the server. Interactions vary by control type: buttons:
button
file handling:input type="file"
menus:select
, etc. And are also grouped into categoriesControls are essentially an API of key-value pairs for pinging back and forth to the server.
W3C’s Form Section is incredibly informative in its walk through of forms, form elements, form controls, form owners, and more insight to the inner workings of the Internet’s workhorse: the humble HTML
form
.References:
Forms
HTMLFormElement
Association of Controls and Forms
XForms Glossary
Form Controls Infrastructure