MacMost Now 861: Web Form Keyboard Shortcuts

Learn how to use the keyboard to move between fields, menus and checkboxes in forms on web pages. Knowing these shortcuts can save you a lot of time if you need to fill out forms often.
You can also watch this video at YouTube (but with ads).
Video Transcript: Hi this is Gary with MacMost Now. On today's episode let's take a look at using Keyboard shortcuts to help you fill in web forms.
Keyboard shortcuts depend upon the context. For instance you are going to have different sets of keyboard shortcuts for working in Photoshop than you are for working in say Pages.
Now if you are filling out a web form there is a bunch of standard shortcuts that don't even involve the command key. Knowing them will help you fill out the forms quicker, especially if it is something you have to do a lot.
As an example I am going to use this feedback form from at Apple website. It is a feedback form for Apple TV. I've chosen it because there is a lot of different form elements in it. 
So right away we can see that there are several different fields where you just type text into. To move back and forth between those fields I can take my mouse and click in one. Click in this one. Click in that one. I can move around in any order I want to. 
But what is more interesting is being able to do it with the keyboard. The key to use between movement in fields is the Tab key. If I hit the Tab key once I go from this field to the next one and then the next one after that. Just hit the Tab key again. Shift Tab goes in the opposite direction. So I can Shift Tab back and hit those two fields back again. So I can move back forth very freely between fields. If I type in one and move to the next one I can see I go back to it. 
Inside the field I can use the arrow keys to move the cursor back and forth. So I really never have to move my hand over to the track pad or to the mouse to go between these fields.
Now if I continue to press Tab I will move down and the form will scroll with me. You can see it will scroll down to the next element which is a pop-up menu. Pop-up menu I could use the mouse and click on it and select one with the cursor. But you can see it is selected. It has a blue outline around it. I can hit the spacebar and it will show me the selections in there. Then you can use the arrow keys up and down to hover over one and then hit the spacebar again to select it. You can see everything still works with the Tab. I can hit Shift Tab to go back, Tab to go forward, Tab to go to the next one, back again, spacebar move to select a new one and spacebar to select it. In many cases you can also use the return key, I just hit the return key right there, to do it instead of the spacebar.
Now if I continue to tab and go down here I'll see I have a set of radio buttons, I'm going to scroll up a bit so you can see them. I can move back and forth between them with the Tab. You can see even though they are part of a set, yes and no, tab and shift tab will go back and forth between them. Spacebar will select one. So I'm going to hit spacebar there and it will select one. Spacebar will not turn it off again. That's because the way you work with radio buttons is you have to switch to the other one. So I am going to switch over here to no. Hit spacebar, and I can Shift Tab back and go back and forth between them. So that is how you work with those.
Now to work the check boxes that you see below I just do the same thing. Tab or Shift Tab to go back and forth. Spacebar to select one. I can do spacebar again to unselect one. 
Then I've go another pop-up menu here. I can select with the spacebar, arrow keys and then spacebar. Then I can continue to move onto the next items down here and select with the spacebar, moving back and forth with Shift Tab. 
When I get to the end, you can see I've got a Submit Feedback button here, at the end of the form. That is part of the form, the button. Now as far as being able to hit the submit feedback button, some forms allow you to go from the last element here and tab down and it will highlight the submit feedback button. Others will not. It depends on how the page is coded. So in this case it will just jump up to the field at the top which is this Search field here. Then I can continue and go through the form again.
Sometimes there is scripting on the web page that kind of gets in the way of this. It tries to help you but it gets in the way. For instance on this page here you are asked to enter a phone number and look what happens. When I start entering the area code, as soon as I hit the third digit of the area code it immediately jumps to the second field. Which is fine and nice if you are going to type ten digits. But if I'm not looking and then I hit Tab like I expect to to go to the next field you can see it jumps me to the third field. What is worse is if I hit Shift Tab to go back and then back here it immediately jumps forward because it already sees it has three digits in there. So in order to get rid of that if I made a mistake I have to go in there manually with the mouse and you can see now I can just type and it works as long as I don't use the shortcuts.
So sometimes it gets in the way and sometimes it doesn't. I've seen the same thing coded many times where it operates correctly. It allows you to enter in three digits and then you can tab or if you start typing the fourth digit it jumps automatically to the next field.
When filling out a form for the first time you have to be careful using the keyboard shortcuts to make sure everything is working properly. Where this really comes in useful is if you have a job where you have to enter in the information into a form all the time and it's the same basic form or set of forms. You get to use the keyboard shortcuts to make your work go a little bit faster.
Hope you found this useful. Until next time this is Gary with MacMost Now.
MacMost Now 861: Web Form Keyboard Shortcuts

Comments: One Response to “MacMost Now 861: Web Form Keyboard Shortcuts”

Welcome to MacMost

Free Weekly Newsletter

MacMost Online Courses

Keyboard Shortcuts PDF

Connect with MacMost

MacMost Sections

Popular Tutorials

Information
