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-text_field component --> <div class="form-item form-item--text"> <label for="text_field">Text field:</label> <input type="text" id="text_field" value="Example value"> <div class="form-item__description">Officiis dolorum nostrum odio dolorem et aut autem odit nostrum quisquam ut.</div> </div> <!-- END form-item-text_field component -->
<!-- START form-item-text_field_required component --> <div class="form-item"> <label for="text_field_required" class="form-item__required">Text field required:</label> <input type="text" id="text_field_required" value="Example value" aria-required="true"> <div class="form-item__description">Quo reiciendis ad aperiam</div> </div> <!-- END form-item-text_field_required component -->
Any required component e.g. a paragraph.
Required text in a span within a paragraph.
<!-- START item-required component --> <div> <h3 class="required">Any required component e.g. a heading 3</h3> <p class="required">Any required component e.g. a paragraph.</p> <p>Required text in a <span class="required">span</span> within a paragraph.</p> </div> <!-- END item-required component -->
<!-- START form-item-text_field_disabled component --> <div class="form-item"> <label for="text_field_disabled">Text field disabled:</label> <input type="text" id="text_field_disabled" disabled="disabled" value="Example value" /> <div class="form-item__description">Praesentium eum doloribus ut omnis asperiores ex consequatur maxime inventore maxime numquam</div> </div> <!-- END form-item-text_field_disabled component -->
<!-- START form-item-text_field_readonly component --> <div class="form-item"> <label for="text_field_readonly">Text field read only:</label> <input type="text" id="text_field_readonly" readonly="readonly" value="Example value" /> </div> <!-- END form-item-text_field_readonly component -->
<!-- START form-item-text_area component --> <div class="form-item form-item--textarea"> <label for="text_area">Text area:</label> <textarea id="text_area" rows="5">Example value</textarea> </div> <!-- END form-item-text_area component -->
<!-- START form-item-text_area_disabled component --> <div class="form-item"> <label for="text_area_disabled">Text area:</label> <textarea id="text_area_disabled" disabled="disabled" rows="5">Example value</textarea> </div> <!-- END form-item-text_area_disabled component -->
<!-- START form-item-select component --> <div class="form-item"> <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 -->
<!-- START form-item-select-with-input-field component --> <div class="form-item"> <label for="select_element">Select element with search:</label> <div class="form-item__select_with_input_field"> <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> <input type="submit" name="search_submit" value="Submit" title="Submit" /> </div> </div> <!-- END form-item-select-with-input-field component -->
<!-- START search component --> <div class="form-item"> <label for="search_field" class="hide-element">Search field:</label> <div class="form-item__search_field"> <input type="search" id="search_field" placeholder="Helpful placeholder text"> <input type="submit" name="search_submit" value="Submit" title="Submit"> </div> </div> <!-- END search component -->
<!-- START form-item-checkboxes_inline component --> <div class="form-item"> <fieldset class="form-item__radios form-item__radios--inline"> <legend>Radio buttons (inline):</legend> <div class="form-item__radio"> <input type="radio" name="radio_button" id="rdi_1" value="radio_1" disabled="disabled" /> <label for="rdi_1">Radio button 1 - disabled</label> </div> <div class="form-item__radio"> <input type="radio" name="radio_button" id="rdi_2" value="radio_2" /> <label for="rdi_2">Radio button 2</label> </div> <div class="form-item__radio"> <input type="radio" name="radio_button" id="rdi_3" value="radio_3" /> <label for="rdi_3">Radio button 3</label> </div> </fieldset> </div> <!-- END form-item-checkboxes_inline component -->
<!-- START form-item-radio_buttons_block component --> <div class="form-item"> <fieldset class="form-item__radios form-item__radios--block"> <legend>Radio buttons (block):</legend> <div class="form-item__radio"> <input type="radio" name="radio_button" id="rdb_1" value="radio_1" disabled="disabled" /> <label for="rdb_1">Radio button 1 - disabled</label> </div> <div class="form-item__radio"> <input type="radio" name="radio_button" id="rdb_2" value="radio_2" /> <label for="rdb_2">Radio button 2</label> </div> <div class="form-item__radio"> <input type="radio" name="radio_button" id="rdb_3" value="radio_3" /> <label for="rdb_3">Radio button 3</label> </div> </fieldset> </div> <!-- END form-item-radio_buttons_block component -->
<!-- START form-item-checkboxes_inline component --> <div class="form-item"> <fieldset class="form-item__checkboxes form-item__checkboxes--inline"> <legend>Checkboxes (inline):</legend> <div class="form-item__checkbox"> <input type="checkbox" name="checkbox_button" id="chi_1" value="checkbox_1" disabled="disabled" /> <label for="chi_1">Checkbox button 1 - disabled</label> </div> <div class="form-item__checkbox"> <input type="checkbox" name="checkbox_button" id="chi_2" value="checkbox_2" /> <label for="chi_2">Checkbox button 2</label> </div> <div class="form-item__checkbox"> <input type="checkbox" name="checkbox_button" id="chi_3" value="checkbox_3" /> <label for="chi_3">Checkbox button 3</label> </div> <div class="form-item__checkbox"> <input type="checkbox" name="checkbox_button" id="chi_4" value="checkbox_4" checked="checked" disabled="disabled" /> <label for="chi_1">Checkbox button 4 - disabled</label> </div> </fieldset> </div> <!-- END form-item-checkboxes_inline component -->
<!-- START form-item-checkboxes_block component --> <div class="form-item"> <fieldset class="form-item__checkboxes form-item__checkboxes--block"> <legend>Checkboxes (block):</legend> <div class="form-item__checkbox"> <input type="checkbox" name="checkbox_button" id="chb_1" value="checkbox_1" disabled="disabled" /> <label for="chb_1">Checkbox button 1 - disable</label> </div> <div class="form-item__checkbox"> <input type="checkbox" name="checkbox_button" id="chb_2" value="checkbox_2" /> <label for="chb_2">Checkbox button 2</label> </div> <div class="form-item__checkbox"> <input type="checkbox" name="checkbox_button" id="chb_3" value="checkbox_3" /> <label for="chb_3">Checkbox button 3</label> </div> <div class="form-item__checkbox"> <input type="checkbox" name="checkbox_button" id="chb_4" value="checkbox_4" /> <label for="chb_4">Error beatae quis modi. voluptates consequatur odit reprehenderit amet autem in non vel accusantium. id ea voluptatum in vero quam ut assumenda voluptas odit rerum</label> </div> <div class="form-item__checkbox"> <input type="checkbox" name="checkbox_button" id="chb_5" value="checkbox_5" /> <label for="chb_5">Est dolores eum sit quod soluta libero et sit culpa et omnis dicta distinctio qui. perspiciatis quia aut perspiciatis qui. possimus omnis voluptate consequatur numquam similique dicta quas aut illum laborum libero aut mollitia qui. distinctio a recusandae nisi sequi animi eveniet iste autem</label> </div> <div class="form-item__checkbox"> <input type="checkbox" name="checkbox_button" id="chb_6" value="checkbox_6" checked="checked" disabled="disabled" /> <label for="chb_6">Checkbox button 6 - disabled</label> </div> </fieldset> </div> <!-- END form-item-checkboxes_block component -->
<!-- START form-item__password component --> <div class="form-item"> <label for="password">Password:</label> <input type="password" class="form-item__password" name="password" id="password"> </div> <!-- END form-item__password component -->
<!-- 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__actions component --> <div class="form-item form-item__actions buttons"> <div class="buttons__group"> <input class="button button--primary" type="submit" value="Submit" /> <input class="button button--secondary" type="reset" value="Clear" /> </div> <div class="buttons__group"> <a href="../nojs.html" class="button" role="button">Help</a> </div> </div> <!-- END form-item__actions component -->
<!-- START form-error-text_field component --> <div class="form-item"> <label for="text_field">Text field:</label> <input type="text" id="text_field" value="Example value" class="form-item__input--error" aria-invalid="true" aria-describedBy="form-item__error_1" /> <span id="form-item__error_1" class="form-item__error-message">Praesentium assumenda perspiciatis blanditiis cum sit voluptatem voluptatibus id vitae.</span> <div class="form-item__description">Eos consequatur fugit qui</div> </div> <!-- END form-error-text_field component -->
<!-- START form-error-text_area component --> <div class="form-item"> <label for="text_area">Text area:</label> <textarea id="text_area" rows="5" class="form-item__input--error" aria-invalid="true" aria-describedBy="form-item__error_2">Example value</textarea> <span id="form-item__error_2" class="form-item__error-message">Fuga quia quis dolores unde.</span> </div> <!-- END form-error-text_field component -->
<!-- START form-error-select component --> <div class="form-item"> <label for="select_element">Select element:</label> <select id="select_element" class="form-item__input--error" aria-invalid="true" aria-describedBy="form-item__error_3"> <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> <span id="form-item__error_3" class="form-item__error-message">Corporis non suscipit recusandae reprehenderit.</span> </div> <!-- END form-error-select component -->
<!-- START form-error-radio_buttons_inline component --> <div class="form-item"> <fieldset class="form-item__radios form-item__radios--inline form-item__input--error" aria-invalid="true" aria-describedBy="form-item__error_4"> <legend>Radio buttons (inline):</legend> <div class="form-item__radio"> <input type="radio" name="radio_button" id="rdi_1" value="radio_1" /> <label for="rdi_1">Radio button 1</label> </div> <div class="form-item__radio"> <input type="radio" name="radio_button" id="rdi_2" value="radio_2" /> <label for="rdi_2">Radio button 2</label> </div> <div class="form-item__radio"> <input type="radio" name="radio_button" id="rdi_3" value="radio_3" /> <label for="rdi_3">Radio button 3</label> </div> </fieldset> <span id="form-item__error_4" class="form-item__error-message">Culpa ratione voluptatibus explicabo excepturi ut.</span> </div> <!-- END form-error-radio_buttons_inline component -->
<!-- START form-error-radio_buttons_block component --> <div class="form-item"> <fieldset class="form-item__radios form-item__radios--block form-item__input--error" aria-invalid="true" aria-describedBy="form-item__error_5"> <legend>Radio buttons (block):</legend> <div class="form-item__radio"> <input type="radio" name="radio_button" id="rdb_1" value="radio_1" /> <label for="rdb_1">Radio button 1</label> </div> <div class="form-item__radio"> <input type="radio" name="radio_button" id="rdb_2" value="radio_2" /> <label for="rdb_2">Radio button 2</label> </div> <div class="form-item__radio"> <input type="radio" name="radio_button" id="rdb_3" value="radio_3" /> <label for="rdb_3">Radio button 3</label> </div> </fieldset> <span id="form-item__error_5" class="form-item__error-message">Repellat est error qui quisquam quasi delectus itaque officia recusandae perferendis ut.</span> </div> <!-- END form-error-radio_buttons_block component -->
<!-- START form-error-checkboxes_inline component --> <div class="form-item"> <fieldset class="form-item__checkboxes form-item__checkboxes--inline form-item__input--error" aria-invalid="true" aria-describedBy="form-item__error_7"> <legend>Checkboxes (inline):</legend> <div class="form-item__checkbox"> <input type="checkbox" name="checkbox_button" id="chi_1" value="checkbox_1" /> <label for="chi_1">Checkbox button 1</label> </div> <div class="form-item__checkbox"> <input type="checkbox" name="checkbox_button" id="chi_2" value="checkbox_2" /> <label for="chi_2">Checkbox button 2</label> </div> <div class="form-item__checkbox"> <input type="checkbox" name="checkbox_button" id="chi_3" value="checkbox_3" /> <label for="chi_3">Checkbox button 3</label> </div> </fieldset> <span id="form-item__error_7" class="form-item__error-message">Ipsum quia corrupti excepturi.</span> </div> <!-- END form-error-checkboxes_inline component -->
<!-- START form-error-checkboxes_block component --> <div class="form-item"> <fieldset class="form-item__checkboxes form-item__checkboxes--block form-item__input--error" aria-invalid="true" aria-describedBy="form-item__error_8"> <legend>Checkboxes (block):</legend> <div class="form-item__checkbox"> <input type="checkbox" name="checkbox_button" id="chb_1" value="checkbox_1" /> <label for="chb_1">Checkbox button 1</label> </div> <div class="form-item__checkbox"> <input type="checkbox" name="checkbox_button" id="chb_2" value="checkbox_2" /> <label for="chb_2">Checkbox button 2</label> </div> <div class="form-item__checkbox"> <input type="checkbox" name="checkbox_button" id="chb_3" value="checkbox_3" /> <label for="chb_3">Checkbox button 3</label> </div> <div class="form-item__checkbox"> <input type="checkbox" name="checkbox_button" id="chb_4" value="checkbox_4" /> <label for="chb_4">Architecto dolorum praesentium nemo aliquid voluptatum voluptas. qui corrupti voluptatum facilis deleniti vel repellendus. reprehenderit explicabo eveniet veniam sit. et id voluptatem voluptatem repudiandae ad. et rerum incidunt ex aut dolorum delectus. nobis quod atque accusantium porro dolore ipsam enim praesentium nesciunt voluptate nemo</label> </div> <div class="form-item__checkbox"> <input type="checkbox" name="checkbox_button" id="chb_5" value="checkbox_5" /> <label for="chb_5">Vel ut sequi quasi dicta alias voluptatem autem sit illum. doloribus corrupti quia autem et omnis qui consequatur omnis sit atque quia ullam iusto perferendis. aut et laudantium quos corporis non cum amet asperiores a. est non quisquam voluptatem facere. quia veritatis ut aut quis corrupti quas in voluptatem laboriosam. non aliquam iste eum tempore totam omnis nemo assumenda corrupti</label> </div> </fieldset> <span id="form-item__error_8" class="form-item__error-message">Hic voluptas dolores fugit quia consequuntur hic quae voluptas dolore iure praesentium consequatur omnis nesciunt.</span> </div> <!-- END form-error-checkboxes_block component -->
<!-- START form-error-password component --> <div class="form-item"> <label for="password">Password:</label><br /> <input type="password" class="password form-item__input--error" name="password" id="password" aria-invalid="true" aria-describedBy="form-item__error_6" /> <span id="form-item__error_6" class="form-item__error-message">Molestiae molestias rerum modi laudantium ad et.</span> </div> <!-- END form-error-password component -->