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

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

The `progress` element

Progress: 30%

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

Indeterminate state

Loading:

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

The `meter` element

Measure 10%: 10 percent

Measure 60%: 60 percent

Low: 30 percent

Normal: 50 percent

High: 90 percent

Optimum value (39) is higher: 30 percent

Optimum value (39) is lower: 69 percent

Optimum value (39) is on it: 39 percent

Optimum value (default) is on it: 50 percent

Optimum region low: 20 percent

Optimum region normal: 50 percent

Optimum region high: 95 percent

<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

<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

<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:: 2023-02-20

Forms - Scaffolding

The form element

The label element

The input element

Implicit labeling

Explicit labeling

Hidden state (type=hidden)

Text (type=text) state

Implicit labeling

Explicit labeling

With the input mode text (inputmode=text)

With the input mode none (inputmode=none)

Search state (type=search)

Implicit labeling

Explicit labeling

With the input mode search (inputmode=search)

Telephone state (type=tel)

Implicit labeling

Explicit labeling

With the input mode tel (inputmode=tel)

URL state (type=url)

Implicit labeling

Explicit labeling

With the input mode url (inputmode=url)

Email state (type=email)

Implicit labeling

Explicit labeling

With the input mode email (inputmode=email)

Password state (type=password)

Implicit labeling

Explicit labeling

Date state (type=date)

Implicit labeling

Explicit labeling

Month state (type=month)

Implicit labeling

Explicit labeling

Week state (type=week)

Implicit labeling

Explicit labeling

Time state (type=time)

Implicit labeling

Explicit labeling

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

Implicit labeling

Explicit labeling

Number state (type=number)

Implicit labeling

Explicit labeling

With the input mode numeric (inputmode=numeric)

With the input mode decimal (inputmode=decimal)

Range state (type=range)

Implicit labeling

Explicit labeling

Color state (type=color)

Implicit labeling

Explicit labeling

Checkbox state (type=checkbox)

Implicit labeling

Explicit labeling

Radio Button state (type=radio)

Implicit labeling

Explicit labeling

File Upload state (type=file)

Implicit labeling

Explicit labeling

Submit Button state (type=submit)

Image Button state (type=image)

Implicit labeling

Explicit labeling

Reset Button state (type=reset)

Button state (type=button)

Common input element attributes

The value attribute

The readonly attribute

The disabled attribute

The placeholder attribute

The required attribute

The multiple attribute

The pattern attribute

The `form` element

The `label` element

The `input` element

Hidden state (`type=hidden`)

Text (`type=text`) state

With the input mode text (`inputmode=text`)

With the input mode none (`inputmode=none`)

Search state (`type=search`)

With the input mode search (`inputmode=search`)

Telephone state (`type=tel`)

With the input mode tel (`inputmode=tel`)

URL state (`type=url`)

With the input mode url (`inputmode=url`)

Email state (`type=email`)

With the input mode email (`inputmode=email`)

Password state (`type=password`)

Date state (`type=date`)

Month state (`type=month`)

Week state (`type=week`)

Time state (`type=time`)

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

Number state (`type=number`)

With the input mode numeric (`inputmode=numeric`)

With the input mode decimal (`inputmode=decimal`)

Range state (`type=range`)

Color state (`type=color`)

Checkbox state (`type=checkbox`)

Radio Button state (`type=radio`)

File Upload state (`type=file`)

Submit Button state (`type=submit`)

Image Button state (`type=image`)

Reset Button state (`type=reset`)

Button state (`type=button`)

The `value` attribute

The `readonly` attribute

The `disabled` attribute

The `placeholder` attribute

The `required` attribute

The `multiple` attribute

The `pattern` attribute

The `maxlength` and `minlength` attributes

The `size` attribute

The `min` and `max` attributes

The `step` attribute

The `list` attribute

The `button` element

The `select` element

With option group (`optgroup`)

The `datalist` element

`textarea` element

The `output` element

The `progress` element

The `meter` element

The `fieldset` and `legend` element