Lesson 6.

7 HTML FORMS
Forms and Different Form Elements

Prepared by: MR. MARLON L. LALAGUNA

Form
It is a way of collecting customers information; conduct survey and even online examination. Collected data are submitted and processed on the server upon clicking the submit button. This requires a script or program to process.

Form Elements
FORM NAME One Line Text Box PICTURE TAG USE <input type=text Enter one line text name=valid name of information. size=15 value=any value> <input type=checkbox name=valid name value=any value> Select more than one item from the selection

Check Box

Radio Button

<input type=radio Select only one name=valid name item from the value=any value> selection

Form Elements (contd.)

FORM NAME Scrolling Text Box PICTURE TAG <text area cols=width rows=height> </text area> <select> <option>item1 <option>item2 </select> USE Enter any comments or suggestions about the web page Select an item from the dropdown list box

Drop-down Menu

Push Button

<input type=button name=valid name value=any value>

Submit, reset the information

Three Types of Buttons

Submit sends the data from the form to the server of the web site Reset resets or clears the content of the form elements Command button used to execute any command on the web page.

Form Attributes
Attributes Type Name Value Description Creates form elements Name each form of element to hold the value stored in it Store any value in the element. The value attribute in the push button is used to label the button Specify the length of the textbox. The size of the element is based on the number of characters

Size

Form Attributes (contd.)

Attributes Options Cols Description Create list items in the drop-down box Specify the width of scrolling box. The width is based on the number of characters Specify the height of the scrolling box. The height is based on the number of rows

Rows

Activity No. 14

link_section.html

Type these source codes in your Notepad. Save it as link_section.html

Activity No. 15

forms.html

Type the given source codes to create the form output below:

Type these source codes in your Notepad. Save it as form.html

ASSIGNMENT
Describe the following image formats:
JPEG GIF PNG

Give the different attributes of <img> tag. Describe each. Why do we need to add alternate text in our images?