Text Fields
The description for this form field.
The description for this form field.
The description for this form field.
The description for this form field.
HTML
<div class="form-item form-item--textfield">
<label class="form-item__label" for="edit-textfield">Textfield</label>
<input type="text" autocapitalize="off" autocorrect="off" id="edit-textfield" name="textfield" size="60" maxlength="128" class="form-text">
<div class="form-item__description">The description for this form field.</div>
</div>
<div class="form-item form-item--textfield is-required">
<label class="form-item__label" for="edit-required-textfield">Required <span class="form-item__required-marker"><span class="element-invisible">This field is required.</span></span></label>
<input type="text" autocapitalize="off" autocorrect="off" id="edit-required-textfield" name="required-textfield" size="60" maxlength="128" class="form-text is-required">
<div class="form-item__description">The description for this form field.</div>
</div>
<div class="form-item form-item--password">
<label class="form-item__label" for="edit-password">Password </label>
<input type="password" autocapitalize="off" autocorrect="off" id="edit-password" name="password" size="60" maxlength="128" class="form-text">
<div class="form-item__description">The description for this form field.</div>
</div>
<div class="form-item form-item--textarea">
<label class="form-item__label" for="edit-textarea">Textarea </label>
<textarea id="edit-textarea" name="textarea" cols="60" rows="5" class="form-textarea"></textarea>
<div class="form-item__description">The description for this form field.</div>
</div>
Select Menu
The description for this form field.
The description for this form field.
HTML
<div class="form-item form-item--select">
<label class="form-item__label" for="edit-select">Select</label>
<select id="edit-select" name="select" class="form-select">
<option>Option One</option>
<option>Option Two</option>
<option>Option Three</option>
<option>Option Four</option>
<option>Option Five</option>
<option>Option Six</option>
</select>
<div class="form-item__description">The description for this form field.</div>
</div>
<div class="form-item form-item--select">
<label class="form-item__label" for="edit-select">Select with groups</label>
<select id="edit-select" name="select" class="form-select">
<optgroup label="Group One">
<option>Option One</option>
<option>Option Two</option>
<option>Option Three</option>
</optgroup>
<optgroup label="Group Two">
<option>Option Four</option>
<option>Option Five</option>
<option>Option Six</option>
</optgroup>
</select>
<div class="form-item__description">The description for this form field.</div>
</div>
Checkbox
The description for this form field.
The description for this form field.
HTML
<div class="form-item form-item--checkbox">
<input type="checkbox" id="edit-checkbox" name="checkbox" value="1" checked="checked" class="form-checkbox">
<label class="form-item__label" for="edit-checkbox">Checkbox</label>
<div class="form-item__description">The description for this form field.</div>
</div>
<div class="form-item form-item--checkboxes">
<fieldset id="edit-checkboxes" class="form-item__fieldset">
<legend class="form-item__legend">Checkboxes </legend>
<div class="form-item form-item--checkbox">
<input type="checkbox" id="edit-checkboxes-a" name="checkboxes-a" class="form-checkbox"> <label class="form-item__label" for="edit-checkboxes-a">Choice A </label>
</div>
<div class="form-item form-item--checkbox">
<input type="checkbox" id="edit-checkboxes-b" name="checkboxes-b" class="form-checkbox"> <label class="form-item__label" for="edit-checkboxes-b">Choice B </label>
</div>
<div class="form-item form-item--checkbox">
<input type="checkbox" id="edit-checkboxes-c" name="checkboxes-c" class="form-checkbox"> <label class="form-item__label" for="edit-checkboxes-c">Choice C </label>
</div>
<div class="form-item form-item--checkbox">
<input type="checkbox" id="edit-checkboxes-d" name="checkboxes-d" class="form-checkbox"> <label class="form-item__label" for="edit-checkboxes-d">Choice D </label>
</div>
</fieldset>
<div class="form-item__description">The description for this form field.</div>
</div>
Radio Buttons
The description for this form field.
HTML
<div class="form-item form-item--radios">
<fieldset id="edit-radios" class="form-item__fieldset">
<legend class="form-item__legend">Radios </legend>
<div class="form-item form-item--radio form-item--radios">
<input type="radio" id="edit-radios-one" name="radios" class="form-radio"> <label class="form-item__label" for="edit-radios-one">Option One </label>
</div>
<div class="form-item form-item--radio form-item--radios">
<input type="radio" id="edit-radios-two" name="radios" class="form-radio"> <label class="form-item__label" for="edit-radios-two">Option Two </label>
</div>
<div class="form-item form-item--radio form-item--radios">
<input type="radio" id="edit-radios-three" name="radios" class="form-radio"> <label class="form-item__label" for="edit-radios-three">Option Three </label>
</div>
<div class="form-item form-item--radio form-item--radios">
<input type="radio" id="edit-radios-four" name="radios" class="form-radio"> <label class="form-item__label" for="edit-radiosfour">Option Four </label>
</div>
</fieldset>
<div class="form-item__description">The description for this form field.</div>
</div>
Date
The description for this form field.
HTML
<div class="form-item form-item--date">
<fieldset id="edit-date" class="form-item__fieldset">
<legend class="form-item__legend">Date </legend>
<div class="form-item form-item--select form-item--date-month">
<label class="form-item__label element-invisible" for="edit-date-month">Month </label>
<select id="edit-date-month" name="date[month]" class="form-select">
<option value="1">Jan</option>
<option value="2">Feb</option>
<option value="3">Mar</option>
<option value="4">Apr</option>
<option value="5">May</option>
<option value="6">Jun</option>
<option value="7">Jul</option>
<option value="8">Aug</option>
<option value="9">Sep</option>
<option value="10">Oct</option>
<option value="11">Nov</option>
<option value="12">Dec</option>
</select>
</div>
<div class="form-item form-item--select form-item--date-day">
<label class="form-item__label element-invisible" for="edit-date-day">Day </label>
<select id="edit-date-day" name="date[day]" class="form-select">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
</div>
<div class="form-item form-item--select form-item--date-year">
<label class="form-item__label element-invisible" for="edit-date-year">Year </label>
<select id="edit-date-year" name="date[year]" class="form-select">
<option value="2000">2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
<option value="2005">2005</option>
<option value="2006">2006</option>
<option value="2007">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
</select>
</div>
</fieldset>
<div class="form-item__description">The description for this form field.</div>
</div>