From examples - test cases

Basic use

Appearance

Email address

Password

File input

Check me out

Submit

View in FireFox

View in IE

Labels

Appearance

Label 1

Label 2

Alignment option 1 − Placed on top

---

Label 1

Label 2

---

Alignment option 2 − Aligned right

Label 1

Label 2

---

Alignment option 3 − Aligned left

Label 1

Label 2

View in FireFox

View in IE

Inputs

Use text-based input fields (most common form control). This includes support for all HTML5 types: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color.

Appearance type="text"

Input field

Input field with a Search button

Search

Search

View in FireFox

View in IE

Appearance type="password"

Input field

Input field with a Search button

Search

Search

View in FireFox

View in IE

Appearance type="datetime"

Input field

Input field with a Search button

Search

Search

View in FireFox

View in IE

Appearance type="datetime-local"

Input field

Input field with a Search button

Search

Search

View in FireFox

View in IE

Appearance type="date"

Input field

Input field with a Search button

Search

Search

View in FireFox

View in IE

Appearance type="month"

Input field

Input field with a Search button

Search

Search

View in FireFox

View in IE

Appearance type="time"

Input field

Input field with a Search button

Search

Search

View in FireFox

View in IE

Appearance type="week"

Input field

Input field with a Search button

Search

Search

View in FireFox

View in IE

Appearance type="number"

Input field

Input field with a Search button

Search

Search

View in FireFox

View in IE

Appearance type="email"

Input field

Input field with a Search button

Search

Search

View in FireFox

View in IE

Appearance type="url"

Input field

Input field with a Search button

Search

Search

View in FireFox

View in IE

Appearance type="search"

Input field

Input field with a Search button

Search

Search

View in FireFox

View in IE

Appearance type="tel"

Input field

Input field with a tel button

Search

Search

View in FireFox

View in IE

Appearance type="color"

Input field

Input field with a color button

Search

Search

View in FireFox

View in IE

Textarea

Appearance

View in FireFox

View in IE

Checkboxes

Appearance

Default checkboxes

Option 1

Option 2

Option 3

---

Inline checkboxes

Option 1 Option 2 Option 3

View in FireFox

View in IE

Radio buttons

Appearance

Radio buttons

Option 1

Option 3

Option 2

---

Inline radio buttons

Option 1 Option 2 Option 3

View in FireFox

View in IE

Selects

Appearance

Dropdown list with single option view

1 2 3 4 5

---

Dropdown list with multi-option view

1 2 3 4 5

View in FireFox

View in IE

Enhanced use

Horizontal form

Appearance

Email

Password

Remember me

Sign in

View in FireFox

View in IE

Inline form

View in FireFox

View in IE

Static control

Appearance

Email

View in FireFox

View in IE

Disabled state

Appearance

Disabled input

Disabled select menu Disabled select

Can't check this

Submit

View in FireFox

View in IE

Set height

Appearance

input-lg class on an input element Default input element input-sm class on an input element input-lg class on a select element .input-lg Default select element Default select input-sm class on a select element .input-sm

View in FireFox

View in IE

Set width

Appearance

col-xs-4 class on the parent element

col-xs-8 class on the parent element

View in FireFox

View in IE

Fieldsets Borders

By default a single fieldset/legend has no top border. Each fieldset after the first fieldset/legend well have a border to sperate the two fieldsets. This can be changed by using .legend-brdr-bttm class on the <fieldset> to create a border under each <legend>.

Appearance

Identification Information

Full Name

Date of Birth (YYYY-MM-DD)

Contact Information

Telephone number

Email

Sign Up

View in FireFox

View in IE

---

Affiliates – form

Are you interested in supporting on a priority or project in your area of expertise? Tell us a bit about yourself, and if an opportunity arises, we will notify you.

Email (required)

First Name (required)

Last Name (required)

Title (required)

University/Organization (required)

Area of expertise:

Behavioural Insights Impact Measurement Innovative Finance Data Science Prize and Challenges

Other

Any other skills or research interests you would like us to know about?

Other skills or research interests

Upload your CV here

Submit Reset

View in FireFox

View in IE