Form Component

form component is the input gathering interface. Despite as simple as it sounds, there are a lot of complicated guides and tutorials all over the Internet. Bissetii did a number of researches and decided to stick to HTML5 semantic syntax defined by w3.org.

Unlike other components' documentation in Bissetii and also due to many Form’s input sub-components composition, this document is written differently for reader’s simplicity sake.

This component is available starting from v1.11.0.

Sass Styling Parts

The Sass script responsible for form rendering is located in the following directory:

pkg/internal/form

Defaults

With the exception to radio and checkbox inputs, all inputs are rendered to be 100% in width. This facilitates independent layout components like Grid Component and <fieldset>.

As for specific input styling, they will be discussed respectively in the HTML section.

Javascript Parts

This component does not depend on any Javascript.

HTML Parts

There are so many ways to create a form. After thorough researches and experiementations, Bissetii opted the standard methods. They’re categorized into many sub-categories. This is a long document so please make use of the available anchor links.

AMP Form Support

Starting from version v1.12.0, Bissetii’s form is compatible with AMP HTML. However, on pages that use form tag, AMP HTML must import the AMP form library in the <head> section, like:

<head>

...

<script async
	custom-element="amp-form"
	src="https://cdn.ampproject.org/v0/amp-form-0.1.js">
</script>

...

</head>

Back to Index

Grouping Input and Label with <fieldset>

Unlike others, Bissetii heavily deploys <fieldset> for grouping your <label> and <input>. Each fieldset should optionally have 1 <legend> tag only acting as its grouping title.

Here is the html code for vanilla HTML POST method:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<form action="https://bissetii.zoralab.com/en/components/form/components/form/" method="POST">
	<fieldset>
		<legend>Personalization</legend>
		<fieldset>
			<label for="form-fullname">Name</label>
			<input type="text"
				id="form-fullname"
				name="fullname"
				placeholder="John M. Smith"
				required
				autofocus
			/>
		</fieldset>

		<fieldset>
			<label for="form-email">Email</label>
			<input type="email"
				id="form-email"
				name="email"
				placeholder="[email protected]"
				required
				autofocus
			/>
		</fieldset>

		<fieldset>
			<label for="form-password">Password</label>
			<input type="password"
				id="form-pasword"
				name="password"
				placeholder="Super Secret Password"
				required
				autofocus
			/>
		</fieldset>

		<fieldset>
			<input type="submit" value="Check My Name" />
		</fieldset>
	</fieldset>
</form>

For styling, <fieldset> can takes in 2 classes:

  1. border - to render the <fieldset> border.
  2. center - to horizontally center all child elements.

Based on the example codes above, a simple form is as follows:

Personalization

Back to Index

AMP Specifications

Like the vanilla HTML, AMP HTML must use action-xhr over action. Most of the time, you will be using POST method for security reason.

One example for AMP HTML based on the vanilla HTML example above would be:

<form action-xhr="https://bissetii.zoralab.com/en/components/form/components/form/"
	method="POST">
	<fieldset>
		<legend>Personalization</legend>
		<fieldset>
			<label for="form-fullname">Name</label>
			<input type="text"
				id="form-fieldset-fullname"
				name="fullname"
				placeholder="John M. Smith"
				required
				autofocus
			/>
		</fieldset>

		<fieldset>
			<label for="form-email">Email</label>
			<input type="email"
				id="form-fieldset-email"
				name="email"
				placeholder="[email protected]"
				required
				autofocus
			/>
		</fieldset>

		<fieldset>
			<label for="form-password">Password</label>
			<input type="password"
				id="form-fieldset-pasword"
				name="password"
				placeholder="Super Secret Password"
				required
				autofocus
			/>
		</fieldset>

		<fieldset>
			<input type="submit" value="Check My Name" />
		</fieldset>
	</fieldset>
</form>

Back to Index

Layout Your Form with Grid

For form layouts, you can use Bissetii Grid Component system to organize them. This includes multiple <fieldset>.

More example coming soon.

Back to Index

Validity Indicator

Bissetii made use of the border colors to perform an input validitiy indication. There are 3 main types of colors:

  1. valid input (default) - green
  2. focused input - orange
  3. invalid input - red

Any required input fields with invalid (e.g. empty) values will be indicated as invalid input from start.

Back to Index

Call To Action Inputs

Based on data from W3C researches, there are many ways to render the “Calls to Action” inputs. In Bissetii, 3 types of “Call to Action” inputs are supported:

  1. reset type - to reset the form.
  2. submit type - to submit the form.
  3. button type - a button with other functions (succeeded by <button> tag).

These inputs are styled under Button Component.

Apart from reset and submit types, both button type and <button> relies on inline Javascript to change location. This is useful when you need to perform sophiciated processes. Here are some examples:

onclick="history.back()"                 <!-- head back a page -->
onclick="window.location.replace('url')" <!-- redirect to page -->
onclick="window.open('url')"             <!-- open page in new tab -->

Similarly, button-styled link (highly recommended over <button>) can also be added in as one of the “Call to Action”. Unlike buttons, link does not rely on inline Javascript implementation.

Unlike other inputs, you can group every “Call to Action” into a single <fieldset>. Bissetii recommends applying center class to it for mobile friendliness.

As a result, Bissetii recommends the following HTML syntax (with onClick attributes removed from each <input>:

<fieldset class="border center">
	<legend>Your Action?</legend>
	<a class="button clean" href="#">Back</a>
	<input type="button"
		value="Action 1"
	/>
	<input type="button"
		value="Action 2"
	/>
	<input type="button"
		value="Action 3"
	/>
	<input type="reset" value="Reset" accesskey="s" />
	<input class="pinpoint" type="submit" value="Apply" />
</fieldset>

This will render as:

Your Action? Back

Back to Index

Checkbox List Type Input

For checkbox listing, Bissetii uses <ul> for the organizing the list items. There are 2 ways to present the list:

  1. ordinary vertical list
  2. inline horizontal list (append "inline" class to <ul>)

If the option is required, you only need to apply required that option. Similarly, if you want to set an option as a default value, simply add checked into the desired options.

Bissetii recommends the following syntax with same name attribute and unique id attribute for <label> to associate with:

<!-- Non-Inline List -->
<fieldset>
	<legend>Select Your Baggage Contents</legend>
	<ul>
	<li>
		<input type="checkbox"
			id="form-baggage-water"
			name="baggage"
			value="Water Pack"
			required
			autofocus
		/>
		<label for="form-baggage-water">
			Water Pack
		</label>
	</li>
	<li>
		<input type="checkbox"
			id="form-baggage-food"
			name="baggage"
			value="Food Pack"
		/>
		<label for="form-baggage-food">
			Food Pack
		</label>
	</li>
	<li>
		<input type="checkbox"
			id="form-baggage-cloth"
			name="baggage"
			value="Cloth Pack" />
		<label for="form-baggage-cloth">
			Cloth Pack
		</label>
	</li>
	</ul>
</fieldset>


<!-- Inline List -->
<fieldset>
	<legend>Med Pack?</legend>
	<ul class="inline">
	<li>
		<input type="checkbox"
			id="form-medpack-minor"
			name="form-medpack"
			value="minor"
		/>
		<label for="form-medpack-minor">
			Minor
		</label>
	</li>
	<li>
		<input type="checkbox"
			id="form-medpack-medic"
			name="form-medpack"
			value="medic"
		/>
		<label for="form-medpack-medic">
			Medic Role
		</label>
	</li>
</fieldset>

This will render as:

Select Your Baggage Contents
Med Pack?

Back to Index

Color Type Input

One of the common <input> in use is the color type. Bissetii recommends the following HTML syntax:

<fieldset>
	<label for="form-team-color">Team Color</label>
	<input type="color"
		id="form-team-color"
		name="team-color"
		value="#ff22ee"
		required
		autofocus
	/>
</fieldset>

This will render as:

Back to Index

Data List Attributes

Data list attributes can be applied to any applicable input to assist user experience. Example:

<fieldset>
	<label for="form-url">My Portfolio Site</label>
	<input type="url"
		id="form-data-url"
		name="url"
		list="defaultURLs"
		placeholder="https://www.example.com"
		required
	/>
	<datalist id="defaultURLs">
		<option value="https://developer.mozilla.org/" />
		<option value="http://www.google.com/" />
		<option value="http://www.microsoft.com/" />
		<option value="https://www.mozilla.org/" />
		<option value="http://w3.org/" />
	</datalist>
</fieldset>

This will render as:

Back to Index

Date, Month, Week, Local Datetime Types Input

The second in common field is the date type. Bissetii recommends the following HTML syntax:

<fieldset>
	<label for="form-date">Date of Birth</label>
	<input type="date"
		id="form-date"
		name="dob"
		placeholder="YYYY-MM-DD (e.g. 2012-05-12)"
		required
		autofocus
	/>
</fieldset>

<fieldset>
	<label for="form-datetime-local">Current Time</label>
	<input type="datetime-local"
		id="form-datetime-local"
		name="time"
		placeholder="YYYY-MM-DDTHH:MM (e.g. 2012-05-12T12:33)"
		required
		autofocus
	/>
</fieldset>

<fieldset>
	<label for="form-month">Funky Month</label>
	<input type="month"
		id="form-month"
		name="month"
		placeholder="YYYY-MM (e.g. 2012-05)"
		required
		autofocus
	/>
</fieldset>

<fieldset>
	<label for="form-week">Special Week</label>
	<input type="week"
		id="form-week"
		name="week"
		placeholder="YYYY-WXX (e.g. 2012-W16)"
		required
		autofocus
	/>
</fieldset>

This will render as:

Back to Index

Email Type Input

For email input type, Bissetii recommends the following HTML syntax:

<fieldset>
	<label for="form-email">Email</label>
	<input type="email"
		id="form-email"
		name="email"
		placeholder=""
		required
		autofocus
	/>
</fieldset>

This will render as:

Back to Index

Number Type Input

One of the common <input> in use is the number type. Bissetii recommends the following HTML syntax:

<fieldset>
	<label for="form-lucky-number">Lucky Number</label>
	<input type="number"
		id="form-lucky-number"
		name="lucky-number"
		placeholder="8888"
		min="2"
		max="10000"
		required
		autofocus
	/>
</fieldset>

This will render as:

Back to Index

Password Type Input

One of the common <input> in use is the password type. Normally, one would usually uses Javascript to validate both password and password confirmation fields before submitting to server. However, different implementations has different so Bissetii only covers native pattern validation and CSS elements.

Pattern Attribute

Bissetii encourges the use of pattern property as recommended by Firefox developers. This way, the password is self-validated instead of heavily relying on external Javascript. The pattern are javascript regex code is constructed as follows:

"^.{33,}"                                   // min 33 characters
"^(?=.*[0-9]).{33,}"                        // with numeric
"^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9]).{33,}"  // with alphabets
"^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[\(#\$%\^&\*\)]).{33,}" // with symbol

Password Rule Label

If the password input field is in sign-up / registration section, Bissetii prepares a special password-rule class for <label> to specify your password rule. This class has the following features:

  1. has pre white-space so one can create the rule’s contents easily.
  2. use in parallel with the <input> password field.
  3. slightly smaller in font.
  4. there is no title so be smart with using <b> HTML tag for text formatting.

This allows you to use the title attribute to address the password incompliance against the rule.

Your Own Reconfirm Password Javascript

Bissetii does not provide any javascript since different applications has different approaches to the validation. Bissetii relies heavily on the browser native validation using the pattern property.

In short, the security aspect of the validations for different environments, implemented at all levels, shown as follows:

1. HTML only (no CSS)               - server
2. HTML + Bissetii CSS              - native browser, server
3. HTML + Bissetii CSS + Javascript - interactive JS, native browser, server

However, if you’re looking for some inspirations, Bissetii has the following Javascript sample for you to start yours:

function _SetNotice(input, notice) {
	for (var i = 0; i < input.labels.length; i++) {
		var label = input.labels[i];
		if (label.classList.contains("password-notice")) {
			label.innerText = notice;
		}
	}
	input.setCustomValidity(notice);
}

function _ValidatePassword(pass, cPass) {
	var outcome = true;

	if (pass === null) {
		return false;
	}

	if (pass.pattern != "") {
		re = new RegExp(pass.pattern);
		if (!re.test(pass.value)) {
			_SetNotice(pass, "Password Not Compliant to Rule.");
			outcome = false;
		} else {
			_SetNotice(pass, "");
		}
	}

	if (cPass === null) {
		return outcome;
	}

	if (pass.value != cPass.value && cPass.value != "") {
		_SetNotice(cPass, "Password Mismatched!");
		return false;
	}

	_SetNotice(cPass, "");
	return outcome;
}

function ValidatePass(passID, cPassID) {
	var pass = document.getElementById(passID);
	var cPass = document.getElementById(cPassID);
	_ValidatePassword(pass, cPass);
}

Then, in both password and confirm-password input fields, you just need to add the Javascript hook (recommended onfocusout) that calls the ValidatePass function. You can modify ValidatePass to your query patterns as long as it can reterive both the password field and confirm password field.

Here is one example using the above sample codes:

onfocusout="ValidatePass('form-password-ID', 'form-confirm-password-ID')"

Syntax

Bissetii recommends the following HTML syntax for greater compatibility between vanilla HTML and AMP HTML:

<fieldset>
	<fieldset>
		<label for="form-password">Password</label>
		<input type="password"
			id="form-password"
			name="password"
			pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[\(#\$%\^&\*\)]).{33,}"
			placeholder="Your Secret Password"
			required
		/>
		<label class="password-notice" for="form-password"></label>
		<label for="form-password"
			class="password-rule">
<b>RULE:</b> Password must at least has:
	1. <b>ONE</b> lowercase (a-z)
	2. <b>ONE</b> uppercase letter (A-Z)
	3. <b>ONE</b> number (0-9)
	4. <b>ONE</b> symbol (#$%^&*()[])
	5. <b>33 AND MORE</b> characters
		</label>
	</fieldset>

	<fieldset>
		<label for="form-confirm-password">Confirm-Password</label>
		<input type="password"
			id="form-confirm-password"
			name="confirm-password"
			placeholder="Reconfirm Your Password"
			title="mistmatched password!"
			required
		/>
		<label class="password-notice" for="form-confirm-password">
		</label>
	</fieldset>
</fieldset>

This will render as (along with the sample Javascript above):

Back to Index

Radio List Type Input

For radio list type, Bissetii recommends using the <ul> list to wrap your options. There are 2 ways to present the list using theinline class tag:

  1. ordinary vertical listing
  2. inline horizontal listing (apply inline class to <ul>)

If the list is required, you only need to apply required attribute to one of the options is suffice.

If you need to set a default checked value, simply add that attribute to the desired option.

Bissetii recommends the following syntax with same name attribute and unique id attribute for <label> to associate with:

<!-- Non-Inline List -->
<fieldset>
	<legend>Select Your Uniqueness</legend>
	<ul>
	<li>
		<input type="radio"
			id="form-specialism-scout"
			name="specialism"
			value="scout"
			required
			autofocus
		/>
		<label for="form-specialism-scout">
			Scout
		</label>
	</li>
	<li>
		<input type="radio"
			id="form-specialism-gunner"
			name="specialism"
			value="gunner"
		/>
		<label for="form-specialism-gunner">
			Gunner
		</label>
	</li>
	<li>
		<input type="radio"
			id="form-specialism-cannoner"
			name="specialism"
			value="cannoner"
		/>
		<label for="form-specialism-cannoner">
			Cannoner
		</label>
	</li>
	<li>
		<input type="radio"
			id="form-specialism-sniper"
			name="specialism"
			value="sniper"
			checked
		/>
		<label for="form-specialism-sniper">
			Sniper
		</label>
	</li>
	</ul>
</fieldset>


<!-- Inline List -->
<fieldset>
	<legend>Team Formation</legend>
	<ul class="inline">
	<li>
		<input type="radio"
			id="form-buddy-want"
			name="buddy"
			value="want-buddy"
		/>
		<label for="form-buddy-want">
			Want Buddy
		</label>
	</li>
	<li>
		<input type="radio"
			id="form-buddy-solo"
			name="buddy"
			value="solo"
		/>
		<label for="form-buddy-solo">
			Going Solo
		</label>
	</li>
</fieldset>

This will render as:

Select Your Uniqueness
Team Formation

Back to Index

Search Type Input

One of the common <input> in use is the search type. Bissetii recommends the following HTML syntax:

<fieldset>
	<label for="form-search">Search</label>
	<input type="search"
		id="form-search"
		name="search"
		placeholder="keyword, your query"
		required
		autofocus
	/>
</fieldset>

This will render as:

Back to Index

Select Type Input

For <select> type input, Bissetii recommends the following HTML syntax:

<fieldset>
	<label for="form-team-choose-squad">
		Choose A Team
	</label>
	<select id="form-team-choose-squad"
		name="team"
		required
		autofocus>
		<option value="alpha">Alpha</option>
		<option value="bravo">Bravo</option>
		<option selected="selected" value="charlie">Charlie</option>
		<option value="delta">Delta</option>
		<option value="echo">Echo</option>
	</select>
</fieldset>

This will render as:

Back to Index

Telephone Type Input

For telephone input type, Bissetii recommends the following HTML syntax:

<fieldset>
	<label for="form-phone">Phone</label>
	<input type="tel"
		id="form-phone"
		name="phone"
		placeholder="E.g: +123-4567-5212"
		required
		autofocus
	/>
</fieldset>

This will render as:

Back to Index

Textarea Input Type

For <textarea> input type, Bissetii recommends the following syntax:

<fieldset>
	<label for="form-address">Address</label>
	<textarea id="form-address"
		name="address"
		required
		autofocus
		placeholder="123, Orchard Street,
Manhattan City,
41222, Loremcore,
Balitore
"
		></textarea>
</fieldset>

The will render as:

Back to Index

Text Type Input

The most common <input> in use is the text type. Bissetii recommends the following HTML syntax:

<fieldset>
	<label for="form-fullname">Name</label>
	<input type="text"
		id="form-fullname"
		name="fullname"
		placeholder="John M. Smith"
		required
		autofocus
	/>
</fieldset>

This will render as:

Back to Index

URL Type Input

One of the common <input> in use is the URL type. Bissetii recommends the following HTML syntax:

<fieldset>
	<label for="form-url">My Portfolio Site</label>
	<input type="url"
		id="form-url"
		name="url"
		placeholder="https://www.example.com"
		required
		autofocus
	/>
</fieldset>

This will render as:

Back to Index

Epilogue

That’s all about form component in Bissetii. If you need more feature or need to report a bug, please feel free to file an issue at our Issue Section.