 |
Forms are used on websites in order to allow the user to send feedback to the owners or to representatives of the website. For my website I have a form for contacting me as well as forms for many of my shop items. All of which are meant to help inform me what people want so I can act upon it. For this tutorial I will go over the creation of a basic contact form, similar to the one that you see on my site. For most Email forms there is a spot where a user can input their Email address, a subject, and their message. For many of the types of form input you use the input tags: <input >. Just like the image tags, input tags do not have a separate closing tag. Another rule to follow is that anything within a form must be between the <form></form> tags. I will go over those tags first. Below you can see an example of what goes into the form tags.
<html>
<head>
<title>My Web Page</title>
</head>
<body>
<form>
</form>
</body>
</html>
Within the form tags, you will use one of the many types of form inputs. The first one that we will use is the text field. To do this we will use the <input /> tag with the type=”” attribute. To make a text field we enter ‘text’ as our type.
<form>
<noframes><body>Your browser does not support frames.</body></noframes>
</form>
If you test this out in your browser you should see a text field that you can type into. This is not all you can do with your text field. For one, you can change the size of your text field using the size attribute. In the size attribute you can only enter a number. Below I have labeled our text field and resized the field.
<form>
Email: <input type="text" size="30" />
</form>
If you tested it out in your browser your text field should have changed size and added the text ‘E-mail:’ before the text field. This is all it takes to create a text field. Now let’s move on to the part of the form that you enter your message into. This is called a text area. Rather that using the input tag we will use <textarea></textarea> tags. You can resize the text area as well using the rows (height) and cols (width) attributes. You can see our form coding below:
<form>
Email: <input type="text" size="30" /><br />
Message: <br />
<textarea cols="30" rows="4"></textarea>
</form>
In order to make our forms to start on separate lines we must use the <br /> tag. In this case I have labeled the textarea as ‘Message:’. If you test out your HTML page you should see that we have a place for an e-mail and a message. Now we have to have a way for a person to submit the message. For that we will use the input tag but instead of using ‘text’ defining the type attribute you will use ‘submit’ instead.
<form>
Email: <input type="text" size="30" /><br />
Message: <br />
<textarea cols="30" rows="4"></textarea>
<input type="submit" />
</form>
With this you will see the submit button at the bottom. As always, we can change our button a bit. To change what the button says we just add the value attribute. You can see an example below:
<input type="submit" value="Send Your Message!"/>
Now rather that putting in the browsers default text your button will say “Send Your Message!”,
or whatever you put as your value. Even now your form is not complete, hitting the submit button
will do absolutely nothing. Unfortunately without the knowledge of javascript or PHP or something
similar you cannot really do anything with forms. So then you ask: Why should I learn HTML forms?
Well, first off when you do learn how to use forms with one of these languages you won’t have to
go back and learn how to make the forms. Also, if you know someone who can make forms work you can
design the form yourself. All of the work done to make the form work is done under the hood, so to
speak. So if you still want to see some other type of form input I will continue.
Two other types of form inputs are the checkbox and the radio buttons. Both of these work in a very
similar way. To make these work you must have multiple inputs with the same name attribute. Here is
an example:
<form>
<input type="checkbox" name="food" /> Pizza <br />
<input type="checkbox" name="food" /> Popcorn <br />
<input type="checkbox" name="food" /> Chicken Wings <br />
<input type="checkbox" name="food" /> Tofu Burgers <br />
</form>
Go ahead and test this out in your browser. You should see the four different choices. With checkboxes you can check more than one box. But if you only want one selection all you have to do is change all of the type attributes to radio.
<form>
<input type="radio" name="food" /> Pizza <br />
<input type="radio" name="food" /> Popcorn <br />
<input type="radio" name="food" /> Chicken Wings <br />
<input type="radio" name="food" /> Tofu Burgers <br />
</form>
If you test this out you will only be able to chose one food. This is where the name
attribute comes in. Not only will it be necessary in the future when you learn how to make
forms work but (especially for the radio buttons) if the names are different you would be
able to choose more than one of the choices. Let’s try another type of form. This time we
will use a pull down menu.
A pull down menu is another type of form that does not use the input tag. Instead we will
use the <select></select> and <option></option> tags. Below you can see how these
tags are supposed to be set up.
<form>
<select>
<option>Pizza</option>
<option>Popcorn</option>
<option>Chicken Wings</option>
<option>Tofu Burgers</option>
</select>
</form>
With a drop-down form you use the select tags on the outside and for each one of the choices
you use the option tags. Just like the radio buttons, you can only choose one of the listed items.
Anyways, those are the most popular form types you can use. You can use any amount of form inputs
in your forms and put as many options as you like. There is no restriction. So, for the next
tutorial we will go over HTML symbols and characters.
|
|
 |