Fork me on GitHub

25 Mar 2011

Styling with HTML5 form validation

HTML5 specifies a number of enhancements to form inputs that are gradually being implemented by newer browsers. Among the enhancements is support for some level of automatic form validation. When inputs have invalid values the browser may refuse to submit the form. Currently Opera, Safari, Chrome and Firefox 4 have some support for this. IE8 does not. I haven’t experimented with IE9 yet.

Let’s look at an example. A simple registration form has inputs for the name, email and website of a prospective user. Of these name and email are required. The input elements are as follows:

<input type="text" name="name" required>
<input type="email" name="email" required>
<input type="url" name="website">

The required attribute is new in HTML5 as are the input types email and url. All of these have implications for validation. Additionally the new input types, whilst they appear just like regular text inputs in desktop browsers are great for mobile users as they are given optimised virtual keyboard layouts.

CSS3 has :invalid, :required and :optional pseudo-classes that are supported by current versions of Firefox, Chrome, Safari and Opera. Some browsers also refuse to submit the form if a required field is not filled in or invalid values are entered in url or email type fields. Obviously without appropriate feedback this could be a pretty disastrous user experience and thankfully even the Webkit browsers which until recently were blocking form submission without feedback are now handling things better.

  • Firefox 4, Opera 11.01 and Chrome 10.0.648.204 all block form submission if there is an empty required field or invalid value and display a message next to the first such field.
  • Safari 5.0.4 will apply :invalid CSS rules but allows the form to be submitted.

Applying styles to invalid fields is pretty easy. For example to highlight invalid fields with a red border and background:

input {
    border: 1px solid #ccc;
}

input:invalid {
    background: #fff3f3;
    border-color: #f66;
}

You can also combine the :invalid pseudo-class in combination with others. For example to highlight focused fields with a fancy CSS3 box-shadow:

input:focus {
    border-color: #99f;
    outline: none;
     -moz-box-shadow: 0 0 0.25em #99f; 
  -webkit-box-shadow: 0 0 0.25em #99f; 
          box-shadow: 0 0 0.25em #99f; 
}

input:focus:invalid {
     -moz-box-shadow: 0 0 0.25em #f66; 
  -webkit-box-shadow: 0 0 0.25em #f66; 
          box-shadow: 0 0 0.25em #f66;
}

It’s worth noting that Firefox 4 automatically adds a red box-shadow to invalid fields (and not just focused ones). To turn it off you can specify:

input:invalid {
    -moz-box-shadow: none;
}

Of course, the browsers that display messages when they refuse to submit a form do so with different text and different visual effects so creating a consistent cross-browser look and feel with both client and server side validation messages is going to be an interesting challenge.

10 comments:

Su Su said...

Thank you for another wonferdul article. Where else could anyone get that kind of information in such an ideal way of writing? I have a presentation next week, and I am on the look for such information.
cool math games| coolmathgames| cool math| math games| cool math a-z| coolmath games
b cubed| b-cubed| barbie games| friv 4 school| friv4school

jowdjbrown said...

When the mouse moves over your link, you need to change the cursor to a "hand" and when the mouse clicks on your link you need to make the browser go to that page. psd to css

Kelly Anni said...

This is also a very good post which I really enjoyed reading. Please visit our website and play exciting games:
slither io | wings io | wingsio | Science Kombat | Science Kombat Game
Play the fabolous earn to die game and complete all the levels.You can play all the seven parts of the game on our website :
Tank trouble | Tank trouble 2 | Tank trouble 3 | Tank trouble 4

Lopez Alexander said...

This content is written very well. Your use of formatting when making your points makes your observations very clear and easy to understand. Thank you.
- usps tracking
- iphone 7 release date
- excel

ngocanh said...

Your blog posts are more interesting and impressive. I think there are many people like and visit it regularly, including me.I actually appreciate your own position and I will be sure to come back here.
facebook entrar l entrar facebook l entrar no facebook l entrar facebook direto l entrar facebook agora

Unknown said...

So beautiful! I believe my wife would be happy to own such beautiful dresses when walking, or my daughter would be very proud to wear them go out with her friends!
happy wheels

我愛你 said...




العاب بنات : استمتع بوقتك بهذه المجموعة من العاب بنات
، بما في ذلك العاب المكياج واللباس العاب متعددة و متنوعة لتنال اعجابك في هذا القسم من العاب بنات على موقع العاب بيل لهذا قسم ألعاب بنات يمكنك إيجاد كل أنواع الألعاب التي تبحثين عنها أنت وصديقاتك، لهذا فما عليك إلا الضغط على اللعبة التي تريدين لعبها ومشاركة الألعاب التي يبحث عنها صديقاتك وإرشادهم لموقعنا وابدءوا في الاستمتاع بأفضل العاب فلاش بنات وايضا يوجد لدينا تشكيلة اكثر من رائعة من العاب تلبيس بنات 2017

Dr Driving said...

This article is really fantastic and thanks for sharing the valuable post.

sushi-cat2.com

Thu Lê said...

I was very impressed by this post, this site has always been pleasant news. Thank you very much for such an interesting post. Keep working, great job! In my free time, I like play game: imgtaram. What about you?

Love Kpop said...

I like to get up early to go out and breathe fresh air. I feel that it is good for health and a good habit
19216811ll.com