Monday, 13 February 2017

HTML 5 Form

HTML 5 Form New Element Example

Form is   use to collect data from user. HTML 5 add some new control which helps and minimize your coding for date,time,email etc input. In following code I have differentiate HTML 4 and HTML 5 control sperately.

<!DOCTYPE html>
<html>

   <head>
      <meta charset="utf-8">
      <title>HTML5 Form Tutorial</title>
   </head>
      <h1 align="center">Girfa : Student Help Form New Element</h1><hr>
   <body>  
  

     <form action="#" method="post">
           
             <table cellspacing="5">
             <tr>
                        <td colspan="2" align="center"><h3>HTML 4 Control</h3></td>
                  </tr>
                  <tr>
                        <td align="right">Text Box: </td>
                        <td><input type="text"></td>
                  </tr>
                  <tr>
                        <td align="right">Password: </td>
                        <td><input type="password"></td>
                  </tr>
                  <tr>
                        <td align="right">Check Box: </td>
                        <td>
                              <input type="checkbox" >Choice 1
                              <input type="checkbox" >Choice 2
                        </td>
                  </tr>
                  <tr>
                        <td align="right">Radio Button: </td>
                        <td><input type="radio" name="radio" checked="checked">Choice 1 <input type="radio" name="radio">Choice 2</td>
                  </tr>
                  <tr>
                        <td align="right">Hidden: </td>
                        <td><input type="hidden" value="This is hidden Data"></td>
                  </tr>
                  <tr>
                        <td align="right">File : </td>
                        <td><input type="file"></td>
                  </tr>
                  <tr>
                        <td align="right">Image : </td>
                        <td><input type="image" src="image.jpg"></td>
                  </tr>
                 
                  <tr>
                        <td align="right">Buttons : </td>
                        <td>
                              <input type="button" value="Sample Button" >
                              <input type="submit" >
                              <input type="reset" >
                        </td>
                  </tr>
                  <tr>
                        <td colspan="2" align="center"><h3>HTML 5 Control</h3></td>
                  </tr>
                  <tr>
                        <td align="right">Date Time  : </td>
                        <td><input type = "datetime" name = "newinput" /></td>
                  </tr>
                  <tr>
                        <td align="right">Local Date and Time : </td>
                        <td> <input type = "datetime-local" name = "newinput" /></td>
                  </tr>
                  <tr>
                        <td align="right">Date   : </td>
                        <td> <input type = "date" name = "newinput" /></td>
                  </tr>
                  <tr>
                        <td align="right">Month : </td>
                        <td> Month : <input type = "month" name = "newinput" /></td>
                  </tr>
                  <tr>
                        <td align="right">Week : </td>
                        <td> Week : <input type = "week" name = "newinput" /></td>
                  </tr>
                  <tr>
                        <td align="right"> Time  : </td>
                        <td> Time : <input type = "time" name = "newinput" /></td>
                  </tr>
                  <tr>
                        <td align="right"> Select Number : </td>
                        <td>  <input type = "number" min = "0" max = "10" step "1"
            value = "5" name = "newinput" /></td>
                  </tr>
                  <tr>
                        <td align="right"> Select Range :</td>
                        <td>
          <input type = "range" min = "0" max = "10" step "1"
            value = "5" name = "newinput" /></td>
                  </tr>
                  <tr>
                        <td align="right"> Email   : </td>
                        <td>  <input type = "email" name = "newinput" /></td>
                  </tr>
                  <tr>
                        <td align="right"> URL   : </td>
                        <td>    <input type = "url" name = "newinput" /></td>
                  </tr>
                  <tr>
                        <td align="right"> Submit   : </td>
                        <td>    <input type = "submit" name = "newinput" /></td>
                  </tr>
             </table>
  
      </form>
     
   </body>  

</html>