Category Archives: xHtml

progress Element: HTML5

Lets look at the progress element of HTML5.

progress element html5 progress bar progress Element: HTML5

You could implement this progress element of HTML5 with the file upload or the user form filling etc, to indicate the amount of upload or the profile completion.

HTML file
index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
< !DOCTYPE html>
<html>
<head>
<title>progress Element: HTML5</title>
<link href="myStyle.css" rel="stylesheet"/>
</head>
<body>
 
<form>
<label>Progress: </label>
 <progress value="50" max="100">50%</progress>
</form>
 
</body>
</html>

Here we have a progress element, with 100 as max and 50 as it’s value. This way, the progress bar indicates that the progress is 50% complete. Also there is a text between the progress tag, which is used as a fall back text for browsers which do not yet support progress element of HTML5.

CSS file associated with this is same as present at pattern and title Attribute of Form Field: HTML5

progress element – progress bar: HTML5


You need to a flashplayer enabled browser to view this YouTube video

YouTube Link: http://www.youtube.com/watch?v=s1tfYfCpZx8 [Watch the Video In Full Screen.]



Change the number present in value and max attribute and look at the visual effect/indication of the progress on the browser.

Note: In real time application development, you could fetch the numbers for value and max attribute dynamically using JavaScript. This way, the effects will be real and it creates the illusion that the progress is being made!

color Input Type: HTML5

color input type fields expect the user to pick the color from the color palette. Once the user selects the color its corresponding hexadecimal value is being stored in the input field.

form input type color type html5 technotip color Input Type: HTML5

Demo

There are jQuery plugins to accomplish this task, but with HTML5 we need not use any plugins to accomplish this!

HTML file
index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
< !DOCTYPE html>
<html>
<head>
<title>color Input Type: HTML5</title>
<link href="myStyle.css" rel="stylesheet" />
<script src="myScript.js"></script>
</head>
<body onload="fetch()">
 
<div>
	<label for="color">Color pick: </label>
	 <input name="color" type="color" id="get" onchange="fetch()"/><br />
	<label for="hexa">Hex Code: </label>
	 <input name="hexa" type="text" id="put"/><br />
</div>
 
</body>
</html>

Here we have 2 input fields of type color and text respectively. Once the user selects a color from the color palette, the corresponding hexadecimal value is shown in the text input type field.

JavaScript file
myScript.js

1
2
3
4
5
function fetch()
{
	var get = document.getElementById("get").value;
	document.getElementById("put").value = get;
}

Once the fetch method is called: it fetches the value present in the (color)input field and assigns it to text input field.

CSS file associated with this is same as present at pattern and title Attribute of Form Field: HTML5

Form Input Type – color: HTML5


You need to a flashplayer enabled browser to view this YouTube video

YouTube Link: http://www.youtube.com/watch?v=MiCOVDrVH44 [Watch the Video In Full Screen.]



Note: In real production server, you need not use two input fields as shown in this video tutorial. You can simply make use of the color input type and once you submit the form, you’ll get hexadecimal code value in place of the color input field. If you have a large audience still using Internet Explorer or other older browsers, then you can use jQuery plugin to accomplish the same task across all major browsers.

date time Input Type: HTML5

Today lets learn some very important input types of HTML5:

datetime
datetime-local
date
time
week
month

form input type date time type html5 technotip date time Input Type: HTML5

datetime input type is supported by Opera browser, but as of now(2013), Google Chrome doesn’t support it. All other input date time related input types are supported by Google Chrome.

HTML file: month input type
index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
< !DOCTYPE html>
<html>
<head>
<title>date picker: HTML5</title>
<link href="myStyle.css" rel="stylesheet" />
</head>
<body>
 
<form>
	<label for="dt">Date: </label>
	 <input name="dt" type="month" min="2013-01" max="2013-09"/>
	 <input type="submit"/>
</form>
 
</body>
</html>

Here we have a month type input field which has a minimum allowed month as 2013-01 and a maximum allowed month as 2013-09.

HTML file: date input type
index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
< !DOCTYPE html>
<html>
<head>
<title>date picker: HTML5</title>
<link href="myStyle.css" rel="stylesheet" />
</head>
<body>
 
<form>
	<label for="dt">Date: </label>
	 <input name="dt" type="date"/>
	 <input type="submit"/>
</form>
 
</body>
</html>

Here we have a date input type, which shows a date picker in the UI.

HTML file: time input type
index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
< !DOCTYPE html>
<html>
<head>
<title>date picker: HTML5</title>
<link href="myStyle.css" rel="stylesheet" />
</head>
<body>
 
<form>
	<label for="dt">Date: </label>
	 <input name="dt" type="time"/>
	 <input type="submit"/>
</form>
 
</body>
</html>

Here we have a time input type, we could even specify the fractional seconds. Look for the syntax at the end of this post.

HTML file: datetime input type
index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
< !DOCTYPE html>
<html>
<head>
<title>date picker: HTML5</title>
<link href="myStyle.css" rel="stylesheet" />
</head>
<body>
 
<form>
	<label for="dt">Date: </label>
	 <input name="dt" type="datetime"/>
	 <input type="submit"/>
</form>
 
</body>
</html>

datetime input type which signifies Universal Time Convention(UTC).

HTML file: datetime-local input type
index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
< !DOCTYPE html>
<html>
<head>
<title>date picker: HTML5</title>
<link href="myStyle.css" rel="stylesheet" />
</head>
<body>
 
<form>
	<label for="dt">Date: </label>
	 <input name="dt" type="datetime-local"/>
	 <input type="submit"/>
</form>
 
</body>
</html>

Here we have a datetime-local input type, which takes the input based on the local time zone of the user’s machine.

HTML file: week input type
index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
< !DOCTYPE html>
<html>
<head>
<title>date picker: HTML5</title>
<link href="myStyle.css" rel="stylesheet" />
</head>
<body>
 
<form>
	<label for="dt">Date: </label>
	 <input name="dt" type="week"/>
	 <input type="submit"/>
</form>
 
</body>
</html>

week input type gives date picker UI and allows user to select the entire date.

Form Input Type – date time: HTML5


You need to a flashplayer enabled browser to view this YouTube video

YouTube Link: http://www.youtube.com/watch?v=VKRuSryBaNk [Watch the Video In Full Screen.]



Related Read: Format Date and Insert Into Database Table: PHP

Note:
We can specify value, min, max and step attributes for all these input types. And the format for it is as shown below:

date YYYY-MM-DD default step 60 seconds

time HH:MM:SS.FF default step 1 Day (SS.FF means seconds and fractional seconds)

datetime YYYY-MM-DDTHH:MM:SS.FFZ default step 60 seconds (T and Z means the TimeZone, these alphabets/characters must be literally present in the format)

datetime-local YYYY-MM-DDTHH:MM:SS.FF default step 60 seconds (albhabet/character/letter T must be literally present in the format)

week YYYY-WNN default step of 1 week (letter W means the week, this alphabet/characters must be literally present in the format)

month YYYY-MM default step of 1 month

range Input Type: HTML5

Browsers which support range input type know that the field is used for entering a number with in a given range.

form input type range type html5 technotip range Input Type: HTML5

User Interface(UI) enhancement wise, you may get a slider control to select a range of number. You can even use min, max and step attributes to provide additional control for the field – for setting the range.

HTML file
index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
< !DOCTYPE html>
<html>
<head>
<title>range Input Type: HTML5</title>
<link href="myStyle.css" rel="stylesheet" />
<script src="myScript.js"></script>
</head>
<body>
 
<form>
	<label>Range(2 to 10): </label>
	 <input type="range" min="2" max="10" id="get" step="0.2" onchange="fetch()"/>
	 <input type="number" min="2" max="10" step="0.2" id="put" />
	 <input type="submit"/>
</form>
 
</body>
</html>

Here we have 2 input fields of type range and number respectively. Both having minimum allowed value as 2 and maximum allowed value as 10, and a step of 0.2 (fractional value). The number input field is taken for the sake of illustrating the value selected by the user using the range input field – by using(sliding) the slider.

JavaScript file
myScript.js

1
2
3
4
5
function fetch()
	{
		var get  = document.getElementById("get").value;
		document.getElementById("put").value = get;
	}

Here we fetch the value selected by the user using the slider and assign the value to the number input field.

CSS file associated with this is same as present at pattern and title Attribute of Form Field: HTML5

Form Input Type – range: HTML5


You need to a flashplayer enabled browser to view this YouTube video

YouTube Link: http://www.youtube.com/watch?v=YecwKiFBt0s [Watch the Video In Full Screen.]



Note: Browsers which do not support range input type, simply fall back to text input type. However, you need to validate the user entered data at server-side for more security. Client side validation is done mainly for the sake of creating the illustration of speed of validating the data and for a better user experience.

number Input Type: HTML5

number input type indicates that the input field is used for entering numbers.

form input type number type html5 technotip number Input Type: HTML5

Advantages of using number input type:
1. Browsers which support HTML5, provides useful user interface enhancement by providing up and down arrow/tickers to increment and decrement the number.
2. You get a customized keyboard which is optimized for numeric inputs on mobile devices which supports number input type.
3. Using attributes like min, max and step, you can have more control. You can specify the minimum, maximum values the field takes and also you can specify the step for incrementing and decrementing the number using arrow marks.
4. Basic validation to check if the user entered numeric value or not.

HTML file
index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
< !DOCTYPE html>
<html>
<head>
<title>number Input Type: HTML5</title>
<link href="myStyle.css" rel="stylesheet" />
</head>
<body>
 
<form>
	<label for="no">Number: </label>
	 <input name="no" type="number" value="5" min="2.0" max="10.0" step="0.2" />
	 <input type="submit"/>
</form>
 
</body>
</html>

Here we have a number input type, with minimum allowed value of 2.0 and a maximum allowed value of 10.0 and a step of 0.2 (fraction).

CSS file associated with this is same as present at pattern and title Attribute of Form Field: HTML5

Form Input Type – number: HTML5


You need to a flashplayer enabled browser to view this YouTube video

YouTube Link: http://www.youtube.com/watch?v=rIiIfqS8190 [Watch the Video In Full Screen.]



Note: Browsers which do not support number input type, simply fall back to text input type, so you can go ahead and implement number input type in your projects without worrying. It’s a good practice to even validate the code at server-side, since browsers can be easily tricked and wrong entries can be made using form elements.

Tel Input Type: HTML5

Lets look at tel Input Type of HTML5 forms.

form input type tel type html5 technotip Tel Input Type: HTML5

In this video, I’ll show you that there are no interface changes to tel type input fields. And there are no actual behavioural changes too.

Only advantages, as for now, with tel type input fields are:
1. Screen readers pickup these tel type input fields and hint the visually challenged people that they need to enter their telephone number in the input field.
2. Mobile device browsers which are optimized to work for HTML5, will show up a customized keyboard to the user to enter telephone number rather than the regular text based keyboard.

HTML file
index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
< !DOCTYPE html>
<html>
<head>
<title>tel Input Field: HTML5</title>
<link href="myStyle.css" rel="stylesheet" />
</head>
<body>
 
<form>
<label>Text:</label>
	<input type="text"/><br />
<label>Tel:</label>	
	<input type="tel"/><br />
	<input type="submit"/>
</form>
 
 
</body>
</html>

Here we have 2 input fields of type text and tel respectively. Both these have similar visual appearance, and behave much the same on our regular computer browsers.

CSS file associated with this is same as present at pattern and title Attribute of Form Field: HTML5

Form Input Type – tel: HTML5


You need to a flashplayer enabled browser to view this YouTube video

YouTube Link: http://www.youtube.com/watch?v=AcnNuyqLY44 [Watch the Video In Full Screen.]



Note: tel type input fields do not validate the user input to check if she entered a telephone number or a random text. Because a telephone number has a wide range of acceptance – like including a hyphen or the number of digits in a phone number vary etc..

URL Input Type: HTML5

Lets look at URL Input Type of HTML5 forms.

form input type url type html5 technotip URL Input Type: HTML5

In this video, we illustrate how you can implement simple URL validation using url input type.

HTML file
index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
< !DOCTYPE html>
<html>
<head>
<title>URL Input Type: HTML5</title>
<link href="myStyle.css" rel="stylesheet" />
</head>
<body>
 
<form>
 <label for="uri">URL: </label>
	<input type="url"/>
	<input type="submit"/>
</form>
 
</body>
</html>

Simple url type input field checks for the presence of http:// followed by some domain name, dot and a valid TLD(Top Level Domain) name.

Form Input Type – url: HTML5


You need to a flashplayer enabled browser to view this YouTube video

YouTube Link: http://www.youtube.com/watch?v=BnVK7jecJ0o [Watch the Video In Full Screen.]



Note:
It doesn’t ping the entered URL to check if the URL is actually present or not. It simply checks to make sure the user entered information starts with http:// and ends with a dot followed by a valid TLD.

If viewed on a HTML5 compatible mobile browser, it pops up custom keyboard to facilitate the user to enter URL.

Email Input Type: HTML5

Lets look at email input type of HTML5 forms.

form input type email type html5 technotip Email Input Type: HTML5

In this video, we illustrate how you can implement simple email validation using email input type.

HTML file
index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
< !DOCTYPE html>
<html>
<head>
<title>Email input type: HTML5</title>
<link href="myStyle.css" rel="stylesheet" />
</head>
<body>
 
<form>
<label for="mail">Email: </label>
 <input type="email"/><br />
 <input type="submit"/>
</form>
 
</body>
</html>

Here we have an input field of type email. We haven’t implemented complicated JavaScript to check if the entered text actually contains a @ symbol and a valid TLD. email input type checks for all these small requirements to pass it as an email address.

Form Input Type – email: HTML5


You need to a flashplayer enabled browser to view this YouTube video

YouTube Link: http://www.youtube.com/watch?v=nxMBsVw8LXw [Watch the Video In Full Screen.]



Note:
It doesn’t validate the email address completely. Infact, it doesn’t check if the entered email address is actually a real email address or a dummy one. It simply checks for minimal thing in the entered text to determine if it is an email address or not – like @ symbol and a valid TLD(Top Level Domain) extension.

Also on mobile devices, when it encounters these email input type, user is prompted with keypad that aids in entering email address – like the @ symbol present on the same screen and need not to navigate to special symbols section on the keypad.

Form Input Type – search: HTML5

HTML5 introduces many new input types, and search is one of them.

form input type search type html5 technotip Form Input Type   search: HTML5

In this video I’m illustrating simple interface change that search type input fields bring, compared to the usual text type input fields.

HTML file
index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
< !DOCTYPE html>
<html>
<head>
<title>Form Input Type - search: HTML5</title>
<link href="myStyle.css" rel="stylesheet" />
</head>
<body>
 
<form>
	<label for="srch">Search: </label>
	 <input type="search" name="srch" /><br />
	<label for="txt">Text: </label>
	 <input type="text" name="txt"/><br />
	 <input type="submit"/>
</form>
 
</body>
</html>

Here we have 2 input fields, with type search and text respectively. This is to show a simple interface change between the two.

CSS file associated with this is same as present at pattern and title Attribute of Form Field: HTML5

Form Input Type – search: HTML5


You need to a flashplayer enabled browser to view this YouTube video

YouTube Link: http://www.youtube.com/watch?v=er7nOfllI1Q [Watch the Video In Full Screen.]



Note:
If the user’s browser doesn’t yet support search type, it’ll simply fall back to text type.

Browser manufacturers may even decide to show recent query as suggested entries by default with these search type input fields. And more interface changes may be implemented.

If you’re building application with search field, make sure to implement search type input fields and get the advantages of latest updates to search type input fields.

Text Selection API: HTML5

Before HTML5 we were using select() method to select the entire text/string present in the input field. We did not have more control to specify the selection start and end points ourselves. With HTML5 text selection API’s we could specify selection start and end points.

HTML file
index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
< !DOCTYPE html>
<html>
<head>
<title>selection of Text: HTML5</title>
<script src="myScript.js"></script>
</head>
<body>
 
<label for="name">Name: </label>
 <input type="text" id="name" value="Satish, CEO Technotip.com"/>
<button onclick="txtSelect()">Select</button>
 
</body>
</html>

Here we have a input box with some pre-populated text/string inside it. We also have a button, clicking on which we invoke txtSelect() method.

JavaScript file: select() method
myScript.js

1
2
3
4
5
function txtSelect()
{
	var input = document.getElementById("name");
	    input.select();
}

We select the input field by it’s id. Then, by using select() method we select the entire text present inside the input field. This is the old school method we used to select the text even before HTML5.

JavaScript file: selectionStart property
myScript.js

1
2
3
4
5
function txtSelect()
{
	var input = document.getElementById("name");
	    input.selectionStart = 3;
}

selectionStart is a HTML5 property that sets or gets the selection start points.

JavaScript file: selectionEnd property
myScript.js

1
2
3
4
5
6
function txtSelect()
{
	var input = document.getElementById("name");
	    input.selectionStart = 3;
	    input.selectionEnd   = 15;
}

This specifies the selection start and end points. Hence selects the text between these points. selectionEnd is a HTML5 property which sets or gets the selection end point.

JavaScript file: setSelectionRange() method
myScript.js

1
2
3
4
5
function txtSelect()
{
	var input = document.getElementById("name");
	    input.setSelectionRange(3, 20);
}

setSelectionRange(start, end) is a HTML5 method that sets the selection start and end point. In above case, text is selected from the index 3 and 20.

Text Selection API: HTML5


You need to a flashplayer enabled browser to view this YouTube video

YouTube Link: http://www.youtube.com/watch?v=P9P4ZX8c31E [Watch the Video In Full Screen.]



You can also try …
JavaScript file: getting selectionStart value
myScript.js

1
2
3
4
5
6
7
function txtSelect()
{
	var input = document.getElementById("name");
	    input.setSelectionRange(3, 20);
 
            alert(input.selectionStart);
}

This output’s value 3.

JavaScript file: getting selectionStart value
myScript.js

1
2
3
4
5
6
7
function txtSelect()
{
	var input = document.getElementById("name");
	    input.selectionStart = 10;
 
            alert(input.selectionStart);
}

This output’s value 10.

require attribute: HTML5

Lets see how require attribute of HTML5 works.

require attribute forces the user to enter some value. But it does not validate the user input.
Example: It makes sure if the email field has some value in it but doesn’t check if the user has entered valid email address or not. It only makes sure, the required field isn’t left empty.

require form field attribute html5 technotip require attribute: HTML5

HTML file
index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
< !DOCTYPE html>
<html>
<head>
<title>required attribute: HTML5</title>
<link href="myStyle.css" rel="stylesheet"/>
</head>
<body>
 
<form>
	<label for="name">Name: </label>
	 <input type="text" name="name" required/><br />
 
	<label for="age">Age: </label>
	 <input type="text" name="age"/><br />
 
 <input type="submit"/>	 
</form>
 
</body>
</html>

Here we have 2 input fields. First input field has been made required, by using require attribute.

CSS file associated with this is same as present at pattern and title Attribute of Form Field: HTML5

require attribute: HTML5


You need to a flashplayer enabled browser to view this YouTube video

YouTube Link: http://www.youtube.com/watch?v=yEVyYQjMaMU [Watch the Video In Full Screen.]



Note:
Server side validation is also equally important. Because someone might directly pass the value via the script present in the action field of form tag – if form uses GET method to pass user data.

Also note that, IE(Internet Explorer) doesn’t support require attribute, so you can make use of Javascript or jQuery to make sure IE users are taken care of.
Related Read: Registration Form Validation: PHP + jQuery + AJAX

Form novalidate attribute: HTML5

Today let us learn about novalidate and formnovalidate attributes of HTML5 form.

form novalidation html5 technotip Form novalidate attribute: HTML5

In this video tutorial I’m taking 2 input fields and making one input field as required. Also take 2 submit buttons, with one validating the user entered data and the other one bypassing the validation rules set.

HTML file: formnovalidate
index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
< !DOCTYPE html>
<html>
<head>
<title>novalidation: HTML5</title>
<link href="myStyle.css" rel="stylesheet"/>
</head>
<body>
 
<form>
	<label for="name">Name: </label>
	 <input type="text" name="name" required/><br />
 
	<label for="age">Age: </label>
	 <input type="number" name="age"/><br />
 
<input type="submit" value="Submit"/>
<input type="submit" value="Save" formnovalidate/>
</form>
 
</body>
</html>

Here we are using formnovalidate attribute on submit button which has a value of Save. This button bypasses the validation rules.

HTML file: novalidate
index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
< !DOCTYPE html>
<html>
<head>
<title>novalidation: HTML5</title>
<link href="myStyle.css" rel="stylesheet"/>
</head>
<body>
 
<form novalidate>
	<label for="name">Name: </label>
	 <input type="text" name="name" required/><br />
 
	<label for="age">Age: </label>
	 <input type="number" name="age"/><br />
 
<input type="submit" value="Submit"/>
</form>
 
</body>
</html>

Here I’ve added novalidate attribute directly to the form tag, which bypasses any validation rules written to it or to it’s child elements/tags.

CSS file associated with this is same as present at pattern and title Attribute of Form Field: HTML5

novalidate and formnovalidate attributes of HTML5 form


You need to a flashplayer enabled browser to view this YouTube video

YouTube Link: http://www.youtube.com/watch?v=BbU2KndW7Ho [Watch the Video In Full Screen.]



Why would we ever need novalidation for forms ?
Sometimes we enter a lengthy form and submit, but due to some validation mistakes all our entries gets erased, and the user may not have the patience to re-enter everything from beginning. He may skip it altogether. To avoid that, you can build an interface wherein user can save her data first and then can submit it after reviewing it. In such a situation we can make use of a temporary database table to store user entered information and display for review with appropriate messages to correct the wrong inputs – user can correct them and Submit.

pattern and title Attribute of Form Field: HTML5

Today lets see how we can make use of pattern attribute to validate the user input data and use title attribute to hint the user for right inputs.

pattern title attribute html5 regular expression technotip pattern and title Attribute of Form Field: HTML5

HTML file
index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
< !DOCTYPE HTML>
<html>
<head>
<title>pattern and title attribute: HTML5</title>
<link href="myStyle.css" rel="Stylesheet"/>
<meta charset="utf-8"/>
</head>
<body>
 
<form>
	<label for="name">Name: </label>
	 <input id="name" type="text" pattern="^[a-zA-Z]+$" title="Example: Satish"/><br />
 
	<label for="age">Age: </label>
	 <input id="age" type="text" pattern="^[0-9]{2}$" title="Example: 25" /><br />
 
	 <input type="submit" value="Done"/>
</form>
 
</body>
</html>

Here in the first input field, we’re restricting the input to only lower case and upper case alphabets. To the second input field, we’re restricting it to only 2 digits from 0 to 9.

CSS file
myStyle.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
label{
	width: 50px;
    float:left;
}
 
input{
	width: 200px;
}
 
form {
	padding: 5px;
	background-color: ivory;
	width: 300px;
	height: auto;
	border: 2px dotted black;
}

CSS styling to align the input fields and the labels, with background color to the form, which has a 2px black dotted border.

pattern and title Attribute of Form Field: HTML5


You need to a flashplayer enabled browser to view this YouTube video

YouTube Link: http://www.youtube.com/watch?v=TKLF0Aydcv4 [Watch the Video In Full Screen.]



Note: ^ symbol specifies the beginning and the $ symbol specifies the end of the input value.

You can share any simple/small to complex/big regular expression knowledge in the comment section below. Your time and effort is highly appreciated. Your knowledge and inputs will surely be helpful to many people around the world. Comment section is all yours icon smile pattern and title Attribute of Form Field: HTML5