Selecting and working with form elements is much easier than other elements. And that's because form elements are able to have a name. Therefore, we can reference them using dot syntax. Or we can also reference them with the get elements by name method. So we have two ways to approach this. Here I have an HTML page with a sample form on it.

And we'll use this to show different ways to access form elements. I'm just going to type some data in there I've got first name, last name and then an email address. There's also a radio button where I can choose to subscribe or not subscribe and then a question. How did you hear about us I'm just going to choose one of those options. Now, let me open up the console. And let's take a look at how we can access these form elements.

Now I mentioned the get elements by name method. So let's try that. I'm going to grab the first name field and I'm going to grab the value from the first name field. So I set fn equal to document dot get elements by name. And then I pass in the name of that input field. And if I jump over to the HTML page, you can see the name that has been assigned to it is first name.

I press return, let me display and you can see that is an array because the method is get elements plural by name. That indicates it is going to return an array. So if there's more than one element that has that name, it will return all of them that have that name. Now I said I was going to grab the value out of that. So let's go ahead and modify this statement. Because it's an array I have to indicate which one I want.

So I'm going to put zero dot value, press return. Now fn contains Steven. So get elements by name will allow you to access any form elements because of the name attribute which they have. However, there may be a bit easier way to do that. Let's say I wanted to grab the value of the email field. So I can simply Use dot syntax.

Let me clear this first document dot. Now the name associated with the form is my form dot, email, dot value. And sure enough, it returns the value of the email field. So I can use the dot syntax to start with document, go to the form and then go to the input filled within that form. Now just like I can retrieve the value, I can also set the value as well. So if someone comes back into a page, and we have some record of information about them, and we just want them to update their email, for example, we would probably like to Set the value of that field to, to the email that we have recorded.

Like so. Now what about radio buttons? Let's say I wanted to change the value of the radio button. I wanted to have the node selected as opposed to the Yes. How would I go about doing that? Well, using dot syntax again, my form dot subscribe is the name associated with the radio buttons.

Value, and I set that equal to no and that will change which is selected. Now the Select element, how do we work with that? Well, let's grab the value first. document.my form dot How here is what we've called it dot value. I press return and evaluate returns is friend. Notice that it's showing a friend as being selected, but the value is friend.

If I jump to the HTML page, you can see that when I select the setup, there are options. And there's a value associated with it with each option, that may not be what necessarily shows up when it's selected. But this is the value that is returned. These are the values I would use if I wanted to set that as well. So let's try that really quick. Set up the Facebook.

And sure enough, it changes the selected value to Facebook. So as you can see, accessing forms is a bit easier than some of the other elements exists in the DOM. You can either use the dot syntax to access those individual form elements. Or you can use the get elements by name method and then specify the name within parentheses. Let's move on to the next topic.