HTML5 <form> Elements

  • <form> Element used to transfer data to server.
  • <form> Element contain many other elements like Textfield, Textarea, Checkbox, radiobutton etc.
  • <input> Element is the most impotant element in <form> Element.
  • <form> Element used to create HTML form like Login form.

HTML5 has new form elements.

  • <datalist>
  • <keygen>
  • <output>
Note: Some of the browsers not supported the form elements but their are no such problem because that elements display in your browser as simple text box.
  • <datalist> Element

    • <datalist> used as predefined choice for user in <input> tag .
    • <datalist> more likely as autocompleter feature.
    • When they input some text in <input> tag a dropdown list come if text match with any predefined option.
    Example :
    <input list="Technology">
    <datalist id="Technology">
    <option value="Android">
    <option value="C">
    <option value="Cobol">
    <option value="C++">
    <option value="C#">
    <option value="Delphi">
    <option vsalue="Java">
    <option value="Pascal">
    <option vsalue="Perl">
    <option value="Ruby">
    <option vsalue="Visual Basic">
    <option vsalue="VIsual C++">
    </datalist>
    OUTPUT
    Technologies:  
    
    
  • <keygen> Element

    • To secure your webpage you can use <keygen> elemelnt.
    • <keygen> element used to authenticate users.
    • when you use it the <keygen> generate two keys.One public and one private.
    • Private key stored on server and public key stored at local machine.
    • Public key used to authenticate users in future.
    Example :
    <form>Username: 
    <input type="text" name="usr_name"> Encryption:
    <keygen name="security">
    <input type="submit" name="Submit" onclick="popup()">
    </form>
    OUTPUT
    Username: Encryption:
  • <output> Element

    • <output> Element used to display the result of an calculation.
    Example :
    <form oninput="x.value=parseInt(a.value)+0">
    0<input type="range" id="a" value="50">100 
    =<output name="x" for="a b"<>/output>
    </form>
    
    OUTPUT
    0 100 =
    Some Attributes used with <output> Element
    • For : For attribute used to show the relationship between output element and other element.
    • <output name="x" for="a b"</output>
    • Placeholder : Placeholder attribute used to provide hint to user to input in textfield. it is also used with <input> and <textarea> element
    • <input type="text" name="phone_number"
      	placeholder="Only Number ..."/>
      
    • Required : Required attribute used to perform validation on text field to does not left empty. It is like as java script to overcome the headache of it.
    • <input type="text" name="first name" required/>
    • Autofocus : Autofocus attribute used to focus on particular text field on the time of form load.
    • <input type="text" name="search" autofocus/>