HTML:- Part-6

              Session 6

ØCreating HTML forms

ØCreating Text Boxes

ØCreating Checkbox from Control

ØCreating Radio button, Submit Button and Image Button

ØCreating Menu Control

ØCreating Multiple Text Line Input Controls

1. Creating HTML Forms 

ØWeb forms allow you to receive feedback, orders, or other information from your web pages

readers. HTML forms are ever used in web search engine e.g. Hotmail or Yahoo!

ØThis chapter will help you to create your own forms and the basics of how to handle form

submissions.

ØAn HTML form is a part of a Web page that includes areas where readers can enter information to

send back to you, the publisher of the web page.

2.Creating Text Boxes

ØInput elements are the most flexible and commonly used form control. The default TYPE for an

input element is “TEXT”.

Ø“TEXT” Used to create the single-line text boxes. A text box is created like this:

ØEnter your music preference: <INPUT TYPE=”TEXT” NAME= “MUSIC”>

ØYou can also specify size for the text box by using SIZE attribute. To validate textbox for not

entering more than 40 words MAXLENGTH attribute is used.

ØE.g. MAXLENGTH=”40”. 

3. Creating Checkbox Form Control

ØA checkbox is simply an empty box by default.

ØExample:

Ø<INPUT TYPE=”CHECKBOX” NAME=”MailList”> Please add me to your mailing list.

ØTo make the checkbox start off checked, add the CHECKED attribute. You can control what data is

sent by a checked checkbox by specifying a VALUE attribute.

ØExample:

Ø<INPUT TYPE=”CHECKBOX” NAME=”MailList” VALUE=”Add”> Add me to your

mailing list.

4. Creating Radio Button Form Control

ØIf we want that user to should choose only one option out of three than radio button options is the

best choice.

ØIn radio button multiple choice selection is not valid. If one push in one buttons, the other button is

pushed out- so only one button can be pushed in at a time.

5. Creating Submit Button Form Controls

ØEarly we mentioned that every form must have a submit button.

ØIt is not compulsory that submit form should be last control on a form.

ØIt can occur anywhere within the form area.

ØThe label inside the submit button is taken from the VALUE attribute.

ØA form can include more than one submit button. This allows the forms to be submitted with

different values, depending on which submit button is chosen.

6. Creating Image Submit Button

ØAn input element with TYPE=”IMAGE” creates an image button.

ØAn image button is similar in function to a submit button except that instead of a gray button with

text, an image of your choice is displayed.

ØThe attributes of an image button are similar to the attributes for the <IMG> tag.

ØYou must specify a SRC for the image, and you should specify an ALT attribute for alternate text.

======================================================================

ØExample:

Ø<INPUT TYPE=”IMAGE” SRC=”RAJ.GIF” ALT=”[Submit Me]” ALIGN=”RIGHT”>

ØAbove example creates a submit button that uses the raj.gif image as the face of the button.

7. Creating Menu Control

ØThe select element creates a menu control.

ØThere are 2 formats for menu controls, and the one that’s used depends on the attributes used in the

select element.

ØThe select element must contain one or more option elements.

ØThe select element must begin with a <SELECT> </SELECT> tag

8. Creating Multiple Text Line Input Controls

ØTextarea element can create a mutiple line text box. To use a textarea element, you must begin with

a <TEXTAREA> tag.

ØYou must specify a number of rows and a number of columns with the ROWS and COLS attributes.

ØYou must finished the control with a </TEXTAREA> tag.