7 #permalink Forms
Common elements for form creation and structuring
buttons/css/button.css, line 1
7.1 #permalink .button
Allows to style <a> tags, <button> elements. Please note that since HTML5 you should use only <button> elements with a appropriate type="button", type="submit" or type="reset" attribute instead of the older <input type="button" ... > element. If you use the button class to style a <a> tag like a button, do not forget to add a role="button" attribute for screenreaders. To indicate the button is disabled, you should add the disabled attribute to the element you want to disable
Markup
<button type="button" class="button {modifiers}">A button</button>
<a href="#" role="button" class="button {modifiers}">A button</a>buttons/css/button.css, line 11
7.2 #permalink .textinput
Basic styles for all user controls which give users the possibility to write text. This makes this class suitable to use it for. Please note that for accessibility reasons you should always provide a <label> element which belongs to the formcontrol. To disable the element, please add the disabled attribute to it.
Markup
<input type="text" name="text" class="textinput {modifiers}">
<input type="password" name="password" class="textinput {modifiers}">
<textarea name="area" class="textinput {modifiers}"></textarea>formcontrols/css/textinput.css, line 1
7.3 #permalink .checkbox
Allows to include styled checkbox formcontrols into the website. To disable the whole element, please add the disabled attribute to the <input> element inside.
Markup
<div class="checkbox">
<input type="checkbox" name="checkbox" id="chk1" value="">
<label for="chk1" class="label">A checkbox</label>
</div>formcontrols/css/checkbox.css, line 1
7.4 #permalink .radio
Allows to include styled radio formcontrols into the website. To disable the whole element, please add the disabled attribute to the <input> element inside.
Markup
<div class="radio">
<input type="radio" name="radio" id="rdo1" value="">
<label for="rdo1" class="label">A radio</label>
</div>formcontrols/css/radio.css, line 1
7.5 #permalink .select
Allows to add styled <select> formcontrols (a.k.a. Dropdowns) to forms. To disable the <select> element, please do not forget to add a disabled attribute to it.
Markup
<select class="select {modifiers}" name="select">
<option value="1">First item</option>
<option value="2">Second item</option>
</select>formcontrols/css/select.css, line 1
7.6 #permalink .form
Adds basic formattings to forms.
Markup
<form class="form">
Form content goes here
</form>form/css/form.css, line 1
7.7 #permalink .form_group
A simple wrapper for grouping form elements together, can be used to group for example radio and checkbox elements.
Markup
<fieldset class="form_group">
But elements to group in here
</fieldset>
<div class="form_group">
But elements to group in here
</div>form/css/formgroup.css, line 1