HTML forms and input tags cheatsheet. All you need to know to write every HTML form possible, including links to good resources on HTML and the new HTML5 form and input options...

html_forms_cheatsheet.md

HTML Forms

In order that you never go to W3Schools (never go there), here is a basic cheat sheet for writing simple HTML forms.

This is culled from a few sources, the most important being MDN. MDN (the Mozilla Developer Network) should be seen as "the docs" when you are having an issue with HTML.

The <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>

<form>'s Attributes

• method: the HTTP verb (method) that the browser uses to submit the form. We use "POST" to stand in for POST, PUT and DELETE.
• 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.

The <label> Element (Tag)

The <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" />

<label>'s Attributes

Very important! for= in a label references an <input>s id= attribute, not it's name= attribute! Sometimes these values will be the same, but for= goes with id=. name= is the key of the <input>'s value when it arrives at the server.

Using _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 GETs (via <a> (anchor) tags) and POSTs (via <form> tags).

In order to implement RESTful behavior (semantic HTTP, ie Web Services), we must use a workaround to send PUT (or PATCH) and DELETE requests:

<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
plain text	<input type="text">		the type attribute can be omitted
password field	<input type="password">		echoes dots instead of characters
text area	<textarea></textarea>		a more customizable plain text area
checkbox	<input type="checkbox">		can be toggled on or off
radio button	<input type="radio">		can be grouped with other inputs
drop-down lists	<select><option>		check here for more info
file picker	<input type="file">		pops up an “open file” dialog
hidden field	<input type="hidden">		nothing there!
submit button	<input type="submit">		activates the form's submission (a POST request or Javascript action)

Important Attributes

All input types (including <textarea>s):

• 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.
• id: the unique identifier that other HTML elements, JavaScript and CSS use to access this element in the browser.
• 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.

Thank you! very useful.