Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Our form is for the most part finished and almost ready to go. Currently, however, it has nowhere to go anywhere. A well-structured and designed form is useless without a Submit button. Submit buttons are specialized form elements that tell the form to take the data that is collected and send it to the processing page. To finish the initial construction of our form, we're going to insert a Submit button. So again, I have the join.htm file open, this time from the 12_11 explorers directory, and scroll all the way down to the bottom of page.
You'll find the last form element we placed on the page, which is the Textarea. I'm going to place my cursor directly after that. Hit Return to create a brand-new paragraph. Okay, I am going to go up to my Insert panel. Almost dead in the middle of the Insert panel is a Button. Notice this is not labeled as a Submit button. It's just labeled as a Button. It kind of looks like a chiclet. You know, one of those little pieces of gum? Kind of looks like that. Go ahead and click on that to insert it. Again, our Input Tag Accessibility Attributes come up. Well, for ID, I'm going to type in submit, but for this, I don't want any label tag.
And look at that! Dreamweaver, it's almost like it can read my mind. Why did it know to do that? Well, Submit buttons don't need a label beside them. You're going to have some text on the button that instructs the user as to what's going to happen when the button gets pressed. So you don't really need a label on it. We are going to give it a Tab Index, however. This time, we're going to give it a Tab Index of 260. So we're going to go ahead and click OK. And there is our Submit button. That was so easy. Now, select it and we'll take a look at some of the properties that we can change. First, the Button name, that's the ID that we gave it.
We're going to leave that. But for the Value, I'm going to type in 'Join the Explorers!' So, this can say anything you want it to say. So make it so, Submit, Click Here, Click Me, Send an Email, whatever you want it to say. It's a good idea to make it little descriptive though. If you want to put a little oomph into it, so people get excited about clicking it, well, there is nothing wrong with that either. Now, you will notice out beside that we have three radio buttons that tell this button what it should do. A Submit form, Reset form and None.
A Submit form does exactly what you think it does. It collects all of the form data that's been filled in, in that form up to that point, and sends it to either the processing script or the processing page, wherever it's supposed to send that information. Reset the form is basically going to take all of the form elements that have already been filled out and it's going to clear them out. You may have seen some forms in the past that have the ability to reset the form. I'm not very high on that, because if somebody hits them by mistake, the chance of them going back up and filling out all that information again is pretty remote.
We need to give the user the ability to pick a username and a password for the site. Obviously, we need to address the styling of our form because it is still not a good-looking thing. Although, it's functional, it's not even close to being good-looking. But to make it fit the design of our site a little bit better and to help with the visual usability, which is just as important as a structural usability, we'll use cascading style sheets to restyle our form and form elements. And we'll do that next.
Get unlimited access to all courses for just $25/month.Become a member