HTML5 Form Elements Tutorial
HTML5 has new form elements. These are following:
<wbr>
<progress>
<bdi>
<rubi>
<dialog>
<meter>
HTML5 <wbr> form element:
The wbr stand for Word Break. The <wbr> tag defines where in a text it would be ok to add a line-break.This tag is employed where a word is too long, or you are afraid that the browser will break your lines at the wrong place, you can use the wbr tag to add word break opportunities. The wbr element support by all the browser except the internet explorer.
Example:
<p>To learn PHP, you must be know about XML<wbr> HTML and CSS.<wbr /></p>
Output:
To learn PHP, you must be know about XML HTML and CSS. HTML5 <Progress> form element:
The progress element is new in HTML5. The progress html5 element describe the progress of a task. All the major browser support this element except the internet explorer 9 or earlier versions.
Example:
Scanning progress:
<progress value=”81″ max=”100″>
</progress>
Output:
Scanning progress: HTMl5 <bdi> form element:
Bdi stands for Bi Directional Isolation. It Isolates a section of text, which may be formatted during a completely different direction from alternative text outside it. Bdi tag support two browser only i.e. Firefox and Chrome.
Example:
<p>This Persian word <bdi>DAHSHOG NOOHK </bdi> is automatically displayed right-to-left.</p>
Output:
This Persian word KHOON GOHSHAD is automatically displayed right-to-left. HTML5 <rubi> form element:
The ruby element is employed to indicates a ruby annotation. It display the pronunciation of East Asian characters. The ruby tag is new in HTML5. Almost all the browser support this tag.
Example:
<ruby>
金<rt>Gold</rt>
銀<rt>Silver</rt>
銅<rt>copper</rt>
碳<rt>carbon</rt>
</ruby>
Output:
金Gold
銀Silver
銅copper
碳carbon
HTML5 dialog form element:
The <dialog> element indicates a dialog between a number of people.The <dialog> tag defines a dialog box, inspector or window.
Example:
<html>
<body>
<dialog>
<dt>Raj:</dt>
<dd>How are you John ?</dd>
<dt>John:</dt>
<dd>I am very well.</dd>
</dialog>
</body>
</html>
Output:
Raj:
How are you John ?
John:
I am very well. HTML5 <meter> form element:
The meter element is employed to specify a scalar measurement within a known range or a fractional value. It is also known as a gauge.This tag is new in html5 element tutorial. Almost all the browser support this tag except the internet explorer.
Example:
<p>Poling result:</p>
<dl>
<dt>Party a </dt>
<dd><meter value=”9″ min=”0″ max=”10″>9 out of 10</meter></dd>
<dt> Party b </dt>
<dd><meter value=”7″ min=”0″ max=”10″>7 out of 10</meter></dd>
</dl>
Output:
Poling result: Party a 9 out of 10
Party b 7 out of 10
