In order that you never go to W3Schools (never go there), here is a basic cheat sheet for writing simple HTML forms.
<form> Element (Tag)
MDN's section on forms. The necessary points:
<form method="POST" action="/page"> <label for="name">Page Name</label> <input id="name" type="text" name="page_name" /> <input type="submit" value="Create" /> </form>
- method: the HTTP verb (method) that the browser uses to submit the form. We use "POST" to stand in for
- action: the path of the HTTP request page that processes the information submitted via the form.
- the route: is the combination of the verb (method) and path, and must be defined on our app for this form to submit data correctly.
<label> Element (Tag)
<label>element is the formal way to define a label for an HTML form widget. This is the most important element if you want to build accessible forms." — MDN
There are two ways to use labels correctly:
<!-- Simple (nested) label example --> <label>Click me <input type="text" id="user" name="name" /> </label> <!-- Using the "for" attribute with the input's id --> <label for="user">Click me</label> <input id="user" type="text" name="name" />
for= in a label references an
id= attribute, not it's
Sometimes these values will be the same, but
for= goes with
name= is the key of the
value when it arrives at the server.
_method (Method-Overriding) for REST
Because the arbitrary and decrepit owners of the HTML spec refuse to accept the thoughtful and
far-sighted designs of the HTTP spec, they have not created an HTML format for natively sending
any requests other than
<a> (anchor) tags) and
In order to implement RESTful behavior (semantic HTTP, ie Web Services), we must use a workaround
<form method="POST" action="/page"> <input type="hidden" name="_method" value="PUT" /> ... </form>
We use a hidden input with an attribute
name="_method", and then set the value as the HTTP verb we wish to use.
HTML's Go-To Inputs
|Field Type||HTML Code||Widget (Control)||Notes|
||the type attribute can be omitted|
||echoes dots instead of characters|
||a more customizable plain text area|
||can be toggled on or off|
||can be grouped with other inputs|
||check here for more info|
||pops up an “open file” dialog|
||activates the form's submission
All input types (including
type: the type of data that is being input (affects the "widget" that is used to display this element by the browser).
name: the key used to describe this data in the HTTP request.
value: the default data that is assigned to the element.
placeholder: not a default value, but a useful HTML5 addition of a data "prompt" for an input.
disabled: a Boolean attribute indicating that the "widget" is not available for interaction.
Radio buttons or checkboxes:
checked: a Boolean that indicates whether the control is selected by default (is false unless).
name: the group to which this element is connected. For radio buttons, only one element per group (or name) can be checked.
value: the data or value that is returned for a specific group (a multi-element control), if this element is checked.
HTML5 Input types and Tags
HTML5 has included a greater number of really useful inputs! You can find them at a great place to go to get HTML help: Dive In To HTML5.