Find out your options and start planning your next steps
Information and advice about University, courses and apprenticeships
All the information you need to take your education to the next level and beyond
Not sure if uni is for you? Find out what else you can do
Helping you find your dream career
Browse subjects, locations and universities
IDs used are for example only: they do not affect styling, so use IDs which are appropriate for the application you are building.
<!-- START form-item-postal-address component --> <div class="form-item form-item--postal-address"> <fieldset> <legend>Address:</legend> <!-- NB Fields are not definitive: they may change depending on not only the use case but also the country. --> <!-- Class names based on http://schema.org/PostalAddress --> <div class="form-group form-group--postal-address__street-address"> <div class="form-item form-item--subfield form-item--postal-address__street-address"> <label for="text_field_street-address1" class="required">Address line 1</label> <input type="text" id="text_field_street-address1" /> </div> <div class="form-item form-item--subfield form-item--postal-address__street-address"> <label for="text_field_street-address2">Address line 2</label> <input type="text" id="text_field_street-address2" /> </div> </div> <div class="form-group form-group--postal-address__area"> <div class="form-item form-item--subfield form-item--postal-address__address-region "> <label for="text_field_region">Region</label> <input type="text" id="text_field_region" /> </div> <div class="form-item form-item--subfield form-item--postal-address__postal-code"> <label for="text_field_postcode" class="required">Postcode</label> <input type="text" id="text_field_postcode" /> </div> <div class="form-item form-item--subfield form-item--postal-address__address-country"> <label for="text_field_country" class="required">Country</label> <input type="text" id="text_field_country" /> </div> </div> </fieldset> </div> <!-- END form-item-postal-address component -->
<!-- START form-item-date component --> <div class="form-item"> <fieldset> <legend>Date of birth</legend> <div class="content-columns content-columns--three-columns content-columns--fixed-columns"> <div class="content-columns__column"> <div class="form-item form-item--subfield"> <label for="day">Day</label> <select name="day" id="day"> <option value="-1" selected="selected" disabled="disabled">DD</option> <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> </select> </div> </div> <div class="content-columns__column"> <div class="form-item form-item--subfield"> <label for="month">Month</label> <select name="month" id="month"> <option value="-1" selected="selected" disabled="disabled">MM</option> <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> </select> </div> </div> <div class="content-columns__column"> <div class="form-item form-item--subfield"> <label for="year">Year</label> <select name="year" id="year"> <option value="-1" selected="selected" disabled="disabled">YYYY</option> <option value="2015">2015</option> <option value="2014">2014</option> <option value="2013">2013</option> <option value="2012">2012</option> <option value="2011">2011</option> <option value="2010">2010</option> <option value="2009">2009</option> <option value="2008">2008</option> <option value="2007">2007</option> <option value="2006">2006</option> <option value="2005">2005</option> <option value="2004">2004</option> <option value="2003">2003</option> <option value="2002">2002</option> <option value="2001">2001</option> <option value="2000">2000</option> <option value="1999">1999</option> <option value="1998">1998</option> <option value="1997">1997</option> <option value="1996">1996</option> <option value="1995">1995</option> <option value="1994">1994</option> <option value="1993">1993</option> <option value="1992">1992</option> <option value="1991">1991</option> <option value="1990">1990</option> <option value="1989">1989</option> <option value="1988">1988</option> <option value="1987">1987</option> <option value="1986">1986</option> <option value="1985">1985</option> <option value="1984">1984</option> <option value="1983">1983</option> <option value="1982">1982</option> <option value="1981">1981</option> <option value="1980">1980</option> <option value="1979">1979</option> <option value="1978">1978</option> <option value="1977">1977</option> <option value="1976">1976</option> <option value="1975">1975</option> <option value="1974">1974</option> <option value="1973">1973</option> <option value="1972">1972</option> <option value="1971">1971</option> <option value="1970">1970</option> <option value="1969">1969</option> <option value="1968">1968</option> <option value="1967">1967</option> <option value="1966">1966</option> <option value="1965">1965</option> <option value="1964">1964</option> <option value="1963">1963</option> <option value="1962">1962</option> <option value="1961">1961</option> <option value="1960">1960</option> <option value="1959">1959</option> <option value="1958">1958</option> <option value="1957">1957</option> <option value="1956">1956</option> <option value="1955">1955</option> <option value="1954">1954</option> <option value="1953">1953</option> <option value="1952">1952</option> <option value="1951">1951</option> <option value="1950">1950</option> </select> </div> </div> </div> <div class="form-item__description">Debitis quia quas quia unde harum molestias ipsum illo rerum repellendus dolorem necessitatibus optio ut.</div> </fieldset> </div> <!-- END form-item-date component -->
<div class="form-item"> <fieldset> <legend>Random field</legend> <div class="content-columns content-columns--horizontal-padding content-columns--three-columns content-columns--fixed-columns"> <div class="content-columns__column"> <!-- START form-item-text_field component --> <div class="form-item form-item--text form-item--subfield"> <label for="text_field">Text field:</label> <input type="text" id="text_field" value="Example value"> <div class="form-item__description">Atque consequatur est occaecati ut voluptatem quis maiores sed non.</div> </div> <!-- END form-item-text_field component --> </div> <div class="content-columns__column"> <!-- START form-item-select component --> <div class="form-item form-item--subfield"> <label for="select_element">Select element:</label> <select id="select_element"> <optgroup label="Option Group 1"> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> </optgroup> <optgroup label="Option Group 2"> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> </optgroup> </select> </div> <!-- END form-item-select component --> </div> <div class="content-columns__column"> <div class="form-item form-item--subfield"> <fieldset class="form-item__checkboxes form-item__checkboxes--block"> <legend>Checkboxes (block):</legend> <div class="form-item__checkbox"> <input name="checkbox_button" id="chb_1" value="checkbox_1" type="checkbox"> <label for="chb_1">Checkbox button 1</label> </div> <div class="form-item__checkbox"> <input name="checkbox_button" id="chb_2" value="checkbox_2" type="checkbox"> <label for="chb_2">Checkbox button 2</label> </div> <div class="form-item__checkbox"> <input name="checkbox_button" id="chb_3" value="checkbox_3" type="checkbox"> <label for="chb_3">Checkbox button 3</label> </div> </fieldset> </div> </div> </div> </fieldset> </div>
<div class="form-item"> <fieldset> <legend>.content-columns--three-columns</legend> <div class="content-columns content-columns--three-columns content-columns--horizontal-padding content-columns--description"> <div class="content-columns__column"> <div class="form-item form-item--subfield"> <label for="input1">.content-columns__column</label> <input type="text" placeholder="33%"> </div> </div> <div class="content-columns__column"> <div class="form-item form-item--subfield"> <label for="input2">.content-columns__column</label> <input type="text" placeholder="33%"> </div> </div> <div class="content-columns__column"> <div class="form-item form-item--subfield"> <label for="input3">.content-columns__column</label> <input type="text" placeholder="33%"> </div> </div> </div> <div class="form-item__description">Recusandae commodi doloribus nesciunt voluptatum in iste illo.</div> </fieldset> </div>