Sunny Books
What we have

HTML5 form elements

Forms are the primary way that users can interact with the websit. HTML5 provides more simple way of creating usable and even extensible forms. HTML5 has three new form elements: datalist, keygen, and output.

New Form Elements

Tag Description Browser Support
<datalist> Specifies a list of pre-defined options for input controls
<keygen> Defines a key-pair generator field (for forms)
<output> Defines the result of a calculation

HTML5 <datalist> Element

The <datalist> element specifies a list of pre-defined options for an <input> element. The <datalist> element is used to provide an "autocomplete" feature on <input> elements. Users will see a drop-down list of pre-defined options as they input data.

Example

type something in the input box

The code for this example:

    <label>What fruit do you like? </label><input list="fruit">
    <datalist id="fruit">
       <option value="Apple">
       <option value="Orange">
       <option value="Banana">
       <option value="Grape">
       <option value="Peach">
       <option value="Lemon">
    </datalist> 

HTML5 <output> Element

The output element represents the result of a calculation.

Example

+ =

The code for this example:

<form onsubmit="return false" oninput="o.value = parseInt(a.value) + parseInt(b.value)">
    <input name="a" type="number" step="any"> +
    <input name="b" type="number" step="any"> =
    <output name="o"></output>
</form>

Another example

Caculate total seconds


The code for this example:

<form onsubmit="return false" oninput="o.value = parseInt(h.value)*3600 + 
parseInt(m.value)*60 + parseInt(s.value)"> <label>Hour: </label> <input name="h" type="number" step="1" size="6"> <label>Minute: </label> <input name="m" type="number" step="1" size="6"> <label>Second: </label> <input name="s" type="number" step="1" size="6"> <label>Total seconds</label> <output name="o"></output> </form>
SUNWEB EXPERT