Html tutorials

Html tutorials session 10 :

Html session 10 theory :

Autocomplete Attribute :

Many browsers help user in filling forms by providing data in the input fields, such as email and tel, based on their earlier input. In many situations, the autocomplete behavior may not be secure, especially with certain fields accepting password or credit card number data. 
HTML5 offers an autocomplete attribute which provides control on prefilled values displayed in the fields. It must be specified on the form element which applies for all input fields or on particular input fields. The input element that can support autocomplete are text, url, tel, password, datepickers, range, and color. 
The autocomplete feature comprises two states namely, on and off. The on state indicates that the data that is not sensitive can be remembered by the browser. Similarly, the off state indicates that the data will not be remembered. Such data may be sensitive and not safe for storing with the browsers. Hence, user needs to explicitly provide the data each time while filling the form. 
By default, many browsers have the autocomplete feature enabled in them. The browsers that do not support autocompletion, can be turned on or off for this behavior by specifying autocomplete attribute either on the form or specific input elements.

New Form Elements 
HTML5 has introduced some brand new elements that can be incorporated in the Web pages. These new elements are specifically designed to be used with the JavaScript. When combined with JavaScript, these new elements can be more functional. 
At present, all the browsers do not provide the support for these new elements. If the control is not supported by the browser, then it displays element as a text field. Opera provides the support for all the new form elements. 
The new form elements introduced in HTML5 are as follows: 
Datalist 
Progress 
Meter 
            
            Output 

Datalist 
Datalist is a form-specific element. It provides a text field with a set of predefined list of options that are displayed in a drop-down list. When the text field receives focus, a list of options is displayed to the user. 
The <datalist> element is very similar to standard <select> element available in earlier HTML. The only difference in datalist is that it allows the user to enter data of their choice or select from the suggested list of options. 
The lists of options for the <datalist> element are placed using the option element. Then, the datalist is associated with an input element using the list attribute. The value of the list attribute is the value of id attribute provided with the <datalist> element. The same datalist can be associated with several input fields. At present, only Opera browser provides the support for the datalist. 
Code Snippet 20 shows the syntax of providing the <datalist> element on the form. 

Code Snippet : 

<label> Select the mode of payment: </label> 
<input type=”text” name=”payment” list=”paymentlist” /> 
<datalist id=”paymentlist”> 
<option value=”Cash-on-Delivery”> 
<option value=”Net Banking”> 
<option value=”Credit Card”> 
<option value=”Debit Card”> 
<option value=”e-Gift Voucher”> 
</datalist> 
<input type=”submit” value=”submit”/>  

In the code, a datalist requires value attribute to be added with the <option> tag. Values nested between the opening and closing <option> tag will not be displayed in the datalist menu.

Progress 
The progress element represents the current status of a task, which gradually changes as the task heads for completion. This is not a form-specific element. 
For example, when the user downloads any file from a particular Web page, the download task is represented as a progress bar. 
Code Snippet 21 shows the syntax for providing progress element on the form. 

Code Snippet 21: 

<label> Downloading status: </label> 
<progress value=”35” max=”100” ></progress> 
<input type=”submit” value=”submit”/>  

In the code, the progress element contains two attributes namely, max and value. The max attribute declares the maximum value for the task to be processed for its completion. 

The value attribute indicates how much task has been processed so far. 

Meter 
The meter element represents a measurement scale for a known range. The known range have the definite minimum and maximum values to measure the data on the scale. For example, a meter element can be used to represent measurements, such as disk usage space, fraction value, or significance of a query result. All these have a known maximum value defined for them. The meter element cannot indicate age, height, or weight, as maximum values for them cannot be specified. 
Code Snippet 22 shows the code of the meter element. 

Code Snippet 22: 

<label> Total score of marks: </label> 
0 &nbsp; <meter min=”0” max=”400” value=”180” title=”numbers scored” low=”120” high=”300”> </meter> &nbsp; 400<br/> 
<input type=”submit” value=”submit”/>  


In the code, the meter element contains six attributes that are used to determine the measurements in the known range. 
The min and max attribute specifies the minimum and maximum value that sets bounds for the range. The default value for the max attribute is 1. The value attribute specifies the current measured value. The high and low attributes specifies the range of values that can be considered as high or low for the given range.

For example, in the given range of scores, the range of values below 120 will be considered low, but anything above 300 will be considered as high. 
There is another attribute named optimum which refers to the ideal value for the measurement. 
Output 
The output element displays the results of a calculation on a form. The result values displayed in the output element are processed from the other form elements. For example, the output element might be used to display the total cost on the purchase items after calculating discount amount in a registration form or purchase order form. 
Code Snippet 23 shows the calculation of data from other form elements to be displayed in the output element. 

Code Snippet : 

<form oninput=”x.value = parseInt(type.value)* 
parseInt(duration.value)”> 
<label>Membership Type:</label> 
<select name=”type”> 
<option value=”400”>Gold - $400</option> 
<option value=”500”>Silver - $500</option> 
<option value=”600”>Platinum - $600</option> 
</select>

<label>Duration [years]:</label> 
<input type=”number” value=”0” name=”duration” 
min=”1”max=”5” step=”1” /> 
<label> Annual Payment Fees: $.</label> 
<output name=”x” for=”type duration”></output>  
 

In the code, for attribute relates the output element with the elements whose values are taken for calculation. The form oninput event handles the input event which is fired whenever the value of the elements change on receiving input from the user. A JavaScript code can also be written to update the values for the output element.