Tip:
Highlight text to annotate it
X
All the form fields that we have created
allow site visitors to enter details about themselves and their preferences.
But we still need a way to allow the site visitor to submit what they have entered in the form.
And for that we are going to put a Submit button on this form.
So let's move over to the code and get that done.
The Submit button is an input element,
so we create that using the input tag,
and as we know the input tag is a self-closing tag.
So we must add that forward slash and a closing angle bracket.
Just as we did with the radio buttons and the check boxes,
we have to specify the type attribute as submit to change this input tag
to become a Submit button.
So let's add the type attribute, and within the quotation marks,
we specify submit.
Other than that there are 2 more very important attributes that we must include here.
One is a name, and once again we can call this submit.
After naming this button what is left to do is for us to specify
the text that will display on this button.
And, since this is a submit button, we want this button to display the text Submit.
So capital S there, and we specify that within the value attribute.
Next, we also want the site visitors to be able to reset this form
in case they have made a mistake in some of their input.
And creating a Reset button uses the same process as the Submit button.
So what we can do is we can copy this entire line of code for the Submit button.
So right-click and Copy.
In the next line we paste it with a CTRL-V,
and we change the type attribute from submit to reset.
And we can change the name attribute to reset as well.
And we want the text on this button to be Reset as well.
So, reset for everything.
Let's save our work and test this in the browser.
So CTRL-S to save, switch over to the browser, and hit F5 to reload.
And notice that we have a couple of buttons.
One says Submit and the other says Reset.
Our work is not done until we test these buttons.
So let's first type in some values into our form.
So for the first name I want to say Jane, last name is Doe.
So this is for Jane Doe, and she is trying to say "No spam please" in the preferences.
And let's reset this and see what happens.
After we press the Reset button all the entered values are gone,
and the form is reset to its initial values.
What about the Submit button? What would happen if we hit the Submit button now?
So let's try that. I hit the Submit button.
Notice that the page loads itself once again,
and if we look at the URL at the top here, notice that all the field names
are associated with the files names of contact.html.
The question mark followed by all the field names that exist in this form are also listed here in the URL.
That's because the form is trying to send the values associated with the form fields
to a processing script.
Since there is no processing script,
which is a PHP script or an ASP script,
what ends up happening is that the values get sent to the form itself
which is contact.html web page.
So the point noted here is that for a subprocess using programming languages
such as PHP, ASP, or other languages,
and the script name is usually attached to the form tag.
Since we don't have that, and programming languages are beyond the scope of our course,
we are going to leave it behind.
However, we learned how to create a form using HTML elements,
which is a great start.