CodeNique - Free Tutorials on HTML, XHTML, CSS and More Online!

In this tutorial we are going to make a simple form, by using the <form> tag, which indicates that its contents is an interactive form that contains controls. The <form> tag also requires an end tag. A form is made of one or more checkboxes, pull-down menus, input boxes, image maps and clickable buttons. With that, said forms are a great way to collect information from visitors. If you have ever ordered anything online you have probably used a form to enter your shipping information and payment information. If you ever filled out a guest book online you have probably used a form, these are just some of the examples of what forms are used for.

The <fieldset> tag is used for organizing and grouping related elements within a form. The <fieldset> tag when used the proper way makes HTML and XHTML documents more accessible to nonvisual browsers. When using the <fieldset> tag the browsers may display a box around the elements within the <fieldset> tag. The <fieldset> tag requires an end tag.

Now let me introduce you to the <legend> tag, which can only be used inside the <fieldset> tag. The <legend> tag acts like a label for the <fieldset> tag and must be placed right after the <fieldset> start tag in order to work properly. The <legend> tag basically gives a caption to the <fieldset> tag. The <legend> tag also requires an end tag.

Now the <textarea> tag, allows your users to enter multiple lines of text, like comments and so on. And if the user enters more text then they can see the <textarea> tag automatically adds scroll bars. The default font in the <textarea> tag is fixed pitch. The <textarea> tag also requires an end tag. The <textarea> tag is similar to the <input type="text" /> tag but the <textarea> tag allows your users to enter multiple lines of information rather then a single line of text like the <input type="text" /> tag.

Now let’s make a simple drop down menu using the <select> and <option> tags, which both require an end tag. The <select> tag is a container tag for one or more <option> tags. The <select> tag has a required attribute, which you probably already know by now, which is called the name attribute that gives the <select> drop down menu a name.

Now what if you want a certain option selected in a drop down menu. By default, all the options within the <select> tag are unselected and for that reason, they are not included in the list of parameters when the form is submitted by the client to the server. Read More ››

The <optgroup> tag defines an <option> group by creating submenus for each <optgroup> tag. The <optgroup> tag allows you to group choices.

Now what if you want your drop down menu to be a scrolling list, all you have to do is use the size attribute and place it in the <select> tag. The size attribute specifies the number of rows that will be visible in the drop-down list. The size attribute can have any positive number for its value. The default value for the size attribute is 1 when the size isn’t specified.

Now let’s talk about the <input type="radio" />, which is some what like checkboxes but only one button in the group can be selected at a time by the user. What I mean by when I say group is that buttons with the same name as its value for the name attribute are members of the same group. If none of the buttons in the same group are checked by the user or the checked attribute, which I will explain later on in the "How To Add Checkboxes Using The <input> Tag" tutorial, the browser will automatically check the first radio button in the group.

The <input type="checkbox" /> can give your form a way for users to have an option to select or deselect a checkbox item quickly and easily. You can have multiple checkboxes that can be grouped to give your users multiple choices in your form in which they can choose all, some or none of the checkboxes.

Now you can use the <input type="image" />, which is used to create an input button using an image, instead of a regular push-style button. By default the <input type="image" /> is a submit button only. You cannot make an image reset button.

Now let’s talk about the <input type="file" />, which allows your users to select a file for uploading to the server, which will be sent to the server when submitted. The <input type="file" /> is accompanied by a browse button when rendered in a browser. When your user clicks the browse button a file dialog box and the path name of the selected file appears in the field or you can type the path name into the field.

The <input type="password" /> field is somewhat like the <input type="text" />, except that each character is displayed as an asterisk or bullet. Take note that this does not encrypt the information you enter, it only hides the info on screen, you can encrypt your info by using a web server running SSL, but the info can still be electronically stolen just by using the <input type="password" /> field.

Now the <input type="hidden" /> field also know as the <input type="hidden" /> control, which cannot be viewed in a browser. This is a good way to embed information into your forms that will not be ignored or changed by any user or browser. The <input type="hidden" /> controls are a great way to pass form processing information to the server that users cannot alter or see. The <input type="hidden" /> field is also a great way to store information from an earlier form so that it can be combined with the present forms data.

Now in this tutorial I will talk about the <label> tag, which defines relationships between the form controls and one or more text labels. Each <label> tag can only be associated with only one form control. Form controls are special tags for forms that can range from checkboxes, radio buttons, menus and so on. The <label> tag also requires an end tag.

The <button> tag defines a button that acts very much like the buttons created with the <input> tag. However, the <button> tag gives you much more control on how the button is displayed in the browser.

Now the <keygen> tag, which is considered a Netscape only tag. However, Mozilla, Firefox, Opera and Safari also support the <keygen> tag, but it is not supported or viewed in Internet Explorer (IE). The <keygen> tag is to be used within the <form> tag.

The tabindex attribute will set the order in which users navigate through your links, image maps, and form tags when pressing the tab key. In order for a user to activate a link the user will have to tab to it and then press the Enter key.

Now what if you don’t want your users to change the information they entered in a previous web page from your web site, this is when the <textarea> and <input> tags readonly attribute comes into play. The readonly attribute is a stand-alone attribute, which means it has no value, but in XHTML, every stand-alone attribute needs to have a value. So our readonly attribute will be coded readonly="readonly".