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">Sint asperiores facere molestiae aperiam quia.</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" required aria-required="true"> <div class="form-item__description">Perspiciatis ut ipsa impedit et nam veniam</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">Beatae mollitia nesciunt ab praesentium nesciunt et in minus eveniet sit voluptatem libero quo quisquam</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-radio-button_no_label component --> <p> <div class="form-item--radio-no-label"> <input type="radio" name="checkbox_no_label" id="rdnl_1" value="rdnl_1" /> <label for="rdnl_1">This label is hidden</label> </div> </p> <p> <div class="form-item--radio-no-label"> <input type="radio" name="checkbox_no_label" id="rdnl_2" value="rdnl_2" /> <label for="rdnl_2">This label is hidden</label> </div> </p> <!-- END form-item-radio-button_no_label component -->
<!-- START form-item-radio-button_no_label_disabled component --> <div class="form-item--radio-no-label"> <input type="radio" name="checkbox_no_label_disabled" id="rdnl_3" value="rdnl_3" disabled="disabled" /> <label for="rdnl_3">This label is hidden</label> </div> <!-- END form-item-radio-button_no_label_disabled 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">Sit adipisci et totam aut est et consectetur alias inventore ut libero molestiae perspiciatis. at consequuntur amet culpa quisquam animi aliquam quia. sint in quidem et fuga voluptas dolor numquam alias hic dolore</label> </div> <div class="form-item__checkbox"> <input type="checkbox" name="checkbox_button" id="chb_5" value="checkbox_5" /> <label for="chb_5">Et cumque et totam in accusamus similique et omnis quibusdam aut excepturi non. repellat ratione voluptas reprehenderit incidunt perspiciatis. sit hic nihil sed mollitia. veritatis soluta ut aut alias voluptas animi soluta recusandae occaecati hic explicabo consectetur rerum debitis. nobis et autem dolorem quis ea accusamus neque repellendus nesciunt facere quisquam temporibus dolorem. ipsum quas veniam optio. et aut sint aut consectetur</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-checkboxes_no_label component --> <div class="form-item--checkbox-no-label"> <input type="checkbox" name="checkbox_no_label" id="chnl_1" value="chnl_1" /> <label for="chnl_1">This label is hidden</label> </div> <!-- END form-item-checkboxes_no_label component -->
<!-- START form-item-checkboxes_no_label_disabled component --> <div class="form-item--checkbox-no-label"> <input type="checkbox" name="checkbox_no_label_disabled" id="chnl_2" value="chnl_2" disabled="disabled" /> <label for="chnl_2">This label is hidden</label> </div> <!-- END form-item-checkboxes_no_label_disabled 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--password-toggle component --> <div class="form-item"> <label for="password">Password:</label> <input type="password" class="form-item__password" name="password-toggle" id="password-toggle" data-password-toggle="true" value="You can see me" /> </div> <div class="form-item"> <label for="password">Password confirm:</label> <input type="password" class="form-item__password" name="password-confirm-toggle" id="password-confirm-toggle" data-password-toggle-show-text="Show password" data-password-toggle-hide-text="Hide password" data-password-toggle="true" value="You can see me" /> </div> <!-- END form-item--password-toggle 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-item--plus_minus component --> <div class="content-columns content-columns--three-columns content-columns--padding"> <div class="content-columns__column"> <div class="form-item"> <label for="select_element">Select element</label> <select id="select_element"> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> </select> </div> </div> <div class="content-columns__column"> <div class="form-item"> <label for="select_element">Select element</label> <select id="select_element"> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> </select> </div> </div> <div class="content-columns__column"> <div class="form-item"> <label for="select_element">Select element</label> <div class="input-with-actions"> <select id="select_element"> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> </select> <div class="input-with-actions__actions"> <div class="buttons"> <div class="buttons__group"> <button class="button button--plus" type="button">Add item</button> <button class="button button--minus" type="button">Remove item</button> </div> </div> </div> </div> </div> </div> </div> <!-- END form-item--plus_minus 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">Et id veniam et nulla fugiat nesciunt magni voluptates ipsam at temporibus sed.</span> <div class="form-item__description">Voluptas sit quo nihil corporis commodi recusandae fuga voluptatibus sunt nihil</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">Laudantium omnis amet suscipit fuga quisquam mollitia.</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">Dignissimos quibusdam eum saepe cum perspiciatis mollitia quo voluptatem et pariatur.</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">Voluptatem aut nesciunt eligendi est debitis.</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">Ab voluptate tenetur vitae et consequatur delectus doloribus sequi.</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">Nemo veniam magnam quis mollitia velit culpa aut alias velit.</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">At non eveniet aut sit maiores quo autem a quam illum alias pariatur dignissimos voluptatem. nemo nihil laudantium cum qui alias est eum impedit et. aperiam laborum maiores voluptatem ab quisquam ut error magni et consequatur quia facilis</label> </div> <div class="form-item__checkbox"> <input type="checkbox" name="checkbox_button" id="chb_5" value="checkbox_5" /> <label for="chb_5">Voluptas rem sunt minus velit cupiditate. eos soluta placeat eaque nostrum ut quod et sint molestias sint rerum ut voluptates quo. minima aut ratione necessitatibus sit at qui et quis vel facilis autem vitae animi. rerum illum delectus vero non qui eos consectetur facere</label> </div> </fieldset> <span id="form-item__error_8" class="form-item__error-message">Quos aperiam esse et architecto facilis quae repellendus sint.</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">Enim et commodi quo aut est vel eius doloremque iure est occaecati.</span> </div> <!-- END form-error-password component -->