Forms
<div class="js-course-finder">
<div class="cf-container">
<div class="container is-fullhd cf-container-auto">
<div class="columns is-gapless is-mobile is-multiline cf-container-position">
<div class="column is-full-mobile is-full-tablet is-2-desktop cf-heading-colunm">
<div class="cf-expand-wrapper js-cf-expand">
<h4 class="font-type-2 is-size-4 cf-heading">Find a course</h4>
<span class="cf-expand">
<span class="cf-expand-text js-cf-expand-text">Expand</span>
<i class="fas fa-plus fa-w-14 cf-expand-icon" aria-hidden="true"></i>
</span>
</div>
</div>
<div class="column is-full-mobile is-full-tablet is-10-desktop">
<div class="columns is-gapless is-mobile is-multiline cf-controls-wrapper">
<div class="column is-full-mobile is-4-tablet is-3-desktop cf-colunm cf-dropdown-column">
<div class="select">
<label class="is-sr-only" for="cf-dropdown">Course Level</label>
<select disabled class="cf-dropdown" id="cf-dropdown"></select>
</div>
</div>
<div class="column is-four-fifths-mobile cf-colunm cf-input-colunm">
<label class="is-sr-only" for="cf-search-input"></label>
<div class="column is-one-fifth-mobile is-2-tablet cf-colunm cf-search-column">
<button disabled class="cf-search">
<i class="fas fa-search fa-w-16 cf-search-icon" aria-hidden="true"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div><section class="section">
<div class="container is-fullhd">
<div class="search-container m-bottom-0">
<h2 class="is-size-3 has-heading-line">Search</h2>
<div class="columns is-gapless is-mobile is-multiline">
<label class="m-bottom-10" for="search-input">Search for people, publications, centres and institutes, projects, news and events</label>
<div class="column is-full-mobile is-full-tablet is-12-desktop">
<div class="columns is-gapless is-mobile is-multiline">
<div class="column is-four-fifths-mobile search-column search-input-column">
<input type="text" class="font-type-1 search-input" id="search-input" placeholder="" value="">
</div>
<div class="column is-one-fifth-mobile is-2-tablet search-column search-button-column">
<button class="search-button">Search<span class="search-button-icon fa fa-search" aria-hidden="true"></span></button>
</div>
</div>
</div>
</div>
</div>
</div>
</section><section class="section">
<div class="container is-fullhd">
<div class="search-container m-bottom-0">
<div class="container is-fullhd search-container-auto">
<h2 class="is-size-3 has-heading-line">Search</h2>
<div class="columns is-gapless is-mobile is-multiline">
<div class="column is-full-mobile is-4-tablet is-3-desktop search-column search-dropdown-column">
<div class="select">
<label class="is-sr-only" for="search-dropdown">In this theme</label>
<select class="search-dropdown" id="search-dropdown">
<option class="has-text-weight-bold" data-query="">Search this theme</option>
<option class="has-text-weight-bold" data-query="#">Search all research</option>
</select>
</div>
</div>
<div class="column is-four-fifths-mobile search-column search-input-column">
<label class="is-sr-only" for="search-input2">Search for people, projects, centres and institutes, news and events</label>
<input type="text" class="font-type-1 search-input" id="search-input2" placeholder="" value="">
</div>
<div class="column is-one-fifth-mobile is-2-tablet search-column search-button-column">
<button class="search-button">Search <span class="search-button-icon fa fa-search" aria-hidden="true"></span></button>
</div>
</div>
</div>
</div>
</div>
</section><div class="columns is-gapless is-mobile is-multiline">
<div class="column is-full-mobile is-full-tablet is-3-desktop search-heading-column">
<h1 class="font-type-2 is-size-4 search-heading">Search the library</h1>
</div>
<div class="column is-full-mobile is-full-tablet is-9-desktop">
<div class="columns is-gapless is-mobile is-multiline">
<div class="column is-four-fifths-mobile search-column search-input-column">
<label class="is-sr-only" for="search-input">Search the library</label>
<input type="text" class="font-type-1 search-input" id="search-input" placeholder="" value="">
</div>
<div class="column is-one-fifth-mobile is-2-tablet search-column search-button-column">
<button class="search-button">Search<span class="search-button-icon fa fa-search" aria-hidden="true"></span></button>
</div>
</div>
</div>
</div><div class="columns is-gapless is-mobile is-multiline">
<div class="column is-full-mobile is-full-tablet is-2-desktop search-heading-column">
<h4 class="is-size-4 search-heading">Search</h4>
</div>
<div class="column is-full-mobile is-full-tablet is-10-desktop">
<div class="columns is-gapless is-mobile is-multiline">
<div class="column is-full-mobile is-4-tablet is-3-desktop search-column search-dropdown-column">
<div class="select">
<label class="is-sr-only" for="search-dropdown">Search LibrarySearch</label>
<select class="search-dropdown" id="search-dropdown">
<option class="has-text-weight-bold" data-query="">Books</option>
<option class="has-text-weight-bold" data-query="">Journal titles</option>
<option class="has-text-weight-bold" data-query="">Reading lists</option>
<option class="has-text-weight-bold" data-query="">Library website</option>
</select>
</div>
</div>
<div class="column is-four-fifths-mobile search-column search-input-column">
<label class="is-sr-only" for="search-input2">Search LibrarySearch</label>
<input type="text" class="font-type-1 search-input" id="search-input2" placeholder="" value="">
</div>
<div class="column is-one-fifth-mobile is-2-tablet search-column search-button-column">
<button class="search-button">Search <span class="search-button-icon fa fa-search" aria-hidden="true"></span></button>
</div>
</div>
</div>
</div><h2 class="is-size-3 font-type-2 has-heading-line">Search</h2>
<div class="columns is-gapless is-mobile is-multiline">
<div class="column is-full-mobile is-3-tablet is-3-desktop search-column search-dropdown-column">
<div class="select">
<label class="is-sr-only" for="search-dropdown">Choose course level</label>
<select class="search-dropdown" id="search-dropdown">
<option data-query="">Choose course level(s)</option>
<option data-query="#">Level 1</option>
<option data-query="#">Level 2</option>
<option data-query="#">Level 3</option>
</select>
</div>
</div>
<div class="column is-full-mobile is-3-tablet is-3-desktop search-column search-dropdown-column">
<div class="select">
<label class="is-sr-only" for="search-dropdown">Choose subject areas(s)</label>
<select class="search-dropdown" id="search-dropdown2">
<option data-query="">Choose subject areas(s)</option>
<option data-query="#">Subject area 1</option>
<option data-query="#">Subject area 2</option>
<option data-query="#">Subject area 3</option>
</select>
</div>
</div>
<div class="column is-full-mobile is-6-tablet is-6-desktop">
<div class="columns is-gapless is-mobile is-multiline">
<div class="column is-four-fifths-mobile is-8-desktop search-column search-input-column">
<label class="is-sr-only" for="search-input2">Enter keyword(s)</label>
<input type="text" class="font-type-1 search-input" id="search-input2" placeholder="Enter keyword(s)" value="">
</div>
<div class="column is-one-fifth-mobile is-6-tablet is-4-desktop search-column search-button-column">
<button class="search-button">Find a course <span class="search-button-icon fa fa-search" aria-hidden="true"></span></button>
</div>
</div>
</div>
</div>Forms should be clear and simple. Only ask for information you absolutely need.
- They should be organized in a logical manner.
- Provide clear instructions about what information is desired.
- If you ask for optional information, mark the labels of optional fields with '(optional)'
- Do not mark mandatory fields with asterisks.
The following form controls classes are supported: .label, .input, .textarea, .select, .checkbox, .radio, .button, .help.
Each of them should be wrapped in a .control container
When combining several controls in a form, use the .field class as a container, to keep the spacing consistent.
Ensure you always add a <label> to every form control.
Only hide labels using the sr-only class if the surrounding context makes them unnecessary.
Do not use a placeholder attribute in form fields, as this will disappear once the content is entered into the field. Use help text instead, this will always be shown.