LOGO FORMs in HTML FORMs in HTML CHAPTER 5 Eastern Mediterranean University School of Computing and Technology Department of Information Technology ITEC229 ITEC229 Client-Side Internet and Web Programming Client-Side Internet and Web Programming Prepared by: R. Kansoy
Eastern Mediterranean University School of Computing and Technology Department of Information Technology. ITEC229 Client-Side Internet and Web Programming. FORMs in HTML. CHAPTER 5. Prepared by: R. Kansoy. 5. FORMs in HTML. Used to c ollect information from people viewing your site - PowerPoint PPT Presentation
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
LOGO
FORMs in HTMLFORMs in HTML
CHAPTER 5
Eastern Mediterranean UniversitySchool of Computing and TechnologyDepartment of Information Technology
ITEC229ITEC229Client-Side Internet and Web ProgrammingClient-Side Internet and Web Programming
Prepared by: R. Kansoy
5. FORMs in HTML
http://sct.emu.edu.tr/it/itec2292
Used to collect information from people viewing your site
The <FORM> </FORM> tag is used to create an HTML form.
FORM element Attributes
METHOD attribute indicates the way the Web server will organize and send you form output.
• METHOD = “post” in a form that causes changes to server data.• METHOD = “get” in a form that does not cause any changes in server data.
ACTION attribute
• Path to a scriptWeb server: machine that processes browser requests.Web server: machine that processes browser requests.
5. FORMs in HTML
http://sct.emu.edu.tr/it/itec2293
HTML forms are used to pass data to a server.
A form can contain input elements like; text fields, checkboxes, radio buttons, submit buttons and more..
A form can also contain select lists, textarea, fieldset, legend, and label elements.
5. FORMs in HTML
http://sct.emu.edu.tr/it/itec2294
The Input ElementThe Input Element
The most important form element is the input element.
An input element can vary in many ways, depending on the type attribute.
An input element can be of type text, checkbox, password, radio, submit, reset and more..
5. FORMs in HTML
http://sct.emu.edu.tr/it/itec2295
The Input ElementThe Input Element
INPUT element Attributes: TYPE (required)
– Defines the usage of the INPUT element– Hidden inputs always have TYPE = “hidden”
NAME provides a unique identification for INPUT element
VALUE indicates the value that the INPUT element sends to the server upon submission
SIZE– For TYPE = “text”, specifies the width of the text input, measured in characters
MAXLENGTH– For TYPE = “text”, specifies the maximum number of characters that the text input will accept
<input type="submit"> defines a submit button.A submit button is used to send form data to a server.The data is sent to the page specified in the form's action attribute. The file defined in the action attribute usually does something with the received input.VALUE attribute changes the text displayed on the button (default is “Submit”)
11 http://sct.emu.edu.tr/it/itec229
How the HTML code above looks in a browser:
NOTE: If you type some characters in the text field above, and click the "Submit" button, the browser will send your input to a page called "html_form_action.asp". The page will show you the received input
<input type= "reset" > defines a reset button.A reset button is used to clear all the entries user entered into the form.VALUE attribute changes the text displayed on the button (default is “Reset”)
<INPUT TYPE = "hidden" NAME = "recipient" VALUE = "[email protected]"><INPUT TYPE = "hidden" NAME = "subject" VALUE = "Feedback Form"><INPUT TYPE = "hidden" NAME = "redirect" VALUE = "main.html">
<P><STRONG>Name: </STRONG><INPUT NAME = "name" TYPE = "text" SIZE = "25"></P><P><STRONG>Comments:</STRONG><TEXTAREA NAME = "comments" ROWS = "4" COLS = "36"></TEXTAREA></P>
<HTML><HEAD><TITLE> Forms</TITLE></HEAD>
<BODY><H2>Feedback Form</H2>
<P>Please fill out this form to help us improve our site.</P>
<INPUT TYPE = "hidden" NAME = "recipient" VALUE = "[email protected]"><INPUT TYPE = "hidden" NAME = "subject" VALUE = "Feedback Form"><INPUT TYPE = "hidden" NAME = "redirect" VALUE = "main.html">
<P><STRONG>Name: </STRONG><INPUT NAME = "name" TYPE = "text" SIZE = "25"></P><P><STRONG>Comments:</STRONG><TEXTAREA NAME = "comments" ROWS = "4" COLS = "36"></TEXTAREA></P>
5. FORMs in HTML
EEXAMPLE 1 (cont..) :XAMPLE 1 (cont..) :
17 http://sct.emu.edu.tr/it/itec229
<P><STRONG>Email Address:</STRONG><INPUT NAME = "email" TYPE = "text" SIZE = "25"></P>
<P><STRONG>Things you liked:</STRONG><BR>Site design <INPUT NAME="things" TYPE="checkbox" VALUE="Design">Links <INPUT NAME="things" TYPE="checkbox" VALUE="Links">Ease of use <INPUT NAME="things" TYPE="checkbox" VALUE="Ease">Images <INPUT NAME="things" TYPE="checkbox" VALUE="Images">Source code <INPUT NAME="things" TYPE="checkbox" VALUE="Code"></P>
<INPUT TYPE="submit" VALUE="Submit Your Entries"><INPUT TYPE="reset" VALUE="Clear Your Entries">
</FORM></BODY></HTML>
<P><STRONG>Email Address:</STRONG><INPUT NAME = "email" TYPE = "text" SIZE = "25"></P>
<P><STRONG>Things you liked:</STRONG><BR>Site design <INPUT NAME="things" TYPE="checkbox" VALUE="Design">Links <INPUT NAME="things" TYPE="checkbox" VALUE="Links">Ease of use <INPUT NAME="things" TYPE="checkbox" VALUE="Ease">Images <INPUT NAME="things" TYPE="checkbox" VALUE="Images">Source code <INPUT NAME="things" TYPE="checkbox" VALUE="Code"></P>
<INPUT TYPE="submit" VALUE="Submit Your Entries"><INPUT TYPE="reset" VALUE="Clear Your Entries">
</FORM></BODY></HTML>
5. FORMs in HTML
EEXAMPLE 1 (output):XAMPLE 1 (output):
18 http://sct.emu.edu.tr/it/itec229
5. FORMs in HTML
EEXAMPLE 2:XAMPLE 2:
19 http://sct.emu.edu.tr/it/itec229
<HTML><HEAD><TITLE> Forms II</TITLE></HEAD>
<BODY><H2>Feedback Form</H2><P>Please fill out this form to help us improve our site.</P>
<FORM METHOD = "POST" ACTION = "/cgi-bin/formmail"><INPUT TYPE = "hidden" NAME = "recipient" VALUE = "[email protected]"><INPUT TYPE = "hidden" NAME = "subject" VALUE = "Feedback Form"><INPUT TYPE = "hidden" NAME = "redirect" VALUE = "main.html">
<P><STRONG>Name: </STRONG><INPUT NAME = "name" TYPE = "text" SIZE = "25"></P><P><STRONG>Comments:</STRONG><TEXTAREA NAME = "comments" ROWS = "4" COLS = "36"></TEXTAREA></P>
<P><STRONG>Email Address:</STRONG><INPUT NAME = "email" TYPE = "password" SIZE = "25"></P>
<HTML><HEAD><TITLE> Forms II</TITLE></HEAD>
<BODY><H2>Feedback Form</H2><P>Please fill out this form to help us improve our site.</P>
<FORM METHOD = "POST" ACTION = "/cgi-bin/formmail"><INPUT TYPE = "hidden" NAME = "recipient" VALUE = "[email protected]"><INPUT TYPE = "hidden" NAME = "subject" VALUE = "Feedback Form"><INPUT TYPE = "hidden" NAME = "redirect" VALUE = "main.html">
<P><STRONG>Name: </STRONG><INPUT NAME = "name" TYPE = "text" SIZE = "25"></P><P><STRONG>Comments:</STRONG><TEXTAREA NAME = "comments" ROWS = "4" COLS = "36"></TEXTAREA></P>
<P><STRONG>Email Address:</STRONG><INPUT NAME = "email" TYPE = "password" SIZE = "25"></P>
5. FORMs in HTML
EEXAMPLE 2 (cont..):XAMPLE 2 (cont..):
20 http://sct.emu.edu.tr/it/itec229
<P><STRONG>Things you liked:</STRONG><BR>Site design <INPUT NAME="things" TYPE="checkbox" VALUE="Design">Links <INPUT NAME="things" TYPE="checkbox" VALUE="Links">Ease of use <INPUT NAME="things" TYPE="checkbox" VALUE="Ease">Images <INPUT NAME="things" TYPE="checkbox" VALUE="Images">Source code <INPUT NAME="things" TYPE="checkbox" VALUE="Code"></P>
<P><STRONG>How did you get to our site?:</STRONG><BR>Search engine<INPUT NAME="how get to site" TYPE="radio" VALUE="search engine" CHECKED>Links from another site<INPUT NAME="how get to site" TYPE="radio" VALUE="link">Deitel.com Web site<INPUT NAME="how get to site" TYPE="radio" VALUE="deitel.com">Reference in a book<INPUT NAME="how get to site" TYPE="radio" VALUE="book">Other<INPUT NAME="how get to site" TYPE="radio" VALUE="other"></P>
<P><STRONG>Things you liked:</STRONG><BR>Site design <INPUT NAME="things" TYPE="checkbox" VALUE="Design">Links <INPUT NAME="things" TYPE="checkbox" VALUE="Links">Ease of use <INPUT NAME="things" TYPE="checkbox" VALUE="Ease">Images <INPUT NAME="things" TYPE="checkbox" VALUE="Images">Source code <INPUT NAME="things" TYPE="checkbox" VALUE="Code"></P>
<P><STRONG>How did you get to our site?:</STRONG><BR>Search engine<INPUT NAME="how get to site" TYPE="radio" VALUE="search engine" CHECKED>Links from another site<INPUT NAME="how get to site" TYPE="radio" VALUE="link">Deitel.com Web site<INPUT NAME="how get to site" TYPE="radio" VALUE="deitel.com">Reference in a book<INPUT NAME="how get to site" TYPE="radio" VALUE="book">Other<INPUT NAME="how get to site" TYPE="radio" VALUE="other"></P>
5. FORMs in HTML
EEXAMPLE 2 (cont..):XAMPLE 2 (cont..):
21 http://sct.emu.edu.tr/it/itec229
<P><STRONG>Rate our site (1-10):</STRONG><SELECT NAME = "rating"><OPTION SELECTED>Amazing:-)<OPTION>10<OPTION>9<OPTION>8<OPTION>7<OPTION>6<OPTION>5<OPTION>4<OPTION>3<OPTION>2<OPTION>1<OPTION>The Pits:-(</SELECT></P>
<INPUT TYPE = "submit" VALUE = "Submit Your Entries"><INPUT TYPE = "reset" VALUE = "Clear Your Entries"></FORM></BODY></HTML>
<P><STRONG>Rate our site (1-10):</STRONG><SELECT NAME = "rating"><OPTION SELECTED>Amazing:-)<OPTION>10<OPTION>9<OPTION>8<OPTION>7<OPTION>6<OPTION>5<OPTION>4<OPTION>3<OPTION>2<OPTION>1<OPTION>The Pits:-(</SELECT></P>
<INPUT TYPE = "submit" VALUE = "Submit Your Entries"><INPUT TYPE = "reset" VALUE = "Clear Your Entries"></FORM></BODY></HTML>