Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Selecting form elements is a little easier because forms can have and additional attribute called Name. Like with document images, the DOM provides a special object called document.forms. That's an array of form elements on the page. You can also get to any form element that has a name a little bit easier. So, let's take a look. I'm going to go over to my website, and I'll click on this Register page. Now from here, you can see that I have a form on the left side of this document. Let me pull up the developer tool by hitting Cmd+Option+I on a Mac, Ctrl+Alt+I on a PC.
And then, I'm going to hit the Escape key to pull up the console, and I'll type in document.forms. Now, that gives me an array of all the forms in the current document. I've only got one form, so it's only returning one item. If I want to get into that element, I can say document forms and then the index. Since this is the first item, I'm going to use the index 0, because arrays are 0 indexed. Now, I can get to the elements within the form. Now, since the form itself has a name, you can get to the form directly using dot notation. So, instead of doing that, I can just simply do document.register. And if I hit Enter, I get to the same place, a little bit quicker. Now if you open this form up, you can see that a lot of these elements have name attributes.
So, for example, I can get to the 'my name' field by typing in document, register and then my name. You can easily change the form fields value with the value attribute. You really have to be careful with forms, because there's a possibility of two input fields having the same name. In that case, you're going to get back an array. Although its pretty easy to get form elements by name, you can also use a special function called "get element by name".
So, you can document.getelementsbyname, and then get to subscribe and the zeroth element. In that case, it returns the first Radio button which is right here. You can change which of these fields is selected by choosing the checked attribute. So, I'm going to choose the second element, which would be element one and then select the checked attribute, and set that to checked.
That chooses the second element. For popup lists, you can get to the select element with the name property. So, you can say something like document.register.reference, and that gets you to that item. If you want to pre-select an item, you can also do it directly by setting the valley to one of the existing values. So, if you look at this form, you can see that we have the Option of a friend, Facebook and Twitter. But this doesn't actually matter, what matters is the values of these fields. If I opened up the select field, we can see that here I have a value of friend, Facebook, or twitter. So, I can go to document, register, reference, and then set the value to Facebook.
That picks Facebook from this list. There's also a property called selected index, it returns the Option currently selected. So, instead of doing this, I can choose Document register reference, and then you selected index. That tells me that the third element is currently selected. Remember that this is an array index, so the second element is actually element number three. There's a lot more to working with forms, so if you get a chance check out my course on form processing and validation.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 98566 Viewers
61 Video lessons · 85854 Viewers
71 Video lessons · 69749 Viewers
56 Video lessons · 102056 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.