Friends

Rabu, 12 Oktober 2011

How To Add Focus To A Form Control When The Web Page Is Loaded Using HTML5

In-order to display a form control with focus when a page loads you will need to use the autofocus attribute for HTML5. The autofocus attribute can be specified in the <input> element (but not when the type attribute is set to hidden), the autofocus attribute can also be specified in the <select>, <textarea>, and <button> elements. The autofocus attribute provides a way to put focus on a form control when the page is loaded, which allows the user to just start typing without having to manually put focus on the main form control.

The autofocus attribute is a boolean attribute, which means that the autofocus attribute needs no value all you have to do is include the word autofocus in the desired element for HTML5, but in XHTML you need to include a value for all the attributes even for the boolean attributes, for example the autofocus attribute will need to have a value of autofocus, for instance autofocus="autofocus" in-order for the attribute to validate in XHTML.
You can only have one element with an autofocus attribute per web page document.
Here is how to code the autofocus attribute HTML5 style.
<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Welcome To HTML5</title>
</head>  
<body>

 <form>
  <input type="search" autofocus>
 </form>

</body>
</html>
Here is how to code the autofocus attribute for XHTML5.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
 <meta charset="UTF-8" />
 <title>Welcome To XHTML5</title>
</head>
<body>

 <form>
  <input type="search" autofocus="autofocus" />
 </form>

</body>
</html>

0 komentar:

Posting Komentar

#
### ###