HTML Styleguide

Audience
Contributors

IN PROGRESS

Basic Rules

• 2 spaces per indentation. No tabs.

Demonstration Code

Form Control IDs

To prevent a potential ID collision between heading anchors and control IDs, please prefix name form controls using Hungarian Notation prefixes shown below.

prefix	controls
btn	Button
chk	Checkbox
col	Color Picker
date	Date Picker
num	Number Input
rad	Radio
rng	Range Slider
sel	Dropdown Select
tel	Telephone Input
time	Time Picker
txt	Text Input (single or multi-line), Email Input
url	URL Input

example:

<form>
  <p>
    <label for="txtFullName">Full Name:</label>
    <input type="text" id="txtFullName" name="fullName" />
  </p>
  <fieldset>
    <legend>Do you like bacon?</legend>
    <p>
     <label for="radBaconYes">Yes</label>
     <input type="radio" id="radBaconYes" name="likesBacon" value="yes" selected />
    </p>
    <p>
     <label for="radBaconNo">No</label>
     <input type="radio" id="radBaconNo" name="likesBacon" value="no" disabled />
    </p>
  </fieldset>
  <p>
    <button type="submit" id="btnSubmitFeedback">Submit Feedback</button>
    <button type="clear" id="btnClearFeedback">clear</button>
  </p>
</form>

Other

TBD