Introduction to HTML5 forms and CSS3 Pseudo Classes

A pseudo class in CSS is an information about the element which not available through any specific attribute in HTML. For example. HTML5 and CSS3 brings a plenty of new features which makes it easier to reduce the user of JavaScript for form validation, what it requires is just a few lines of HTML5 and CSS3 code to validate and style your forms.

For example, :first-child targets the first element of available elements in their parent element, you can also target the last element in parent section using :last-child. In CSS2.1, we already have seen several useful pseudo classes selectors like :link, :visited, :hover, :active:nth-child, :nth-of-type.

Validating Forms without using JavaScript

HTML5 comes with a native client-side form validation without any use of JavaScript. A required attribute on input tag will prevent users from submitted blank form with built-in validation. Look at the following code.

<input type="text" name="name" id="first-name" placeholder="enter you first name" required />

Will result in:

You may stylize input elements depending on their necessity, for example:

input:required{ border-color:red; } input:optional{ border-color:whitesmoke; }

HTML5 doesn’t only brings the validation for blank fields, but it also detects the content of the field. Look at following HTML5 input types which validate the field while submitting the form.

Do not forget to check the [browser compatibility] of these elements before using them. You may use give CSS style depending on input:invalid or input:invalid syntax. On of the other useful pseudo class is :read-only which lets users only read the data entered into input or textarea field, it can not be edited. You can make a good use of it for showing terms & conditions on your forms.

I hope these new HTML5 form validation service and CSS3 Pseudo Classes will help you to reduce use of JavaScript on your web pages. There are plenty of more pseudo classes, API services, Server-sent events are coming to HTML5. Keep in touch to keep yourself updated.