Creating a Form Using HTML

Creating a Form Using HTML

This help file will discuss the steps to build an HTML form that includes a text field, text area, radio group, check boxes, and buttons for sending and clearing the form. This is what the form should look like when this first example is complete.

HTML Code to Create Form

All of the code will be discussed in detail but here is a screenshot of the code needed to create the above form in full.

Let’s Break Down the Code

<form>

The first and last lines of your code will be the opening and closing form tags. Your first line will need to introduce the form, identify the method, and the action so the form knows where to send the information. The closing form tag will just let the computer know the form is complete.

<form method="post" action="http://www.temple.edu/cgi-bin/mail?">

</form>

Notes: Be sure to change to your e-mail address. Also, do not erase the ? or the @ symbols.

Text Field - <input>

The text field is the most common form component used in forms. It is unusual for a form to not have at least one text field. Feel free to add as many text fields as you wish when you create your form.

</form>

Notes: The <p> </p> tags open and close a paragraph. The name you choose for input name is important in that whatever you choose comes back to you in e-mail when the user sends you the form. In this example, if the user states his name is Joe Smith, your e-mail will come to you with name: Joe Smith. Make sure each input name you decide to use is meaningful – in addition, input names must be one word only or multiple words separated by underscore characters. Finally, the size specified will dictate how long your text field box is when the form is complete. The number is up to you.

Radio Group

Radio groups are groups of radio buttons and are used when asking a multiple choice question. You want to give the person filling out the form more than one choice but you only want the person to choose one answer.

<p>Sex:
<input type="radio" name="sex" value="male" /> male
<input type="radio" name="sex" value="female" /> female
</p>

</form>

Notes: In the example above you should notice that the name of each radio is “sex” – this is important as it keeps the person from choosing more than one radio button. If you give each radio a different name then the radio group is useless. The value chosen for each radio button is what will come back to you in e-mail when the form is sent. For example, if the person chooses male, your e-mail will show sex: male.

Text Area

Text areas are like text fields – only bigger! Use a text area when you expect a long response to your question. The most common use of a text area is to ask for comments or questions, but you can use it for whatever you like.

<p>Sex:
<input type="radio" name="sex" value="male" /> male
<input type="radio" name="sex" value="female" /> female
</p>

<p>
Comments:
<textarea name="comments" cols="45" rows="3"> </textarea>
</p>

</form>

Notes: Once again, the name is very important. Whatever gets typed into the text area will come to your e-mail with the heading of comments: (and then all the information provided by the user. The number for columns dictates how wide the box will be and the number for rows dictates how tall the box will be online. One great thing about a text area is the fact the text area will scroll once the given number of rows has filled with information. In theory, the user could send you 100 lines of comments in your 3 row text area!

Check Box

Check boxes are used for yes/no types of questions. A check means yes – no check means no. You can use a check box alone or as a group. Each check box must have a different name – they are not meant to work like radio groups.

<form method="post" action="http://www.temple.edu/cgi-bin/mail?">
<p>Name:
<input name="name" type="text" size="40" />
</p>
<p>Sex:
<input type="radio" name="sex" value="male" /> male
<input type="radio" name="sex" value="female" /> female
</p>
<p>
Comments:
<textarea name="comments" cols="45" rows="3"> </textarea>
</p>

<p>Sports you like (check all that apply)
<input name="football" type="checkbox" value="likes football" /> Football
<input name="baseball" type="checkbox" value="likes baseball" /> Baseball
<input name="other" type="checkbox" value="likes another sport" /> Other
</p>

</form>

Notes: Notice how each input has a different name and how the name describes the answer next to each check box. The information next to value is what will come to your e-mail if the box is checked. If the box is not checked, nothing will show in your e-mail for that question.

Buttons to Send and Clear

You will need to provide a way for the user to send the form and clear the form (to start over). Forms use buttons to send and clear.

<p>Sports you like (check all that apply)
<input name="football" type="checkbox" value="likes football" /> Football
<input name="baseball" type="checkbox" value="likes baseball" /> Baseball
<input name="other" type="checkbox" value="likes another sport" /> Other
</p>

</form>

Notes: The value information this time will provide the text found on the button.

Why Does the Form Look So “Messy”?

The form code above is not in a table. You can use the table information you learned in your prior labs to make the form look nicer. An example is provided for you on the next page. Try it out with your form for an added challenge!

Code Used to Create New Form

<tr>
<td<div align="right">Sex:</div</td>
<td<input type="radio" name="sex" value="male" /> male
<input type="radio" name="sex" value="female" /> female</td>
</tr>

<tr>
<td<div align="right">Comments:</div</td>
<td<textarea name="comments" cols="45" rows="3"</textarea</td>
</tr>
<tr>
<td<div align="right">Sports you like (check all that apply) </div</td>
<td<input name="football" type="checkbox" value="likes football" /> Football
<input name="baseball" type="checkbox" value="likes baseball" /> Baseball
<input name="other" type="checkbox" value="likes another sport" /> Other</td>
</tr>

</form>