Assembling Forms and Applications - HTML5 with CSS3 - page 246

Encryption is a means of mathematically scrambling data so that anyone who might
intercept it won't be able to read or use the information. Unscrambling, or decrypting ,
encrypted data requires an encryption key that should be extremely difficult to guess.
Any sensitive information, such as passwords and credit card numbers, sent over the
Web through a form should be encrypted to protect the security and privacy of your
users. Encryption usually happens between the browser and the server, and is much too
complicated to be addressed in detail in this topic.
Listing 8-4 shows an example of a simple login form, with a text field for a user name and a password field
for a password. We've also added some new attributes: autofocus and required .
Listing 8-4 . Part of a typical login form, with both a text input and a password input
<p><label for="username">Your user name</label>
<input type="text" name="user" id="username" autofocus required></p>
<p><label for="password">Your password</label>
<input type="password" name="pass" id="password" required></p>
Figure 8-5 shows how a browser renders the markup, with the entered password obscured as a string of
dots.
Figure 8-5 . Text entered into a password field is obscured from sneaky onlookers
The autofocus attribute is new in HTML5. It automatically sets focus to the control when the page loads.
This should usually appear in the first field of a form and only when that form is the primary content of the
page, such as a dedicated login page, or the front page of a search engine that only has one big field. It
should also only appear on one control in the document. If several controls carry an autofocus attribute
only the first one will actually receive focus; a browser can only focus on one control at a time. Try not to
annoy your visitors by automatically setting their browser's focus into a form field they might not be
planning to use right away, such as a comment form at the end of a long article or a search field on a page
where someone may not want to begin searching immediately. Older browsers that don't recognize the
autofocus attribute will simply ignore it and the form will still work as usual.
The required attribute is also a new addition to HTML5 and indicates that the form shouldn't be submitted
unless the control in question has a value. When more than one field in a form is required, all of them must
have a value before the user can submit the form. However, because this is a new attribute in HTML5,
older browsers—and even some current browsers at the time we write this—don't support the required
attribute, so it's still no substitute for proper form validation.