Initially, when web was designed, it was not for interactive purpose but just only for sharing documents or pages or just navigating from one document to another. So initial websites were in read-only format.
But there are lots of cases where we want to interact with websites/pages like we want to search or give some comments about the articles.. or place orders on e-commerce sites evolving these days.
Utility of 'Forms' makes a web page interactive.
Without form, a web site or web page is 'read-only' - it just provides information to the user.
Forms enables the user to provide information to the web site and thus we can perform various tasks such as: searching on website, post comments, ask for some information or place orders for goods...
Forms are always placed between <BODY> & </BODY> tags. These are GUI based and may contains items such as text fields, buttons, check boxes, radio buttons and so on.. Form starts with <FORM> tag and ends with </FORM> tag and in between are the details about such various items.
Below figure shows an interactive form:
Utility of 'Forms' makes a web page interactive.
Without form, a web site or web page is 'read-only' - it just provides information to the user.
Forms enables the user to provide information to the web site and thus we can perform various tasks such as: searching on website, post comments, ask for some information or place orders for goods...
Forms are always placed between <BODY> & </BODY> tags. These are GUI based and may contains items such as text fields, buttons, check boxes, radio buttons and so on.. Form starts with <FORM> tag and ends with </FORM> tag and in between are the details about such various items.
Below figure shows an interactive form:
Below is source code for the same (for proper alignment, all the items of the form are kept under <TABLE> tag):
< HTML> < HEAD> < TITLE>Send email to me< /TITLE> < /HEAD> < BODY> < H1>Send an Email< /H1> < FORM name="sendMail"> < TABLE> < TR> < TD> From : < /TD> < TD> < INPUT type="text" name="sender" size="50" /> < /TD> < /TR> < TR> < TD> To : < /TD> < TD> < INPUT type="text" name="receiver" size="50" /> < /TD> < /TR> < TR> < TD> Message: < /TD> < TD> < TEXTAREA name="message" cols="38" rows="6">< /TEXTAREA> < /TD> < /TR> < TR> < TD>< /TD> < TD align="right"> < INPUT type="submit" name="sendEmail" value="Send email to me" /> < /TD> < /TR> < /TABLE> < /FORM> < /BODY> < /HTML>
Exact syntax of form is:
<FORM name="sendEmail" method="post" action="sendMailScriptURL">
Elements of the form
</FORM>
- name: Name given to the form.
- method: Forms can be submitted through two alternate methods – GET & POST.
- action: Specifies the URL that is accessed when the form is being submitted.
Some other form related tags:
- <INPUT> tag is only useful if we want to take input in only one line. To take input in number of lines we can use <TEXTAREA> tag.
- we can also use INPUT type="password" for password fields.
- <INPUT type="checkbox" > for checkbox field (default is unchecked).
- <INPUT type="radio" checked> for radio button (default is unchecked).
- <INPUT type="file"> for file upload.
- <input type="reset" value=""> for reset field. This will reset all fields to their default values. This can be used to perform clear functionality on a page.
No comments:
Post a Comment