The community is working on translating this tutorial into Portuguese, but it seems that no one has started the translation process for this article yet. If you can help us, then please click "More info".
If you are fluent in Portuguese, then please help us - just point to any untranslated element inside the article and click the translation button to get started. Or have a look at the current translation status for the Portuguese language.
If you see a translation that you think looks wrong, then please consult the original article to make sure and then use the vote button to let us know about it.
Please help us by translating the following metadata for the article/chapter, if they are not already translated.
If you are not satisfied with the translation of a specific metadata item, you may vote it down - when it reaches a certain negative threshold, it will be removed. Please only submit an altered translation of a metadata item if you have good reasons to do so!
How HTML5 validation works
The basic idea behind HTML5 validation is, that you tell the browser which fields you want validated but don’t actually do the tedious implementation yourself. As you define what state your input field is in you also asks the browser to validate the field client-side based on the type of input field.
Unfortunately not all modern browsers understand this new way of validating forms but don’t worry. If you are using a type value the browser doesn’t recognize, it will just treat is as a regular text field and no harm has been done. That means that all the following input elements get treated exactly the same:
<form> <input type="text" /> <br /> <input type="my-weird-value" /> <br /> <input /> <br /> <input type="submit" value="Submit now" /> </form>
And why is this useful information when we are talking about validation? Because some of the input types discussed will not be supported by all browsers but this should not hold you from implementing the new HTML5 validation tricks.
Let’s say you have a regular text input field that cannot be left blank – then you use the attribute required. HTML5 allows you to shorten you markup when using the required attribute, so instead of writing it the long way:
<form> <input type="text" required="required" /><br /> <input type="submit" value="Submit now" /> </form>
You can just write:
<form> <input type="text" required /><br /> <input type="submit" value="Submit now" /> </form>
Using this required attribute the browser informs the user that she has to fill out this particular field before submitting the form. The required attribute do not take into consideration what kinds of data are typed into the input fields but you do have the opportunity to do this with some of the following input types. Now let's go have a look at them in the following chapters!