Attributes of New Form Elements in HTML5

HTML5 introduces new form elements and gives all the form elements a few new goodies. As you design and build web pages, you can apply these new attributes and capabilities to any form element:

• autofocus: An element with this attribute is the focus of the first user input. It's common to apply the autofocus attribute to the first element of the form, and to have only one autofocus field per form. The code looks like:

  
  

    <form action = "">
      <fieldset>
        <label>name
          <input type = "text"
                 autofocus />
        </label>
        <!--More code for the rest of the fieldset→
      </fieldset>
    </form>

  
  

  If the browser does not accept the autofocus attribute, nothing harmful will happen, and you can still use a JavaScript-based solution.

  
  



• pattern: With this you can specify a regular expression used to validate the form. If the content matches the regular expression, the field will be considered valid. Use this attribute only when the standard validation techniques are not sufficient, as it can be difficult to debug regular expressions.

  
  

  When you specify a pattern, also include a title attribute to indicate what the pattern is, as in the sample code:

  
  

          <input type = "text" 
                 id = "txtPhone"
                 pattern = "\(\d{3}\) +\d{3}-\d{4}"
                 title = "(ddd) ddd-dddd" />

  
  

  The browser can use this as a tip for the user. It may also be useful to add pattern information as placeholder text.

  
  

  placeholder: The placeholder acts as a temporary label showing the purpose of a text field without requiring a label tag. As soon as the user activates the field, the placeholder text disappears. A sample of the simple code:

  
  

         <input type = "text"
               placeholder = "Name" />

  
  

  Not all browsers support placeholder text, and some will simply ignore the placeholder attribute. Likewise, if the field is already filled in, the placeholder will not be visible. For these reasons, add a label so users know what to type in each text area.

  
  

  Placeholder text is especially helpful to indicate how the input should be formatted (especially if this will be enforced by validation or a pattern).

  
  



• required: Supporting browsers will mark all required fields (perhaps by highlighting them in red) if they aren't filled in. Some browsers will also send a warning if the user tries to submit a form with empty required fields.

  
  

          <input type = "text"
                 required />

  
  

  The special :required pseudo-class allows you to apply a CSS style to all required elements in your form (giving them a border or background color, for example). Here's an example of a CSS style for marking required elements with a red border:

  
  

    :required {
      border: 1px solid red;
    }

  
  

  If a field is required (with the required attribute), it will be considered invalid until it contains some value.

  
  

  Validation: Form validation is one of the trickiest parts of Web development. It's pretty easy to set up a form that asks for user information, but it can be quite difficult to be certain that the user enters information correctly.

  
  

  HTML5 helps you out. When you use the special-purpose input elements, the browser will automatically check the form field to ensure it's in a proper format. If the entry is not valid, the form will (generally) not submit, and the special :invalid CSS pseudo-class will be associated with the invalid field. Simply supply CSS to your page handling the :invalid state:

  
  

      :invalid {
        background-color: red;
      }

  
  

  When this CSS state is active, any invalid fields will have the :invalid styling. For example, if you have a color field and the red background CSS style defined here, the color field will have a red background unless the user enters a valid color (a recognized color name or hex color value). Likewise, the e-mail field will show red until a valid e-mail address is entered. You don't need to add any other code to the form. Simply add CSS to display invalid entries, and the browser will do the rest.

  
  

  You can turn off the validation for any field by adding the novalidate attribute to that element.

  
  

  It's possible that the browser will refuse to process a form until all fields are validated, but this behavior does not yet seem to be universal among HTML5–compliant browsers.

  
  

dummies

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