- From: Zoltan Hawryluk <zoltan.dulac@gmail.com>
- Date: Sun, 1 Jul 2012 13:02:52 -0400
- To: www-style@w3.org
- Cc: ian@hixie.ch, Tantek Çelik <tantek@cs.stanford.edu>
Hello all, I have been playing around with HTML5 Forms the last little while, and noticed a few things that are (in my humble opinion) missing when it comes to creating ideal user interfaces using :valid, :invalid, and :required: 1) It seems a little confusing for a form element to be styled "invalid" when the user hasn't entered in any information. For an example of what I mean, take a look at this example that I made for a blog post recently: http://www.useragentman.com/tests/html5Forms.beta/tests/html5Forms/validityStyling.html As you can see, the invalid state (the red x) appears when the element has focus even when no data has been typed in yet. When I have shown this to users, I have been told that it seems a little counter-intuitive, and that it would make a lot more sense to have the red X appear only when at least one letter has been entered. As far as I can tell, there is not way to do this with just CSS with :valid and :invalid. 2) Let's say you were able to implement a form so the "invalid" hint appears only when at least one character has been typed in. It would be nice to show the "invalid" state if the element loses focus *and* there is no data in the form element. 3) Let's say the user attempts to submit the form and there is still some invalid data in the form. It would be nice to show red X's next to the invalid fields when the form is submitted. I have created the example below to show the three features I describe above: http://www.useragentman.com/tests/html5Forms.beta/tests/html5Forms/validityStyling-experimental.html Play around with this form ... fill out only some of the information (leaving some of the fields blank) and then try to submit the form and I think (hope) you should be able to understand what I am getting at. This form uses a JavaScript HTML5 Forms polyfill which I have extended it to simulate a few pseudo-classes that I think could solve some of these issues: 1) :isBlank, :notBlank - used when a form element is blank/not blank. 2) :lostFocus - used when a form element loses focus. 3) form:submitAttempted - used when a form submit is attempted. Take a look at the stylesheet and you'll see how I use these (simulated) pseudo-classes to make the form behave the way I believe it should: http://www.useragentman.com/tests/html5Forms.beta/tests/html5Forms/css/experimentalValidity1.css Has this kind of functionality been discussed before? Is it possible that this type of solution or an alternative one be impleneted in the CSS3 UI? I believe this kind of functionality would be useful for authors (like me :-) ). What do you folks think? Cheers, Zoltan. -- Zoltan Hawryluk. Client-side web technology specialist. e: zoltan.dulac@gmail.com t: @zoltandulac w: http://www.useragentman.com
Received on Sunday, 1 July 2012 20:57:20 UTC