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.

31 comments:

Anna Schafer 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

我愛你 said...




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

Anonymous 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?

Safe Milli said...

Thanks it such a very nice post. i will definitely share it with colleagues. I just stumbled upon your weblog from Google and wished to mention that I've truly loved browsing your
blog posts. In any case I'll be subscribing to your rss feed and
I'm hoping to read more of your great articles!

Download Psiphon 3 latest version,
Get here some cheap Gucci iPhone Cases for iPhone 7, iPhone X, iPhone 8 Plus,
Want to start a new business? see this insanely easy Marketing Research to get started,
Here are some best Marketing Strategies to boost your business in 2019,
Beautiful Happy new year images,
Latest MTN Night Browsing Codes, And charges,
A true story about Shopping Habits
. see more....

nandhu said...


imo install
imo beta
imo messenger
imo online
IMO is a simple video chat app for Android which is great for making free video and voice calls.

پرستو said...

کیف پول چرم
کرم ضد آفتاب

Anonymous said...

youtubelampung.blogspot.com
bimbellampung.blogspot.com
bateraitanam.blogspot.com
lampungservice.com

jerrysproductreviews said...

I take pleasure in the useful information presented in your details.
I'll bookmark your web site and also examine once more right here often.
fortivacreditcard.com
fortivacreditcard

assignmentauthors said...

On the other hand, the youth and the educated in the society have a different perception of the internet seeing of how they will come to benefit from it as compared to the old and uneducated. assignment expert

Essay Writing Ace said...

Essay Writing Ace provides essay help to the students throughout their program. They assist students to retain and enhance their grades throughout the semester by offering them complete professional essay writing services.
They provide professional training sessions to the team based on their specialisations. Timely training of the staff helps the team to keep themselves updated for the writing standards and the specific formats for various assignments. They are fully equipped with the skills and are experienced in the relevant field of academic writing. They assure you of the 100% authenticity and the reliability of the writing. Timely deliverance and confidentiality of the document are 100% guaranteed.
To get the complete essay writing services with special discount offers and cheap prices, visit the website and place an order Online Essay Writing Services

SKIP HIRE SERVICES UK said...

Very informative and It was an awesome post. I love reading your fantastic content. Thanks for sharing it with us. We are so greatful to your sharing.

Skip Hire

Deal and Delas said...

3.5 Marla Plots in Lahore Park View City Orchard Block:
park view lahore location
park view lahore installment plan
Rudn Enclave payment plan
Blue world city Islamabad map

Tooba said...

Imarah Marketing PVT LTD is the best marketing platform I've ever worked with. They had innovative ideas that not only improved the company's brand but also made it exciting to promote.
I can't say enough about what a great experience I've had with Imarah Marketing PVT LTD and I'll definitely be recommending them to all of the people that I can.
https://imarahmarketing.com/

SEO said...
This comment has been removed by the author.
ahrealestatemarketing said...

Thanks for the great post on your blog, it really gives me an insight on this topic. Here you can find more information Amazing information is given here. Thanks for sharing the post and keep it up.
Blue World City Booking Office Islamabad

sleigh said...

find more infocheck this link right here now have a peek at these guysnavigate to this site More about the authorher latest blog

kingdom valley islamabad said...

https://silverbellsassociates.com/silver-city-islamabad/ is an RDA-approved housing society jointly developing by Laraib Associate & Developers (PVT) Ltd. and SAREMCO Group. It is located at Girja Road Rawalpindi near Thalian Interchange. The housing society is an advanced and modern real estate marvel in Islamabad city. The society offers a serene and peaceful living environment with scenic views of Margalla Hills. The modern and luxurious facilities part of the master plan makes it the best investment opportunity of 2022.

Amit Shah said...

www.myindigocard.com

turoon said...

her explanation designer replica luggage official source gucci replica you could look here replica designer bags

Reviewer said...

New City Paradise is 20,000 Kanal PHATA-approved. Talented specialists create the overall strategy.
With the real estate marketing firm, find out where New City Paradise Islamabad is and how to pay.

Jennifer James said...
This comment has been removed by the author.
Jennifer James said...
This comment has been removed by the author.
Topline Marketing said...

Being one of the most affordable residential and commercial project, New City Paradise is very ambitious to provide it’s customers with luxurious and lavish lifestyle and environment in very cheap rates. Prompt location, cheap rates and prominent features are the core theme of the project.

SEO said...

delta international recruiting agency in pakistan

SEO said...

Saudi recruiting agency in pakistan

TelePort ManPower & Consulting said...

Very helpful tutorial for those who wants to learn how to style form validation with HTML5.
recruitment agencies in Riyadh

Content Writer 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.
best recruitment agency in pakistan

Content Writer said...

great post. get free conultency services Best manpower recruitmnet agency

Zack Martin said...
This comment has been removed by the author.
Ameliaava said...

Very informative and It was an awesome post.
Glass and Aluminum Companies in Dubai.

Irtiza Tahir said...

Informative Blog
Best Recruitment Agency in Pakistan