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/>