While the code we're using is slightly more complicated, this should get you started: Some of the articles below, particularly the first two, provide other style/scripting options and solutions for supporting older browsers. Wikipedia has a list of potentially valid email formats here: en.wikipedia.org/wiki/Email_address#Valid_email_addresses Most browsers accept [email protected] as valid for email input as it can be technically correct in some situations - on an intranet for example. How do you only show the fields as 'invalid' after the user leaves (blurs? It's ugly to have ready icons displayed when the page loads.
As shown above, once you've added HTML5 attributes to your form elements, they can be easily styled using CSS so that each input field is clearly marked as valid or invalid. If you want something more restrictive you can add a 'pattern' attribute. thx Safari doesn't display any HTML5 validation messages, but it may prevent the form from submitting if any "required" fields are left blank. The red/green symbols are applied using CSS and do work in Safari, but are only an indication of whether the input for that field is valid.
Different browsers may mark the input box in some way (Firefox 4 Beta adds a red box-shadow by default), display a warning (Opera) or even prevent the form from being submitted if this field has no value.
Hopefully these behaviours will converge in future releases.
input field: This solution is still more complicated than it needs to be as it requires two extra images to be loaded. You forgot the most important part: by having these standard types to identify the fields, browsers can provide helpful autofill interfaces.
In other web browsers they can be used in combination with the .But it does require some CSS trickery to get everything just right! Just that alone is a UX consideration all too many forms fail on.Placeholders are suggestions for valid input, like putting "Tulsa" in an input labeled "City". It's just kind of annoying and unnecessarily negative.I'd say if the form is short and an obvious pattern (like sign up or log in), you could use the placeholder visual pattern, but use real labels instead. You don't need to do any tricky cursor stuff, because it's all semantically wired up already. In order to do that, we'll need to know if the input is empty or not.If they click the area taken up by the label, it will activate the input. We want to do stuff with :placeholder-shown is super useful for us here!The value, clicking 'down' with the input blank will result in a very large number. The examples posted in these responses are vastly oversimplified when compared against reality.