Pub Pixel Avatar Image

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

Published:

Rate Article (Sign in and be the first to rate this article.)

Article Details

Views: 726

First Published:

Word Count: 322

Edition: 1

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>

Article Tags

Tag Article (Sign in if you want to tag this article.)

Share This Article

Send To Facebook Link

Tweet This Link

Send To LinkedIn Link

Send To StumbleUpon Link

Digg This Link

Send To Google Plus One Share Link

Send To Reddit Link

Send To Tumblr Link

Send To Delicious Link

Send To FriendFeed Link

Send To Diigo Link

Email Link

AddThis Link

0 Comments

Leave Comment (Sign in and be the first to comment on this article.)

Important

This site cannot guarantee the accuracy of articles, comments, answers and other types of content or media submitted by members or anonymous users and guests, and we recommend that you use common sense when following any advice or information found on this site. Read our full Content Disclaimer Agreement for further information.