Web Design - Week 9
The <input> tag
- Most, but not all, form elements use the input tag, with a type="..." argument to tell which kind of element it is type can be text, checkbox, radio, password, hidden, submit, reset, button, file, or image - Other common input tag arguments include: name: the name of the element value: the "value" of the element; used in different ways for different values of type readonly: the value cannot be changed disabled: the user can't do anything with this element
What are forms?
- similar to a paper-based form, an HTML form is used to gather data from a user and send this information to a server for examination and processing <form> is a container for form elements
Radio buttons:
<br> <input type="radio" name="radiobutton" value="male"> male<br> <input type="radio" name="radiobutton" value="female" checked> female If two or more radio buttons have the same name, the user can only select one of them at a time This is how you make a radio button "group" If you ask for the value of that name, you will get the value specified for the selected radio button As with checkboxes, radio buttons do not contain any text
A plain button:
<input type="button" name="MyButton" value="Push Me">
A checkbox:
<input type="checkbox" name="rating"value="great" checked> type: "checkbox" name: used to reference this form element from JavaScript value: value to be returned when element is checked Note that there is no text associated with the checkbox—you have to supply text in the surrounding HTML
Hidden fields
<input type="hidden" name="hiddenField" value="this is the IP address of your computer so I can hack in!!!" What good is this? All input fields are sent back to the server, including hidden fields This is a way to include information that the user doesn't need to see (or that you don't want her to see) The value of a hidden field can be set programmatically (by JavaScript) before the form is submitted!! (eek)
A password field:
<input type="password" name="textfield3" value="secret">
A reset button:
<input type="reset" name="Reset" value="Reset">
A submit button:
<input type="submit" name="Submit" value="Submit">
A text field:
<input type="text" name="textfield" value="with an initial value">
A menu or list:
<select name="favcolour" size=1 multiple=false> <option value="red">red</option> <option value="green">green</option> <option value="blue">blue</option> </select> Additional arguments: size: the number of items visible in the list (default is "1") multiple: if set to "true", any number of items may be selected (default is "false")
A multi-line text field
<textarea name="textarea" cols="24" rows="2">Hello</textarea>
What do they need to work: (mailto:)
An email client installed on the user's computer to send the form data from the customer's computer to the form owner.
But where can you send it?
Creating forms is easy, but processing them can be difficult PHP, ASP, CGI (Perl) are standard form processing agents but who wants to learn them? What's the easiest way to send a form's results to an e-mail address? Answer: Just use mailto in the form's action attribute: <form action="mailto:[email protected] " method="post" enctype="text/plain">
<form method="get"
Form data is sent as a URL with form_data info appended to the end. Can be used only if data is all ASCII and not more than 100 characters
<form method="post"
Form data is sent in the body of the URL request
<form action="url"
Specifies where to send the data when the Submit button is clicked
<form target="target"
Tells where to open the page sent as a result of the request Eg: target= _blank means open in a new window Eg: target= _top means use the same window
Success with Mailto:
Use the enctype="text/plain" attribute This tells the browser (and email client) that the form is sending plain text rather than anything more complicated. Using the enctype="text/plain" attribute helps the server process the data. Use the Get method
What can go wrong? (mailto:)
Webbased email program Email program that does not understand mailto: Server that does not understand mailto: Robo emails!
Form Elements: <form<</form>
begins and ends a form no limit on the number of forms in a document
Form Attributes: Password
creates ******* on the screen instead of displaying text in a text box
Form Elements: <select>
creates a list
Form Elements: <textarea>
creates a multiple-line field for text
Form Elements: <legend>
creates descriptive text for a form
Form Elements: <option>
creates entries for a list
Form Elements: <input>
creates form objects
Form Attributes: MaxLength
determines the maximum number of characters that will be accepted into a text field
Form Attributes: Size
determines the number of entries in the list
Form Attributes: Type
determines the type of control value of radio creates a radio button; value of checkbox creates a check box
Form Attributes: Action
identifies the location on the server where the database resides
Form Elements: <fieldset>
organizes form elements
