HTML Forms
1. HTML
In the code above, you can see an HTML form element surrounds various input elements the form tag has an “action” attribute that tells which server program should receive the user data there is a submit button that initiates the user is ready to send the data to the server program
Since we have not yet learned how to write server programs, we will just use a server program that already exists. By looking at the form action attribute, you can see that the name of the program is “mail” and it is stored in the “cgi-bin” folder on a server named temple.edu. After the question mark, we can specify input to the program, which, in this case, is the email address where we would like the program to send the users data (in our example, that email address is [email protected]).
Once the user clicks submit and the data is sent (in this case) to the Temple mail program, we see this page which was generated by the Temple mail program. The Temple mail program also sends an email to the address specified in the form attribute.
Temple University 2 Sally Kyvernitis In a future lab, you will be sending input to a program that you write, so the form’s action attribute might specify a relative page (instead of the fully qualified page as in the previous example) like this:
2. input type text and password
The most common type of input is “text” as shown below. A similar/variation is “password” where the user’s input is masked by bullets as they type (so no one can look over their shoulder to see their input). The value attribute provides a default value for the textbox (before the user types anything in).
Rendered in Browser HTML code What is your favorite food?
Enter your password
3. input type textarea
A textarea is used when a lot of input is needed. You can specify a height (in rows) and width (in columns). If the users input is more than can fit, a scroll bar appears so that the user can get to the top and the bottom of their input. The text that is inside the textarea element is what will appear when the page is initially rendered (of course, the user could delete it and type in what they want).
Rendered in Browser HTML code Do you have any suggestions?
Temple University 3 Sally Kyvernitis 4. input type checkbox
When you want the user to select any number of items, you would use checkboxes, as shown. The “checked” attribute indicates that the item should be “pre-checked”.
Rendered HTML code Pizza toppings?
Cheeze
Mushrooms
This is what would be displayed if the user clicked on both items (assuming the input tags were inside the form tags that were shown previously):
5. input type radio
If you want the user to only be able to select one option, use a radio input. To group the items together (so that only one of the group can be selected), all radio inputs must have the same name (“topping” in the example below). Again, the “checked” attribute will indicate an option that is pre-selected when the page is initially rendered.
Rendered HTML code Pizza topping?
Fresh Onion
Green Pepper
Mushroom
This is what would be displayed if the user clicked “Fresh Onion” (assuming the input tags were inside the form tags that were shown previously):
Temple University 4 Sally Kyvernitis 6. input type select
If you want the user to pick from a list, you use the
Rendered HTML code What year are you?
This is what would be displayed if the user clicked “Sophomore” (assuming the input tags were inside the form tags that were shown previously):
7. Visually group input elements with fieldset and legend
You can group input elements using the