New Form Elements in HTML5

HTML5 introduces a number of new form elements with new capabilities. A notable subset of these form elements is designed to let a program modify a part of the page dynamically.

Here are the new form elements and what you can do with them:

• datalist allows you to attach a list of suggestions to a text input element. As soon as the user begins to type in the text field, the list of suggestions appears and the user can choose from the suggestions with the mouse. Sample code for a name field:

  
  

        <label for = "txtList">Your name
          <input type = "text"
                 list = "names" 
                 id = "txtList"/>
          <datalist id = "names">
            <option value = "Andy">
            <option value = "Andrew">
            <option value = "Androcles">
          </datalist>
        </label>

  
  

  Opera is currently the only browser that supports this element, although you can use the <select> element inside the datalist object to get non-supportive browsers to display your code.

  
  



• meter indicates a numeric value that falls within a range. The tag supports a number of attributes:

  
  
  
  

  • value: If you don't specify a value, the first numeric value inside the <meter></meter> pair becomes the value.

    
    
  
  

  • max: The maximum possible value of the item.

    
    
  
  

  • min: The minimum possible value of the item.

    
    
  
  

  • high: If the value can be defined as a range, this is the high end of the range.

    
    
  
  

  • low: If the value can defined as a range, this is the low end of that range.

    
    
  
  

  • optimum: The optimal value of the element.

    
    
  
  
  
  

  The value, high, low, and optimum values should all be between min and max.

  
  

  Note that the meter element is used to output a numeric element. Use <input type = "range"> for numeric input within a range.

  
  

  Here is code for a simple meter range:

  
  

  <p>
      A 
      <meter min = "0"
             max = "10"
             value = "7"></meter>
    </p>

  
  



• output is meant to display text output. It indicates a section of the page that can be modified by a script (usually JavaScript). In this code fragment:

  
  

    <output id = "myOutput">
      This is the original value
    </output>
    <button onclick = "changeOutput()">
      change the output
    </button>

  
  

  When the button is pressed, it will call the changeOutput() JavaScript function, which could look like this:

  
  

    function changeOutput(){
      var myOutput = document.getElementById("myOutput");
      myOutput.value = "The value has changed";
    } // end changeOutput

  
  

  When this function runs, it changes the content of myOutput.

  
  

  The output element is currently supported only by Opera. Until usage of this element becomes more widespread, you can use the innerHTML attribute of any page element to change its content dynamically through code.

  
  



• <progress> indicates how much of a task has been completed (often marked as a percentage). It is expected to be modified through JavaScript code. The HTML5 code may look like:

  
  

      <p>Now destroying the world. <br />
    <p>
       progress: 
       <progress value = "25"
                 max = "100"></progress>
    </p>

  
  

  Most browsers indicate the progress as plain text, but it's reasonable to suppose some sort of visual gauge may become available.

  
  

The current HTML5 also includes a keygen element that generates an encryption key for passing encrypted data to a server. It has a these parameters:

• keytype: Specifies the type of encryption. (rsa is standard.)

  
  



• challenge: A string passed along with the public key. (This is normally specified by the server.)

  
  

However, some security experts consider the encryption mechanism already obsolete, and use of the tool requires knowledge of encryption that a relatively small number of Web developers possess. This element isn't currently supported in any browser, and it may not become a part of the standard.

dummies

Source:http://www.dummies.com/how-to/content/new-form-elements-in-html5.html