 |
| Click to enlarge. Sample of HTML form |
The previous webpage is created using the code below.
<html><head><title>Forms</title></head><body> <form name="feedback" method="post" action="mailto:xyz@mail.com"> <fieldset> <legend><strong>A. Personal Information</strong></legend> Name: <input type="text" name="mail" size="40" /><br /> Date of Birth: <input type="text" name="mail" size="15" value="mm-dd-yyyy" /><br /> Interest: <input type="checkbox" name="interest" value="internet">Surfing the web <input type="checkbox" name="interest" value="Reading">Reading books<br /> Email: <input type="text" name="mail" /><br /> Country: <select name="user_country" size="1"> <option>Brunei</option> <option>Cambodia</option> <option>Indonesia</option> <option>Malaysia</option> <option selected="selected">Philippines</option> <option>Singapore</option> <option>Taiwan</option> <option>Thailand</option> <option>Vietnam</option> </select> </fieldset> <fieldset> <legend ><strong>B. Rate Our Website</strong></legend> <input type="radio" name="rating" value="Great" checked="checked" />It's Great! <input type="radio" name="rating" value="Good" />It's Good! <input type="radio" name="rating" value="Fair" />It's Fair! <input type="radio" name="rating" value="Poor" />It's Poor! </fieldset> <fieldset> <legend><strong>C. Give Us Your Comment To Further Improve Our Website</strong></legend> <textarea name="comment" rows="3" cols="50"></textarea> </fieldset> Thanks for visiting!<br /> <input type="submit" value="Submit"> <input type="reset" value="Reset"> </form> </body></html>
About the code
- The tag <form> holds all of the elements, such as text boxes, radio buttons, submit buttons, etc.
- The attribute name=”feedback” is used to give the form a name. You may have lots of form in your website so you better give each of your form a name.
- The attribute method=”post” specifies the method of transferring the form data to the web server.
- The attribute action=”mailto:xyz@mail.com” tells the browser to post all the data from the visitor to the email address provided. You have to replace the given email address with your own. The action attribute may also give the URL of the CGI program which will process the form.
- The <fieldset> and </fieldset> tags are used to wrap around all the elements that you want to group together.
- The <legend> tag defines a caption for the fieldset element.
- The <input> tag is used for many of the form elements that are there to collect user input.
- The attribute type specifies the type of input element.
- type=”text” creates a text entry field, the most popular type of data entry field. The characteristics of text fields can be changed using the attributes value, size and maxlength. The value attribute is used to set an initial value for the field. You may try to add the value attribute in our example and see its effect. The size attribute specifies how wide the text field is. In our example the size of the first text field is size=”40” which means that the size of the text field is 40 characters wide. It does not set the maximum length of what can be typed in, but it specifies the size of the text field visible to the user. To set the number of characters that can be typed in, use the maxlength attribute. Try to modify our example by adding the maxlength attribute with input tags that have type=”text” attribute to see its effect. Then experiment on it by typing characters more than what is required in the text field. What’s the effect?
- type=”checkbox” creates a checkbox which can be either on or off. By default, the checkbox is at first off. Use checkbox if you want your visitor to select more than one option from the given choices. If you want the checkbox to be “on” initially, use the checked=”checked” attribute. You can use the same name attribute in more than one input to indicate different options. In our example, we have two checkboxes with the same name value “interest”, this tells that you have two choices available for “interest”, and those choices are defined using the value attribute. In our example the values are “Internet” for internet surfing and “Reading” for reading books. You may have several checkboxes in your webpage, make sure that you use the attribute name to categorize it and use value to differentiate one checkboxes to another or give several options to your visitor related to the given category. In short, name is used to categorize checkboxes while value is used to present option related to the given category. This explanation on name and value attribute is also applied in other input types like radio buttons.
- <select> tag creates a list of options, one or more of which can be selected. The <select> tag consists of two or more <option> tags and </select> tag to tell the browser that the select element has ended. By default only one option can be selected. The attribute name is used to name the <select> tag. The size attribute indicates the number of rows of list should be displayed in the browser, so if you want to display two rows of list you should use size=”2”.
- <option> tag is used along with the <select> tag to create select lists. <option> tag specifies the start of a new option in the list. The <option> tag can be used without any attributes, but you usually need the value attribute, which designates what to be sent to the server. The text which follows <option> tag will be the one to be displayed in the browser. In XHTML, every tag should be closed properly; therefore you should close the <option> tag with </option>.
- The selected=”selected” attribute of <option> tag indicates that the option should be selected by default. In our example, the option “Philippines” has the attribute selected=”selected”, therefore “Philippines” will be selected by default and will be the one shown first even though it is not the first one provided in the list.
- <textarea> tag designates a form field where the user can enter large amount of text.
- The <textarea> tag should have cols and rows attributes. The cols attribute specifies the number of characters the textarea should have across the page. The rows attribute specifies the number of rows the textarea should have. These attributes do not set any limit on the number of characters you can type on it. It just indicates how much of the textarea is visible.
- type=”radio” is used to create a series of options, called radio buttons, of which only one can be selected.
- type=”submit” creates the "Submit" button which sends the form into the email address provided or the CGI (Common Gateway Interface). Whatever text you placed on the value attribute will be the one displayed in the browser in a form of button.
- type=”reset” is used to reset everything back to the original values when clicked on. Just like in type=”submit” attribute, whatever text you placed on the value attribute will be the one displayed in the browser in a form of button.
NOTE: The <form> tag itself is not visible to the user. And also note that the default width of a text field is 20 characters.
Other Types of Input Fields
The <input> tag produces the data entry fields on an HTML form. In the previous lesson we have discussed already some types of input like text, checkbox, radio button, submit and reset. In this lesson you will learn the password, hidden and file input fields.The type=”password” Attribute
The password attribute of the input element specifies that the field is for inputting a password. The password attribute also works just like a text type field, with the difference that whatever is typed on it will be masked in the screen. This is useful especially when someone is watching over you. Instead of displaying the characters that you typed in, the browser will just show a series of asterisks (*), bullets (·), or something else to show that you are typing something. Open your text editor now and key in next code.<html><head><title>Forms - password</title></head><body> <form method="post" action="mailto:xyz@mail.com"> <fieldset><legend><strong>Login:</strong></legend> username: <input type="text" name="yourusername"><br /> password: <input type="password" name="yourpassword"> <p><input type="submit" value="Submit"></p> </fieldset> </FORM> </body></html>
The previous code will be displayed by the browser this way.
The type=”hidden” attribute
The type=”hidden” attribute specifies that the field is invisible and the users do not need to interact with it. One good example of this is a website which enables online discussions. The website may use a hidden field to keep track of which message is being replied to. Key in the next code to see the effect of type=”hidden” attribute.<html><head><title>Forms - Hidden</title></head><body> <form method="post" action="cgilocation..."> <fieldset><legend><strong>Your Reply:</strong></legend> <input type="hidden" name="postingID" value="10025" /> username: <input name="username" size="30" /><br /> subject: <input name="subject" value="Re: Rizal's Work "size="30" /><br /> comments:<br /> <textarea name="comments" cols="40" rows="3"> Poly wrote: I think El Filibusterismo is better than Noli. </textarea> <p><input type="submit" value="Send!"></p> </fieldset> </form> </body> </html>
The previous code as displayed in the browser.
The type=”file” Attribute
The attribute type=”file” is used if you want to browse files in your computer and upload it into remote computer or server using form. You usually encounter this type of input field when uploading pictures or other files to most networking and file sharing websites. Open your text editor now and key in the next code.<html><head><title>Forms - File</title></head><body> <form method="post" enctype="multipart/form-data" action="cgilocation..."> File to upload: <input type='file' name="uploadfile"><br /> <input type="submit" VALUE="Upload!"> </form> </body> </html>
The code will be rendered by the browser this way.
NOTE: The characters in a password field are masked. This means that the browser will just show a series of asterisks (*), bullets (•), or something else to show that you are typing something.
3 comments:
Thanks for this tutorial :D It's very detailed and clear. It freshens up my mind for this HTML tags. Thank you very much coz I am reviewing this topic now. It's very helpful :)
this tutorial is a big help especially that I am learning from this.
Cool! You've explained it well I think a newbie like me could do it. Thanks for the tutorial!
Post a Comment