Scribd
Upload
111 views

Creating HTML Forms

The document explains how to create HTML forms. It describes the basic structure of a form using <form> tags, and how to specify attributes like method and action. It also covers different form input fields that can be used like text, password, checkboxes, radio buttons, and dropdown lists. Attributes are described for each input type to customize size, values, and other properties. The document provides examples for each input field type to demonstrate their proper usage in an HTML form.

Uploaded by

tiffysevills
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
111 views

Creating HTML Forms

The document explains how to create HTML forms. It describes the basic structure of a form using <form> tags, and how to specify attributes like method and action. It also covers different form input fields that can be used like text, password, checkboxes, radio buttons, and dropdown lists. Attributes are described for each input type to customize size, values, and other properties. The document provides examples for each input field type to demonstrate their proper usage in an HTML form.

Uploaded by

tiffysevills
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 12

CREATING HTML

FORMS

HTML FORM
AN HTML FORM IS A PART OF A WEB PAGE THAT INCLUDES
AREAS WHERE READERS CAN ENTER INFORMATION TO
BE SENT BACK TO YOU...
EVERY FORM MUST INCLUDE A BUTTON FOR THE USER
TO SUBMIT THE FORM.
EVERY FORM MUST BEGIN WITH A <FORM> TAG WHICH
CAN BE LOCATED ANYWHERE IN THE BODY OF THE HTML
DOCUMENT.

THE FORM TAG NORMALLY HAS TWO ATTRIBUTES:


A) METHOD
B) ACTION
EXAMPLE:
<FORM METHOD=POST
ACTION=MAILTO:[email protected]>
POST - MEANS TO SEND THE FORM ENTRY
RESULTS AS DOCUMENT
GET IS USED WHEN SUBMITTING QUERIES TO
SEARCH ENGINES FROM A WEB FORM.

THE ACTION ATTRIBUTE SPECIFIES THE


ADDRESS TO WHICH TO SEND THE FORM DATA.
ALL THE INPUT FIELDS WITHIN A FORM ARE
SPECIFIED WITH THE <INPUT> TAG AND
DIFFERENT ATTRIBUTES.

FORMS ATTRIBUTES
<FORM> - TO ACTIVATE THE FORM PORTION OF YOUR
HTML DOCUMENT.
< INPUT> - IS USED FOR TEXT OR OTHER DATA INPUT
FIELD.
<TYPE=OPTION> - TYPE OF INPUT ENTRY FIELD
<NAME=NAME> - SYMBOLIC NAME OF FIELD VALUE.
<VALUE=VALUE> - DEFAULT CONTENTS OF TEXT FIELD.
<CHECKED=OPTION> - BUTTON/BOX CHECKED BY
DEFAULT

<SIZE=NUMBER> - NUMBER OF CHARACTERS


IN DISPLAYED TEXT BOX
<MAXLENGTH=NUMBER> - MAXIMUM
CHARACTERS ACCEPTED
<SELECT> - POP UP MENU
<TEXTAREA> - MULTILINE ENTRY FIELDS

THE USER INPUT TYPES


TEXT IS THE DEFAULT, WITH SIZE USED TO SPECIFY THE DEFAULT SIZE
OF THE BOX THAT IS CREATED.
EXAMPLE:
<INPUT TYPE=TEXT SIZE=20 MAXLENGTH=30 NAME=FIRSTNAME>
PASSWORD IS A TEXT FIELD WITH THE USER INPUT DISPLAYED AS
ASTERISKS OR BULLETS FOR SECURITY.
EXAMPLE:
<INPUT TYPE =PASSWORD NAME=PASSWORD VALUE=EDUARDO
READONLY>
MAXLENGTH CAN BE USED TO SPECIFY THE MAXIMUM NUMBER OF
CHARACTERS ENTERED IN THE PASSWORD.

CHECKBOX OFFERS A SINGLE (UNGROUPED)


CHECKBOX. CHECKED ENABLES YOU TO SPECIFY
WHETHER OR NOT THE BOX SHOULD BE
CHECKED BY DEFAULT. IT APPEARS AS A SMALL
SQUARE THE USER CAN SELECT OR DESELECT
BY CLICKING.
EXAMPLE:
<INPUT TYPE=CHECKBOX NAME=PET
VALUE=DOG> DOG
<INPUT TYPE=CHECKBOX NAME=BABY
CHECKED> BABY MICKEY

RADIO DISPLAYS A TOGGLE BUTTON ., WHERE ONLY


ONE CHOICE CAN BE SELECTED AT A TIME.
EXAMPLE:

<INPUT TYPE=RADIO NAME=CARD VALUE=V> VISA


CARD
<INPUT TYPE=RADIO NAME=CARD VALUE=M
CHECKED> MASTERCARD

SUBMIT PRODUCES A PUSH BUTTON IN THE FORM


THAT, WHEN CLICKED, SUBMITS THE ENTIRE FORM
CONTENT TO THE SERVER.
EXAMPLE:

<INPUT TYPE=SUBMIT VALUE=ORDER>


<INPUT TYPE=RESET VALUE=CLEAR >

IMAGE IS IDENTICAL TO SUBMIT , BUT


INSTEAD OF A BUTTON ENABLES YOU TO
SPECIFY A GRAPHICAL IMAGE FOR THE
SUBMISSION OR ENTER BUTTON.
RESET ENABLES USERS TO CLEAR THE
CONTENTS OF ALL FIELDS IN THE FORM.

SELECTION LISTS
IS A POP UP MENU OF CHOICES WITH A <SELECT> TAG AND PARTNER TAG
<OPTION> DENOTING OF THE ITEMS THERE-IN. YOU MUST SPECIFY A NAME THAT
UNIQUELY IDENTIFIES THE OVERALL SELECTION WITHIN THE <SELECT> TAG
ITSELF.
BOTH SCROLLING LISTS AND FULL-DOWN PICK LISTS ARE CREATED WITH THE
<SELECT> TAG.
EXAMPLE:
<SELECT NAME=COURSE SIZE=3 MULTIPLE>
<OPTION SELECTED> AB PSYCHOLOGY</OPTION>
<OPTION>BS COMPUTER SCIENCE</OPTION>
<OPTION> AB COMMUNICATION</OPTION>
</SELECT>

TEXTAREA
IT ENABLES YOU TO PRODUCE A MULTILINE INPUT BOX. IT
ALSO REQUIRES A UNIQUE NAME. THE <TEXTAREA> TAG
ENABLES YOU TO SPECIFY THE SIZE OF THE TEXT INPUT
BOX WITH ROWS AND COLS ATTRIBUTE WHICH SPECIFY
THE NUMBER LINES IN THE BOX AND THE WITH
RESPECTIVELY. IT HAS A CLOSING TAG </TEXTAREA>.
EXAMPLE:
<TEXTAREA NAME=COMMENTS ROWS=5 COLS=25>
PLEASE SEND MORE INFORMATION. </TEXTAREA>

You might also like