Language selection

Search


Forms - Scaffolding

The purpose of this page is to test all native forms related elements, if they are aligned with our design and are compliant to our accessibility guideline when used as is without any special customization. The following include all form elements in the HTML5 specification and a few examples was inspired by the WHATWG section 4.10 as February 2023. This page may not contain all the possible forms element combination.

The form element

<form></form>

The label element

<form>
	<label>This is a label</label>
</form>

The input element

Implicit labeling

<form>
	<label>Label: <input></label>
</form>

Explicit labeling

<form>
	<label for="input">Label: </label><input id="input">
</form>

Hidden state (type=hidden)

<form>
	<input type="hidden">
</form>

Text (type=text) state

Implicit labeling

<form>
	<label>Label: <input type="text"></label>
</form>

Explicit labeling

<form>
	<label for="input-text">Label: </label><input id="input-text" type="text">
</form>

With the input mode text (inputmode=text)

<form>
	<label>Label: <input type="text" inputmode="text"></label>
</form>

With the input mode none (inputmode=none)

<form>
	<label>Label: <input type="text" inputmode="none"></label>
</form>

Search state (type=search)

Implicit labeling

<form>
	<label>Label: <input type="search"></label>
</form>

Explicit labeling

<form>
	<label for="input-search">Label: </label><input id="input-search" type="search">
</form>

With the input mode search (inputmode=search)

<form>
	<label>Label: <input type="search" inputmode="search"></label>
</form>

Telephone state (type=tel)

Implicit labeling

<form>
	<label>Label: <input type="tel"></label>
</form>

Explicit labeling

<form>
	<label for="input-tel">Label: </label><input id="input-tel" type="tel">
</form>

With the input mode tel (inputmode=tel)

<form>
	<label>Label: <input type="tel" inputmode="tel"></label>
</form>

URL state (type=url)

Implicit labeling

<form>
	<label>Label: <input type="url"></label>
</form>

Explicit labeling

<form>
	<label for="input-url">Label: </label><input id="input-url" type="url">
</form>

With the input mode url (inputmode=url)

<form>
	<label>Label: <input type="url" inputmode="url"></label>
</form>

Email state (type=email)

Implicit labeling

<form>
	<label>Label: <input type="email"></label>
</form>

Explicit labeling

<form>
	<label for="input-email">Label: </label><input id="input-email" type="email">
</form>

With the input mode email (inputmode=email)

<form>
	<label>Label: <input type="email" inputmode="email"></label>
</form>

Password state (type=password)

Implicit labeling

<form>
	<label>Label: <input type="password"></label>
</form>

Explicit labeling

<form>
	<label for="input-password">Label: </label><input id="input-password" type="password">
</form>

Date state (type=date)

Implicit labeling

<form>
	<label>Label: <input type="date"></label>
</form>

Explicit labeling

<form>
	<label for="input-date">Label: </label><input id="input-date" type="date">
</form>

Month state (type=month)

Implicit labeling

<form>
	<label>Label: <input type="month"></label>
</form>

Explicit labeling

<form>
	<label for="input-month">Label: </label><input id="input-month" type="month">
</form>

Week state (type=week)

Implicit labeling

<form>
	<label>Label: <input type="week"></label>
</form>

Explicit labeling

<form>
	<label for="input-week">Label: </label><input id="input-week" type="week">
</form>

Time state (type=time)

Implicit labeling

<form>
	<label>Label: <input type="time"></label>
</form>

Explicit labeling

<form>
	<label for="input-time">Label: </label><input id="input-time" type="time">
</form>

Local Date and Time state (type=datetime-local)

Implicit labeling

<form>
	<label>Label: <input type="datetime-local"></label>
</form>

Explicit labeling

<form>
	<label for="input-datetime-local">Label: </label><input id="input-datetime-local" type="datetime-local">
</form>

Number state (type=number)

Implicit labeling

<form>
	<label>Label: <input type="number"></label>
</form>

Explicit labeling

<form>
	<label for="input-number">Label: </label><input id="input-number" type="number">
</form>

With the input mode numeric (inputmode=numeric)

<form>
	<label>Label: <input type="number" inputmode="numeric"></label>
</form>

With the input mode decimal (inputmode=decimal)

<form>
	<label>Label: <input type="number" inputmode="decimal"></label>
</form>

Range state (type=range)

Implicit labeling

<form>
	<label>Label: <input type="range"></label>
</form>

Explicit labeling

<form>
	<label for="input-range">Label: </label><input id="input-range" type="range">
</form>

Color state (type=color)

Implicit labeling

<form>
	<label>Label: <input type="color"></label>
</form>

Explicit labeling

<form>
	<label for="input-color">Label: </label><input id="input-color" type="color">
</form>

Checkbox state (type=checkbox)

Implicit labeling

<form>
	<p><label>(single) Label: <input type="checkbox"></label>
	<p>
	<label>(multiple) Label 1: <input type="checkbox" name="input-checkbox-implicit"></label>
	<label>(multiple) Label 2: <input type="checkbox" name="input-checkbox-implicit"></label>
	<label>(multiple) Label 3: <input type="checkbox" name="input-checkbox-implicit"></label>
	<p>
	<label><input type="checkbox" name="input-checkbox-implicit"> (multiple) Label after 1</label>
	<label><input type="checkbox" name="input-checkbox-implicit"> (multiple) Label after 2</label>
	<label><input type="checkbox" name="input-checkbox-implicit"> (multiple) Label after 3</label>
</form>

Explicit labeling

<form>
	<p><label for="input-checkbox">(single) Label: </label><input id="input-checkbox" type="checkbox">
	<p>
	<label for="input-checkbox-a1">(multiple) Label 1: </label><input id="input-checkbox-a1" type="checkbox" name="input-checkbox-explicit">
	<label for="input-checkbox-a2">(multiple) Label 2: </label><input id="input-checkbox-a2" type="checkbox" name="input-checkbox-explicit">
	<label for="input-checkbox-a3">(multiple) Label 3: </label><input id="input-checkbox-a3" type="checkbox" name="input-checkbox-explicit">
	<p>
	<input id="input-checkbox-b1" type="checkbox" name="input-checkbox-explicit"><label for="input-checkbox-b1"> (multiple) Label after 1</label>
	<input id="input-checkbox-b2" type="checkbox" name="input-checkbox-explicit"><label for="input-checkbox-b2"> (multiple) Label after 2</label>
	<input id="input-checkbox-b3" type="checkbox" name="input-checkbox-explicit"><label for="input-checkbox-b3"> (multiple) Label after 3</label>
</form>

Radio Button state (type=radio)

Implicit labeling

<form>
	<label>(single) Label: <input type="radio"></label>
	<p>
	<label>(multiple) Label 1: <input type="radio" name="input-radio-implicit"></label>
	<label>(multiple) Label 2: <input type="radio" name="input-radio-implicit"></label>
	<label>(multiple) Label 3: <input type="radio" name="input-radio-implicit"></label>
	<p>
	<label><input type="radio" name="input-radio-implicit"> (multiple) Label after 1</label>
	<label><input type="radio" name="input-radio-implicit"> (multiple) Label after 2</label>
	<label><input type="radio" name="input-radio-implicit"> (multiple) Label after 3</label>
</form>

Explicit labeling

<form>
	<label for="input-radio">(single) Label: </label><input id="input-radio" type="radio">
	<p>
	<label for="input-radio-a1">(multiple) Label 1: </label><input id="input-radio-a1" type="radio" name="input-radio-explicit">
	<label for="input-radio-a2">(multiple) Label 2: </label><input id="input-radio-a2" type="radio" name="input-radio-explicit">
	<label for="input-radio-a3">(multiple) Label 3: </label><input id="input-radio-a3" type="radio" name="input-radio-explicit">
	<p>
	<input id="input-radio-b1" type="radio" name="input-radio-explicit"><label for="input-radio-b1"> (multiple) Label after 1</label>
	<input id="input-radio-b2" type="radio" name="input-radio-explicit"><label for="input-radio-b2"> (multiple) Label after 2</label>
	<input id="input-radio-b3" type="radio" name="input-radio-explicit"><label for="input-radio-b3"> (multiple) Label after 3</label>
</form>

File Upload state (type=file)

Implicit labeling

<form>
	<label>Label: <input type="file"></label>
</form>

Explicit labeling

<form>
	<label for="input-file">Label: </label><input id="input-file" type="file">
</form>

Submit Button state (type=submit)

<form>
	<input type="submit">
</form>
<form>
	<input type="submit" value="Submit">
</form>

Image Button state (type=image)

Note: It will submit the coordinate of the mouse click on the image.

Implicit labeling

<form>
	<label>Label: <input type="image" src="img/input-image-sample.jpg" alt="Implicit image input type example"></label>
</form>

Explicit labeling

<form>
	<label for="input-image">Label: </label><input id="input-image" type="image" src="img/input-image-sample.jpg" alt="Explicit image input type example">
</form>

Reset Button state (type=reset)

<form>s
	<label>Label: <input type="text" value="This is a value"></label>
	<input type="reset">
</form>
<form>
	<label>Label: <input type="text" value="This is a value"></label>
	<input type="reset" value="Reset">
</form>

Button state (type=button)

<form>
	<input type="button" value="Button">
</form>

Common input element attributes

The value attribute

<form>
	<label>Label: <input type="text" value="This is a value"></label>
</form>

The readonly attribute

<form>
	<label>Label: <input readonly value="this is a value"></label>
</form>

The disabled attribute

<form>
	<label>Label: <input disabled value="this is a value"></label>
</form>

The placeholder attribute

<form>
	<p><label>Description: <input type="text" name="desc" placeholder="My Email Account"></label></p>
</form>

The required attribute

<form>
	<label>Label: <input required></label>
	<input type="submit">
</form>

The multiple attribute

<form>
	<label>To: <input type=email multiple name=to></label>
</form>
<form>
	<label>Attachments: <input type=file multiple name=att></label>
</form>

The pattern attribute

<form>
	<label> Part number:
	<input pattern="[0-9][A-Z]{3}" name="part"
		title="A part number is a digit followed by three uppercase letters."/>
</label>
<input type="submit">
</form>

The maxlength and minlength attributes

<form>
	<p><label>What are you doing? <input name=status maxlength=25></label>
	<p><label>Username: <input name=u required></label>
	<p><label>Password: <input name=p required minlength=12></label>
</form>

The size attribute

<form>
	<label>Size <input size=50></label>
</form>

The min and max attributes

<form>
	<label>Quantity <input name=quantity required="" type="number" min="1" max="10" value="1"></label>
</form>

The step attribute

<form>
	<label>Sleep start <input name="sleepStart" type=time min="21:00" max="06:00" step="60" value="00:00"></label>
</form>
<form>
	<label>Opacity (256 steps) <input name=opacity type=range min=0 max=1 step=0.00392156863></label>
</form>
<form>
	<label>Favority time (any steps) <input name=favtime type=time step=any></label>
</form>

The list attribute

<form>
	<label>Function types <input type="text" list="function-types"></label>
	<datalist id="function-types">
		<option value="function">function</option>
		<option value="async function">async function</option>
		<option value="function*">generator function</option>
		<option value="=>">arrow function</option>
		<option value="async =>">async arrow function</option>
		<option value="async function*">async generator function</option>
	</datalist>
</form>

The button element

<form>
	<button>Default</button>
</form>
<form>
	<button type="submit">Submit</button>
</form>
<form>
	<button type="reset">Reset</button>
</form>
<form>
	<button type="button">Button</button>
</form>
<button type="button">Button in no form</button>

The select element

No default, explicit label

<form>
<p>
	<label for="unittype">Select unit type:</label>
	<select id="unittype" name="unittype">
		<option value="1"> Miner </option>
		<option value="2"> Puffer </option>
		<option value="3" selected> Snipey </option>
		<option value="4"> Max </option>
		<option value="5"> Firebot </option>
	</select>
</p>
</form>

No default, implicit label

<form>
<p>
	<label>Select unit type:
	<select name="unittype">
		<option value="1"> Miner </option>
		<option value="2"> Puffer </option>
		<option value="3" selected> Snipey </option>
		<option value="4"> Max </option>
		<option value="5"> Firebot </option>
	</select>
	</label>
</p>
</form>

With placeholder

<form>
<p>
	<label for="unittypeplaceholder">Select unit type:</label>
	<select id="unittypeplaceholder" name="unittypeplaceholder" required>
	<option value=""> Select unit type </option>
	<option value="1"> Miner </option>
	<option value="2"> Puffer </option>
	<option value="3"> Snipey </option>
	<option value="4"> Max </option>
	<option value="5"> Firebot </option>
</select>
</p>
</form>

All selected

<form>
<p>
	<label for="allowedunits">Select unit types to enable on this map:</label>
	<select id="allowedunits" name="allowedunits" multiple>
		<option value="1" selected> Miner </option>
		<option value="2" selected> Puffer </option>
		<option value="3" selected> Snipey </option>
		<option value="4" selected> Max </option>
		<option value="5" selected> Firebot </option>
	</select>
</p>
</form>

With option group (optgroup)

<form>
	<p><label>Course:
		<select name="c">
			<optgroup label="8.01 Physics I: Classical Mechanics">
				<option value="8.01.1">Lecture 01: Powers of Ten
				<option value="8.01.2">Lecture 02: 1D Kinematics
				<option value="8.01.3">Lecture 03: Vectors
			<optgroup label="8.02 Electricity and Magnetism">
				<option value="8.02.1">Lecture 01: What holds our world together?
				<option value="8.02.2">Lecture 02: Electric Field
				<option value="8.02.3">Lecture 03: Electric Flux
			<optgroup label="8.03 Physics III: Vibrations and Waves">
				<option value="8.03.1">Lecture 01: Periodic Phenomenon
				<option value="8.03.2">Lecture 02: Beats
				<option value="8.03.3">Lecture 03: Forced Oscillations with Damping
		</select>
	</label>
</form>

The datalist element

<form>
<label>
	Animal:
	<input name=animal list=animals>
	<datalist id=animals>
		<option value="Cat">
		<option value="Dog">
	</datalist>
</label>
</form>

textarea element

<form>
<label>Textarea: <textarea>Dear Madam Speaker,

Regarding your letter dated ...

...

Yours Sincerely,

...</textarea>
</label>
</form>

With placeholder text

<form>
<label>Textarea: <textarea placeholder="Dear Francine,

They closed the parks this week, so we won't be able to
meet your there. Should we just have dinner?

Love,
Daddy"></textarea>
</label>
</form>

The output element

<form>
<output id="resultEmpty"></output>
</form>

With a value

With a non empty result
<form>
<output id="resultNonEmpty">With a non empty result</output>
</form>

The progress element

<p><label>Progress: <progress id=p max=100 value="30"><span>30</span>%</progress></label></p>

Indeterminate state

<p><label>Loading: <progress></progress></label></p>

The meter element

<p><label>Measure 10%: <meter value="10" max="100">10 percent</meter></label>
<p><label>Measure 60%: <meter value="60" max="100">60 percent</meter></label>
<p><label>Low: <meter value="30" max="100" low="40" high="80">30 percent</meter></label>
<p><label>Normal: <meter value="50" max="100" low="40" high="80">50 percent</meter></label>
<p><label>High: <meter value="90" max="100" low="40" high="80">90 percent</meter></label>
<p><label>Optimum value (39) is higher: <meter value="30" max="100" optimum="39">30 percent</meter></label>
<p><label>Optimum value (39) is lower: <meter value="69" max="100" optimum="39">69 percent</meter></label>
<p><label>Optimum value (39) is on it: <meter value="39" max="100" optimum="39">39 percent</meter></label>
<p><label>Optimum value (default) is on it: <meter value="50" max="100">50 percent</meter></label>
<p><label>Optimum region low: <meter value="20" max="100" low="40" high="80" optimum="30">20 percent</meter></label>
<p><label>Optimum region normal: <meter value="50" max="100" low="40" high="80" optimum="51">50 percent</meter></label>
<p><label>Optimum region high: <meter value="95" max="100" low="40" high="80" optimum="90">95 percent</meter></label>

The fieldset and legend element

Display

<form>
<fieldset>
	<legend>Display</legend>
	<p><label><input type=radio name=c value=0 checked> Black on White</label>
	<p><label><input type=radio name=c value=1> White on Black</label>
	<p><label><input type=checkbox name=g> Use grayscale</label>
	<p><label>Enhance contrast <input type=range name=e list=contrast min=0 max=100 value=0 step=1></label>
	<datalist id=contrast>
		<option label=Normal value=0>
		<option label=Middle value=50>
		<option label="Middle high" value="78">
		<option label=Maximum value=100>
	</datalist>
</fieldset>
</form>

Disabled fieldset

<form>
<fieldset name="clubfields" disabled>
	<legend> <label>
		<input type=checkbox name=club onchange="form.clubfields.disabled = !checked">
		Use Club Card
	</label> </legend>
	<p><label>Name on card: <input name=clubname required></label></p>
	<p><label>Card number: <input name=clubnum required pattern="[-0-9]+"></label></p>
	<p><label>Expiry date: <input name=clubexp type=month></label></p>
</fieldset>
</form>

Grouping controls

How can we best reach you?

<form>
<fieldset>
	<legend> <h4>
		How can we best reach you?
	</h4> </legend>
	<p> <label>
	<input type=radio checked name=contact_pref>
		Phone
	</label> </p>
	<p> <label>
		<input type=radio name=contact_pref>
		Text
	</label> </p>
	<p> <label>
		<input type=radio name=contact_pref>
		Email
	</label> </p>
</fieldset>
</form>

Page details

Date modified: