Email Input Component

Email Input component is an input field for capturing email address data from user. Bissetii did a number of researches on its own and decided to only provide styling for proper HTML5 semantic syntax defined by w3.org.

This component is available starting from v1.12.1.

Hugo

All Email Input Hugo interface is directly supported by Form Component.

Go

All Email Input Go interface is directly supported by Form Component.

HTML

Expanding from Form Component, Email Input component is to facilitate an input for entering an email address. To ensure the input email address matches the correct pattern, apply the following value to the pattern= field depending on your specific needs.

For supporting localized email such as john.smith@local, most browser has already implemented the default pattern natively. Hence, no additional pattern is required. For learning purposes, the following pattern is used:

1

^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$

For strictly global domain email such as john.smith@domain.com, use the following pattern:

1

(?![_.-])((?![_.-][_.-])[a-z\d_.-]){0,63}[a-z\d]@((?!-)((?!--)[a-z\d-]){0,63}[a-z\d]\.){1,2}([a-z]{2,14}\.)?[a-z]{2,14}

For locking towards a specific domain pattern such as [NAME]@mydomain.com, replace the pattern above with a hard-coded domain name after the @. Example:

1

(?![_.-])((?![_.-][_.-])[a-z\d_.-]){0,63}[a-z\d]@mydomain.com

An all compatible attributes HTML syntax is shown as follows:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

<label for="input-javascript-id">Email</label>
<input type="email"
	id="input-javascript-id"
	name="example"
	value="john.smith@domain.me"
	pattern="...YOUR PATTERN..."
	required
	disabled
	autofocus
	autocomplete
	readonly
	list="datalist-id"
/>
<datalist id="datalist-id">
	<option value="john.smith@domain.com" />
	...
</datalist>

Here is an example:

CSS

All Email Input CSS variables is directly supported by Form Component.

Javascript

All Email Input Javascript is directly supported by Form Component.

Sass

All Email Input Sass is directly supported by Form Component.

Researches

Here are the researches done to ensure Email Input component meets the necessary quality assurances:

SCHEDULED COMING SOON

Epilogue

That’s all about Email Input 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.