Forms
How to create simple forms in html
Forms are an integral part of web development. Forms represent interaction with the person browsing the web. Essentially, a user fills out a form on a web site and submits the form; the server processes the form and stores the user's valuable information or input and carries out important transactions based on the values in the submitted form. The <form> tag is used to markup forms in HTML. Following are the important attributes of the form tag:
Action - This tag is required; its value usually points to a program on the server that will process the form upon submission
Name - A reference name for the form. It is good practice to give a unique name to each form in an HTML page.
Method - This may be POST or GET. If the method is POST, the values entered in the form are sent to the server as part of the HTTP message body. If the method is GET, the values are appended to the URL and sent to the server. GET is appropriate when the form contains very few fields with short values.
Let us start working on a form that will register a user onto our florist site. Let us start by adding the form tag to the skeleton document of the florist site and save the file as register.htm in the same directory as the florist.htm file. Change the heading to 'Register With us.' Note that we have left the action tag empty for now.
<form name=register method=POST action=""> </form>
Just a form tag will do nothing for us. Forms may contain any number of Controls. A control is a form field where a user may input values. The <input> tag is used to markup most controls. As we go along, copy and paste each set of controls in sequence in between the open and close form tags. Let us start with a text box control.
Select a Login Name: <INPUT TYPE="text" NAME="login" size=20 maxlength=10>
The above text box field asks for a login name that the user may use to sign into the site. The type attribute indicates that this is a text entry field and the name attribute contains a value that may be used to refer to this form field. The size attribute indicates the display size of the field in characters while the maxlength field indicates that the user may only type up to ten characters in this field. Next, let us ask the user to choose a password. Password fields are masked. Only an asterisk may be seen in the place of each character in the password. Asking the user to type a password twice is standard practice.
Choose a password: <INPUT TYPE="password" NAME=password> Enter Password Again: <INPUT TYPE="password" NAME=password1>
Now, let us ask the user to enter personal details like name and phone number.
Last Name: <INPUT TYPE="text" NAME="lname" size=30> First Name: <INPUT TYPE="text" NAME="fname" size=30> Phone Number: <INPUT TYPE="text" NAME="phone" size=30>
We will have to use another control called a 'Radio' to allow the user to select gender. Radio buttons are used in groups. The entire group has a single name but each control has a distinct value. Only one of the group may be selected.
Select Your Gender: Female <INPUT TYPE="radio" NAME="gender" VALUE="F">
Male <INPUT TYPE="radio" NAME="gender" VALUE="M">
We will now request the user's birthday. To get this information, we will use a list control. The list control in denoted by the <select> tag. While the controls on our form only allow a single value to be selected from each list, adding the word 'multiple' within the start tag will allow users to make multiple selections using the shift and ctrl keys on the keyboard. Our lists are long as they contain valid months and days.
Share your Birthday: <SELECT NAME="month">
<option value=1>January</option>
<option value=2>February</option>
<option value=3>March</option>
<option value=4>April</option>
<option value=5>May</option>
<option value=6>June</option>
<option value=7>July</option>
<option value=8>August</option>
<option value=9>September</option>
<option value=10>October</option>
<option value=11>November</option>
<option value=12>December</option>
</SELECT>
<SELECT NAME="day">
<option value=1>1</option>
<option value=2>2</option>
<option value=3>3</option>
<option value=4>4</option>
<option value=5>5</option>
<option value=6>6</option>
<option value=7>7</option>
<option value=8>8</option>
<option value=9>9</option>
<option value=10>10</option>
<option value=11>11</option>
<option value=12>12</option>
<option value=13>13</option>
<option value=14>14</option>
<option value=15>15</option>
<option value=16>16</option>
<option value=17>17</option>
<option value=18>18</option>
<option value=19>19</option>
<option value=20>20</option>
<option value=21>21</option>
<option value=22>22</option>
<option value=23>23</option>
<option value=24>24</option>
<option value=25>25</option>
<option value=26>26</option>
<option value=27>27</option>
<option value=28>28</option>
<option value=29>29</option>
<option value=30>30</option>
<option value=31>31</option>
</SELECT>
Next, let us get some of the user preferences through a checkbox control. Checkboxes are different from radios in that more than one checkbox belonging to a group may be chosen at one time.
Flowers that you like: <INPUT TYPE="checkbox" NAME="likes" value='rose'> Roses <INPUT TYPE="checkbox" NAME="likes" value='tulip'> Tulips <INPUT TYPE="checkbox" NAME="likes" value='lily'> Lily of the Valley <INPUT TYPE="checkbox" NAME="likes" value='orchid'> Orchids
A textarea tag may contain a large amount of text and is more suitable for collecting information that may run to several paragraphs in length. The rows and cols attributes allow the display size of the field to be manipulated.
Please enter a message to send with your flowers: <TEXTAREA NAME="message" ROWS="3" COLS="60"></TEXTAREA>
Finally, let us include buttons that will reset our form or submit it. Instead of using the submit button, we may even use a custom image as a submit button by substituting the submit button with an input tag with the type attribute set to 'image'. Note that the 'value' attribute will appear as the caption on the button.
<INPUT TYPE="reset" value='Reset Form'><INPUT TYPE="submit" name=register value=Register>
We have not used the hidden control on our form. The hidden control does not appear on the browser. Hidden fields are often used to hold data when series of linked forms are submitted. Each time a portion of a linked form is submitted, the next portion is loaded and all the information entered in the submitted portion is represented in hidden form fields.
If you view the document that you have created in the browser, it won't look clear. This is because we did not use any HTML format for our form. One common convention is to encapsulate forms in two column tables. Each row in the first column contains the caption next to a control and the second column contains the control. Let us use this format to present our form. Set the table format to the default table format specified in the stylesheet. Also, let us add a stylesheet definition for our form controls to the stylesheet. The hex code for background color was picked to match the background image using Visual Color Picker
select, input,option, textarea {
font-size: 10pt;
font-family: Verdana, Arial Helvetica;
font-weight: normal;
color: purple;
background-color: #E4D6E4;
border-color: purple;
border-width: 1px
}
Your form page should now look like the following screenshot. You may compare the HTML behind the screenshot to your HTML by viewing the source of the pop up window.
ScreenShot 4e: Part of the Registration Form
We now have three complete, separate pages. However, our site has a major shortcoming - its pages are not linked to each other. We may certainly add links to the initial florist.htm page at all the spots where registration and catalogue are mentioned; but this is only a partial solution. Web sites address this issue by providing a menu on every page that allows the user to navigate through the site. Let us add a navigation menu next to the heading. We will also add inline links.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Flowers - ***Replace with the Title***</title> <link rel="stylesheet" type="text/css" href="style.css"/> </head> <body> <table width=100%> <tr><td width=75%> <h1>***Replace with the Heading****</h1> <br> </td> <td> <table align=right cellpadding=1 cellspacing= 0 > <tr><td style="background-color: #D6E4C9;color: navy; text-align: left; border-style: outset"> <A CLASS=button HREF="florist.html">Home</A></td></tr> <tr><td style="background-color: #D6E4C9;color: navy; text-align: left; border-style: outset"> <A CLASS=button HREF="catalogue.htm">Catalogue</A></td></tr> <tr><td style="background-color: #D6E4C9;color: navy; text-align: left; border-style: outset"> <A CLASS=button HREF="register.htm">Register</A></td></tr> </table> </td> </tr></table> <hr> *******CONTENT GOES HERE******* </body> </html>
We have changed the skeleton to accommodate navigation. We simply added a table to the top part of the skeleton that previously contained just the heading and a <br> tag. Both these elements became part of a single cell in this table; while the second cell in the table nests a table. Each row in the nested table contains a link. We have specified an inline style for the cells containing the links; these have precedence over the 'td' style definition in Style.css. Also, we have added a new anchor style called 'button' to style.css. The links in the navigation menu have the button style. The button style definition is reproduced below:
a:link.button
{
color: navy;
font-weight: bold;
font-family: Verdana;
font-size: 10pt;
text-decoration: none
}
a:active.button
{
color: navy;
font-weight: bold;
font-family: Verdana;
font-size: 10pt;
text-decoration: none
}
a:visited.button
{
color: navy;
font-weight: bold;
font-family: Verdana;
font-size: 10pt;
text-decoration: none
}
Add the new 'button' link definition to style.css and change the top part of the body (all the way from the opening body tag to the <hr> tag) to reflect the new florist website skeleton page. Also, add links in the home page at the points where registration and catalogue are mentioned. Our links are now complete.
ScreenShot 4f: Florist Web Site with Navigation
