pattern =" regexp "

Parameters :

regexp -	Specifies a regular expression that the <input> element's value is checked against

Example :

# An <input> element with type="password" that must contain 8 or more characters:
<input type="text" id="country_code" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">

# An <input> element with type="password" that must contain 8 or more characters that are of at least one number, and one uppercase and lowercase letter:
<input type="password" id="pwd" name="pwd" pattern=".{8,}" title="Eight or more characters">

# An <input> element with type="email" that must be in the following order: characters@characters.domain (characters followed by an @ sign, followed by more characters, and then a "."
# After the "." sign, add at least 2 letters from a to z:
<input type="email" id="email" name="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$">

# An <input> element with type="search" that CANNOT contain the following characters: ' or "
<input type="search" id="search" name="search" pattern="[^'\x22]+" title="Invalid input">

# An <input> element with type="url" that must start with http:// or https:// followed by at least one character:
<input type="url" id="website" name="website" pattern="https?://.+" title="Include http://">

The pattern attribute specifies a regular expression that the <input> element's value is checked against on form submission.

Note: The pattern attribute works with the following input types: text, date, search, url, tel, email, and password.

Tip: Use the global title attribute to describe the pattern to help the user.

<input x-webkit-speech>

Example :

<input type="text" x-webkit-speech>

The x-webkit-speech attribute will indicate to the browser that the user should be given the option to complete this form field using speech input.

When speech input is enabled the element will have a small microphone icon displayed on the right of the input. Clicking on this icon will launch a small tooltip to show that your voice is now being recorded. You can also start speech input by focussing the element and pressing Ctrl + Shift + . on Windows, or Command + Shift + . on Mac.

1. onblur - looses focus.
2. onchange - there is a change.
3. onclick - clicks.
4. ondblclick - double clicks.
5. onfocus - gets focus.
6. onkeydown - presses a key.
7. onkeyup - releases a key.
8. onmousedown - moves the mouse over an element.
9. onmouseout - moves the mouse out of an element.
10. onmouseover - moves the mouse over an element.
11. onselect - selects a text.

<input type="file" capture="environment | user">

Parameter :

       user - The user-facing camera and/or microphone should be used.
environment	- The outward-facing camera and/or microphone should be used

Example :

# Opens back facing camera to take video
<input type="file" capture="environment" accept="video/*">

# Opens front facing camera to take photo
<input type="file" capture="user" accept="image/*">

The capture attribute specifies that, optionally, a new file should be captured, and which device should be used to capture that new media of a type defined by the accept attribute.

Values include user and environment. The capture attribute is supported on the file input type.

The capture attribute takes as its value a string that specifies which camera to use for capture of image or video data, if the accept attribute indicates that the input should be of one of those types.

Note these work better on mobile devices; if your device is a desktop computer, you'll likely get a typical file picker.

1. button - Defines a clickable button (mostly used with a JavaScript to activate a script).
2. checkbox - Defines a checkbox.
3. color - Defines a color picker.
4. date - Defines a date control (year, month, day (no time)).
5. datetime-local - Defines a date picker.
6. decimal - Fractional numeric input keyboard containing the digits and decimal separator for the user's locale.
7. email - A virtual keyboard optimized for entering email addresses. Typically includes the @ character as well as other optimizations.
8. file - Defines a file-select field and a 'Browse' button for file uploads.
9. hidden - Defines a hidden input field.
10. image - Defines an image as the submit button.
11. month - Defines a month and year control.
12. none - No virtual keyboard. For when the page implements its own keyboard input control.
13. number - Numeric input keyboard, but only requires the digits 0-9. Devices may or may not show a minus key.
14. password - Defines a password field.
15. radio - Defines a radio button.
16. range - Defines a control for entering a number whose exact value is not important (like a slider control).
17. reset - Defines a reset button.
18. search - A virtual keyboard optimized for search input. For instance, the return/submit key may be labeled Search.
19. submit - Defines a submit button.
20. tel - A telephone keypad input, including the digits 0-9, the asterisk *, and the pound # key.
21. text - Standard input keyboard for the user's current locale.
22. time - Defines a control for entering a time (no timezone).
23. url - A keypad optimized for entering URLs. This may have the / key more prominent, for example.
24. week - Defines a week and year control (no time zone).

 <link rel="icon" type="image/x-icon" href="/images/favicon.ico">

Parameter :

type - The type of image.
href - Image path.

Add the code after the <title> element to add a favicon to your website.

The required rel attribute specifies the relationship between the current document and the linked document/resource.

• Specifies that the browser should preemptively connect to the target resource's origin. (preconnect)
• Specifies that the browser should preemptively fetch and cache the target resource as it is likely to be required for a follow-up navigation (prefetch)
• Specifies that the browser agent must preemptively fetch and cache the target resource for current navigation according to the destination given by the "as" attribute (and the priority associated with that destination). (preload)

The ::marker selector applies the styles to the list-styles.

This attribute specifies whether a browser should load an image immediately or to defer loading of off-screen images until for example the user scrolls near them.

In order to avoid any special characters showing up incorrectly make sure to specify the charset.

Add an extra touch of branding by customizing the color of the mobile browser header.

Responsive pages are a must so no page is complete without this viewport tag.