+
< Prev  1 2 3 4 5  Next >
HTML5 Powered

New <form> Functionality

  1. New <form> attributes

    HTML5 defines two new <form> attributes, "autocomplete" which allows drop-down suggestion lists like Google and "novalidate" which, as its name implies, turns off validation for a form.

  2. New <fieldset> attributes
    1. "disable" - disables the <fieldset>
    2. "name" - specifies the name of the <fieldset>
    3. "form" - since <fieldset>s do not have to be nested inside their parent <form>, this attribute links the <fieldset> to its parent <form>.
  3. New <label> attribute

    A label can now have a <form> element showing the label's parent form, since the label no longer has to reside inside it's parent <form>

  4. New <input> attribute.

    Like <fieldset> and <label>, an <input> element can be outside it's parent in HTML5, so it has a <form> attribute to connect it to its parent <form>.

New <input> types

Instead of attaching JavaScript to verify user-input, HTML5 has baked-in commonly used functions into new input types. The new input types are: color, date, datetime-local, datetime, email, month, number, range, search, tel, time, url, and week.

You can start using these now, since browsers treat a <input type="email"> or other unknown type as simply "text".

Let's create a sample form using the text input type with new attributes.

We will start with the name in a fieldset:

About You

This is produced by the following HTML5:

<form id="signUpForm" autocomplete="on" 
        action="javascript:myAction();" method="get">
<fieldset>
  <legend>About You </legend>
  <p>
    <label>Name:
      <input id="name" name="name" type="text" placeholder="Jane Doe" 
               autofocus required size="50" />
    </label>
  </p>
</fieldset>
</form>

The placeholder text fills the entrybox with a hint, that goes away when the user starts to enter data. If the browser doesn't recognize placeholder, it will disregard it.

autofocus puts the focus into this box so the user doesn't have to click into the box to start typing.

required will force the user to enter something before we can move on.

Generic Cat Picture

Now, let's write a form for your new "Kitten-A-Month" Club, where you can send cat lovers a kitten a month.

This is best seen in Opera.

About You

When do you want us to start sending you kittens? Enter one

This is produced by the following HTML5:

<!--
from css file:
input:valid { background-color: #aaffaa; }
input:invalid { background-color: #ffaaaa; }
-->

<form id="signUpForm1" autocomplete="on" 
        action="javascript:myAction();" 
        method="get">

<fieldset>
  <legend> About You </legend>
  <p>
    <label>Your Name:
      <input type="text" required placeholder="Jane Doe" pattern="(.{2,30})" 
               id="myName" name="myName" size="50" />
    </label>
  </p>
<p>
    <label>Your Telephone:
      <input type="tel"  pattern="([0-9]{3})(-[0-9]{3})(-[0-9]{4})"
               id="telephone" name="telephone" placeholder="512-867-5309" 
	       required size="30" />
    </label>
  </p>
 <p>
    <label>Your Email address:
      <input type="email" placeholder="janedoe@gmail.com" 
             id="email" name="email" required size="50"/>
    </label>
  </p>
    <p>When do you want us to start sending you kittens? Enter one
      <label>(date): <input type="date" name="date" placeholder="2011-10-08" ></label>
      <label>(month): <input type="month" name="month" placeholder="2011-10" ></label>
      <label>(week): <input type="week" name="week" placeholder="2011-W41" ></label>
      <label>(time): <input type="time" name="time" placeholder="13:30" ></label>
      <label>(datetime): <input type="datetime" name="datetime" placeholder="2011-10-08 13:30" ></label>
      <label>(datetime-local): <input type="datetime-local" name="local" placeholder="2011-10-08 13:30" ></label>
    </p>

</fieldset>
      <input type="submit" />
</form>
<script type="text/javascript">
function myAction()
{
alert("Your information: \nName:  "+ $("#myName").val() + "\nTel:  " + $("#telephone").val() + "\nemail:  " + $("#email").val());  
}
</script>

About Kittens




This is produced by the following HTML5:

<!--
from css file:
input:valid { background-color: #aaffaa; }
input:invalid { background-color: #ffaaaa; }
-->

<form id="signUpForm2" autocomplete="on" 
        action="javascript:myAction();" method="get">
<fieldset>
  <legend> About Kittens </legend>
  <div>
    <br /><label for="numberOfCats">How many cats do you already have?:</label>
      <input type="number" min="1" max="20" step="1" value="1"
               id="numberOfCats" name="numberOfCats" 
               required >
    <br /><label for="numberOfKittens">How many kittens would you like each month? (1-6):</label>
      <input type="slider" min="1" max="6" step="1" value="1"
               id="numberOfKittens" name="numberOfKittens">
    
   <br /><label for="color">What color would you like?:</label><br />
      <input type="color" id="color" name="color"  
               pattern="(#[0-9A-Fa-f]{6})" placeholder="#aaff00" />
    
  </div>

</fieldset>
</form>

datalist is a new element which allows for a Google-suggest like experience.

More About Kittens

This is produced by the following HTML5:

<form id="signUpForm3" autocomplete="on" 
        action="javascript:myAction();" method="get">
<fieldset>
  <legend> More About Kittens </legend>
  <div>
    <br /><label for=typesOfCats>What is your favorite type of cat? (hint: tabby):</label>
      <input type="text" list=catList id=typesOfCats name=typesOfCats >
      <datalist id=catList>
          <option value=tabby>
          <option value=striped>
          <option value=solid>
          <option value=calico>
          <option value=polydactyl>
      </datalist>
  </div>

</fieldset>
</form>

If you want to set custom error messages you can use setCustomValidity().

Click here to join today.

+