DataList Element
It is used to display a list of predefined options. As soon as user starts typing a word a list of option will be shown in the drop down. It is used with the input element, in which the list attribute is specified. The value of list attribute is similar to id attribute of datalist.
example
<!Doctype Html>
<html>
<body>
<h1>Datalist</h1>
<form>
<p>select any general name :</p>
<input type="text" name="generalname" list="general">
<datalist id="general">
<option value="Anti oxidant">
<option value="barium">
<option value="calcium">
<option value="decimal">
<option value="detergent">
</datalist>
</form>
</body>
</html>
Progress Element
It is used to display the progress of a particular task. It can be used with javascript to display the progress.
It has two attribute value and max. value attribute specifies the, how much the task has been completed and the max attribute is used to specify the total progress to be made.
Attributes of Progress Element
It is used to display a list of predefined options. As soon as user starts typing a word a list of option will be shown in the drop down. It is used with the input element, in which the list attribute is specified. The value of list attribute is similar to id attribute of datalist.
example
<!Doctype Html>
<html>
<body>
<h1>Datalist</h1>
<form>
<p>select any general name :</p>
<input type="text" name="generalname" list="general">
<datalist id="general">
<option value="Anti oxidant">
<option value="barium">
<option value="calcium">
<option value="decimal">
<option value="detergent">
</datalist>
</form>
</body>
</html>
Progress Element
It is used to display the progress of a particular task. It can be used with javascript to display the progress.
It has two attribute value and max. value attribute specifies the, how much the task has been completed and the max attribute is used to specify the total progress to be made.
Attributes of Progress Element
- value- specifies the value of progress element.
- max- specifies the maximum value of progress element.
example
<!Doctype Html>
<html>
<body>
<h1>Progress element</h1>
Current progess is
<progress value="200" max="500"
</progress>
</body>
</html>
Meter Element
It is used to define the scalar measurement. It is used to display a range
Attributes of Meter Element
- value- specifies the value of the meter element.
- min- specifies the minimum value of meter element.
- max- specifies the maximum value of the meter element.
- low- specifies a range that is considered as low value.
- high- specifies a range that is considered as high value.
- optimum- specifies a range that is considered as optimum or best value.
- form- refer to the id of the form element.
example
<!Doctype Html>
<html>
<body>
<h1>Meter element</h1>
<meter value="5" min="0" max="10" style="width="200px"></meter>passing score<br/>
<meter value="8" min="0" max="10" style="width="200px"></meter>your score
</body>
</html>
Posts
0 comments:
Post a Comment