Add Focus To HTML Forms

When you visit Google.com, you probably noticed that the mouse cursor jumps to the searchbox, ready for users to type and submit a search. This method is called form focus. It’s made possible by using Javascript. With Javascript, you can set certain elements of the HTML form to be set in focus. This is particularly helpful for pages where there is minimal content, and the intent of the web developer/designer is to get the user to enter data and submit quickly. A login page is a perfect example of such a page.

You can bring into focus the username field, so users can start typing their login credentials. The form focus saves users from finding the mouse cursor on the screen, and then clicking on the field. With form focus, users are already on the form, ready to input text and submit. If the user presses Tab, the cursor jumps to the next field, which happens to be the password field. Pressing Enter, simply submits the form to start the login process. This article will show you the most simple way to add form focus to your HTML forms. Consider a login page. It has two fields: username, password, and a Submit button. The HTML markup is:

<form method="post' action="submit.php">
<label for="username">Username: </label>
<input type="text" name="username" />
<label for="password">Password: </label>
<input type="password" name="password" />
<input type="submit" name="submit" value="Login" />
</form>

How To Add Focus To Forms

1. Assign an ID to the form. We are using an id of “login” in this example.

<form id="login" method='post' action="submit.php">

2. Add IDs to the fields.

<input id= "user" type="text"  name="username" />
<input id= "pass" type="password" name="password" />

3. Add Tab Index to the fields. Notice the order starting with 1 and then 2.

<input id= "user" type="text" name="username" tabindex="1" />
<input id= "pass" type="password" name="password" tabindex="2" />

4. Add Javascript at the end of the form.

<script type=”text/javascript” language=”JavaScript”>
document.login.user.focus();
</script>

Where login is the id of the form, and user is the id of the field.

Final Form

<form id="login" method="post" action="submit.php">
<label for="username">Username: </label>
<input id="user" type="text" name="username" tabindex="1" />
<label for="password">Password: </label>
<input id="pass" type="password" name="password" tabindex="2" />
<input type="submit" name="submit" value="Login" />
</form>
<script type="text/javascript" language="JavaScript">
document.login.user.focus();
</script>

This is just one way of adding form focus to HTML forms. There are other methods, like using body onload and such, but I find this method the cleanest and the most simple one to implement by far.

Microsoft Silverlight Snubs Linux Users

Microsoft Silverlight is a powerful development platform for creating engaging, interactive user experiences for the web, desktop and mobile applications, either while connected online or offline. At least, that’s what Microsoft’s says on its website. Silverlight is a browser plugin people use to view streaming movies, videos, and sporting events, as well as running business applications online. Microsoft touts that Silverlight works on all browsers, from Firefox, Chrome, Safari, and of course, Internet Explorer.

However, Silverlight only works in Windows and in Safari on the Mac OS. It doesn’t work in Linux. There are however, several open-source alternatives, like Moonlight, which mimics Silverlight. But it has come up short. There are still a number of Silverlight-powered websites that are inaccessible from the Linux desktop. Netflix comes to mind. There are also several major sports leagues that use Silverlight exclusively for live streaming. The NFL, MLB, NBA, and the MLS are just a few.

Netflix uses Silverlight because of the DRM or digital rights management issue. Netflix has to some way protect movies from being pirated online, hence the use of Silverlight. Here’s the Netflix message you’ll get if you try to run Netflix on Linux. It doesn’t really say it doesn’t support Linux, but Linux is not on the list.

Microsoft or Netflix has no plans whatsoever to include Linux users into the fold. Micorosoft doesn’t seem bothered that Linux users are being isolated from viewing popular video streaming websites. I don’t see Microsoft or Netflix changing their stance anytime soon. They are certainly not going to throw resources to develop Silverlight for the Linux desktop. It’s really a shame, because I still have to keep an old copy of Windows XP running either in a dual-boot configuration or in a Virtualbox, just for the purpose of accessing Silverlight-powered websites and other programs that work in Windows only.

I won’t hold my breath for this to change anytime soon. Maybe, one of these days Linux developers can come up with a better alternative to Moonlight. Waiting for Microsoft to open up the source code for Silverlight, is a waste of time. In the meantime, you can get a Roku box or a Xbox 360, albeit a Microsoft product, to view Netflix and other websites online.

But, there’s a catch. You also have to fork out an additional $60 a year for Xbox Live, and whatever additional subscription price others have with their services. Microsoft technology is just the opposite of what open-source and Linux stands for. It’s all about money and doesn’t care about standards.  It just doesn’t act in the best interest of all.

Set Your Timezone Correctly In WordPress

It’s a new year, and it’s a good time to make a new start. I did a little bit of housekeeping work within WordPress, to make sure that my blog is off to a good start. I just changed theme today. That’s going very well. While browsing around my blog, I noticed that the time on my posts are off by one hour.

It doesn’t make any sense, since my webhost is Hostgator, which is based in Houston, which is in the Central timezone. I’m in California which is Pacific timezone. My blog, for some reason, seems to be in the middle, in the Mountain timezone. I did some little investigative work and found that my WordPress timezone settings has changed.

This post is about making sure that your WordPress timezone is set correctly. So, login to your Admin Dashboard. Access Settings > General look for the Timezone settings. See snapshot below.

Select your timezone correctly. I set mine to UTC-8 for the West Coast of the United States. If you don’t know where you are, you can check several websites that offer timezone information. Once you made the change, go ahead and save. You can validate your WordPress timezone setting by looking at the internal clock next to the form. It should display the correct time in your timezone.

You should only get to do this once, but my time setting, for some reason has changed, and I just recently noticed it. So, make sure to check that your timezone is setup correctly.

A New Theme

A new year, a new theme, a new framework, a somewhat familiar layout, and the same old background. The new theme is based on the Genesis framework by StudioPress. I’m using a child theme called News.

The new theme should be more flexible when it comes to layout and functionality. The Genesis framework is quite robust. The framework has a plugin called Simple Hooks that makes it easier to make theme customizations.

A piece of code can be inserted using Simple Hooks. It will accept any HTML, Javascript and PHP code. The hooks can do wonders when inserted in key sections of the framework. Plugins shortcodes can be inserted as well.

Overall, I’m still learning how to work with this framework works. The concept is a little foreign to what I am used to, but I like what I have done to the theme so far.

I hope you like the new theme.