`URL Input` Component

URL Input component is an input field for capturing an Uniformed Resource Locator (URL) address 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 URL Input Hugo interface is directly supported by Form Component.

Go

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

HTML

Expanding from Form Component, URL Input component is to facilitate an input for entering an Uniformed Resource Locator (URL) address.

To ensure the accepted URL is complying to your specific pattern, use a regular expression pattern for pattern= attribute. Most browsers will perform native validation and Bissetii styles each of its state seamlessly.

For HTTPS with controlled names that starts with optional www. and vault., then any domain name characters, then strictly ended with .com and .net would be:

1

(https)(:\/\/)(www.|vault.)(([^.]+)\.)?([a-zA-z0-9\-_]+)(.com|.net)(\/[^\s]*)?

For any valid HTTPS URL:

1

(https)(:\/\/)((www.)?)(([^.]+)\.)?([a-zA-z0-9\-_]+)(.*)?(\/[^\s]*)?

For any valid HTTP and HTTPS URL:

1

(http(s?))(:\/\/)((www.)?)(([^.]+)\.)?([a-zA-z0-9\-_]+)(.*)?(\/[^\s]*)?

For telephone URL with +123456789... or 001234567... formats:

1

(tel)(:\/\/)(\+?)([0-9\-_]+)

For telephone URL with only +123456789... format:

1

(tel)(:\/\/\+)([0-9\-_]+)

For email URL with john.smith@local and [email protected] formats:

1

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

For email URL with only [email protected] format:

1

(email)(:\/\/)(?![_.-])((?![_.-][_.-])[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}

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
18
19
20
21


<label for="input-javascript-id">Text</label>
<input type="url"
	id="input-javascript-id"
	name="example"
	value="...YOUR TEXT VALUE..."
	pattern="...YOUR PATTERN..."
	minlength="8"
	maxlength="40"
	spellcheck
	placeholder="...YOUR PLACEHOLDER..."
	required
	disabled
	autofocus
	autocomplete
	readonly
	list="datalist-id"
/>
<datalist id="datalist-id">
	<option value="...OPTION 1 TEXT..." label="Label 1" />
	...
</datalist>

Here is an example:

CSS

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

Javascript

All URL Input Javascript is directly supported by Form Component.

Sass

All URL Input Sass is directly supported by Form Component.

Researches

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

SCHEDULED COMING SOON

Epilogue

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

URL Input Component