Client-Side Internet and Web Programming 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 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 script Web server: machine that processes browser requests. http://sct.emu.edu.tr/it/itec229

5. FORMs in HTML 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. http://sct.emu.edu.tr/it/itec229

5. FORMs in HTML The 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.. http://sct.emu.edu.tr/it/itec229

5. FORMs in HTML The 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 http://sct.emu.edu.tr/it/itec229

5. FORMs in HTML Text Fields <input type="text"> defines a one-line input field that a user can enter text into: <form> First name: <input type="text" name="fname" size="25"> <br> Last name: <input type="text" name="lname" size="25"> </form> How the HTML code above looks in a browser: Note: The form itself is not visible. Also note that the default width of a text field is 25 characters.  http://sct.emu.edu.tr/it/itec229

5. FORMs in HTML Password Field <input type="password"> defines a password field: <form> Password: <input type="password" name="pswd"> </form> How the HTML code above looks in a browser: Note: The characters in a password field are masked (shown as asterisks or circles).  http://sct.emu.edu.tr/it/itec229

5. FORMs in HTML Radio Buttons Radio buttons let a user select ONLY ONE of a limited number of choices. <input type="radio"> defines a radio button. CHECKED attribute indicates which radio button is selected initially <form> <input type="radio" name="gender" value="male">Male<br> <input type="radio" name="gender" value="female">Female </form> How the HTML code above looks in a browser: http://sct.emu.edu.tr/it/itec229

5. FORMs in HTML Checkboxes Checkboxes let a user select NONE/ONE/MORE options of a limited number of choices. <input type="checkbox"> defines a checkbox. Used individually or in groups Each checkbox in a group should have same NAME Make sure that the checkboxes within a group have different VALUE attribute values Otherwise, browser will cannot distinguish between them CHECKED attribute checks boxes initially http://sct.emu.edu.tr/it/itec229

5. FORMs in HTML Checkboxes <form> <input type="checkbox" name="vehicle" value="Bike"> I have a bike<br> <input type="checkbox" name="vehicle" value="Car"> I have a car  </form> How the HTML code above looks in a browser: http://sct.emu.edu.tr/it/itec229

5. FORMs in HTML Submit Button <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”) <form name="input" action="html_form_action.asp" method="get"> Username: <input type="text" name="user"> <input type="submit" value="Submit"></form> 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 http://sct.emu.edu.tr/it/itec229

5. FORMs in HTML Reset Button <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”) <form name="input" action="html_form_action.asp" method="get"> <P>Username: <input type="text" name="user" size="25"></P> <P>Password: <input type="password" name="pswd" size="25"></P> <P><input type="submit" value="Submit"> <input type="reset" value="Reset"></P></form> How the HTML code above looks in a browser: http://sct.emu.edu.tr/it/itec229

5. FORMs in HTML TEXTAREA Inserts a scrollable text box into FORM ROWS and COLS attributes specify the number of character rows and columns <form name="input" action="html_form_action.asp" method="get"> <textarea rows="6" cols="36"> ITEC 229 </textarea> </form> How the HTML code above looks in a browser: http://sct.emu.edu.tr/it/itec229

5. FORMs in HTML SELECT Places a selectable list of items inside FORM Include NAME attribute Add an item to list Insert an OPTION element in the <SELECT>…</SELECT>tags Closing OPTION tag optional SELECTED attribute applies a default selection to list Change the number of list options visible Including the SIZE = “x” attribute inside the <SELECT> tag x number of options visible http://sct.emu.edu.tr/it/itec229

5. FORMs in HTML SELECT How the HTML code above looks in a browser: <form action=""> <select name="cars"> <option selected>BMW</option> <option>Mercedes</option> <option>Audi</option> </select> </form> How the HTML code above looks in a browser: http://sct.emu.edu.tr/it/itec229

5. FORMs in HTML EXAMPLE 1: <HTML> <HEAD><TITLE> Forms</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 = "deitel@deitel.com"> <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> http://sct.emu.edu.tr/it/itec229

5. FORMs in HTML EXAMPLE 1 (cont..) : <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> http://sct.emu.edu.tr/it/itec229

5. FORMs in HTML EXAMPLE 1 (output): http://sct.emu.edu.tr/it/itec229

5. FORMs in HTML EXAMPLE 2: <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 = "deitel@deitel.com"> <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> http://sct.emu.edu.tr/it/itec229

5. FORMs in HTML EXAMPLE 2 (cont..): <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> http://sct.emu.edu.tr/it/itec229

5. FORMs in HTML EXAMPLE 2 (cont..): <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> http://sct.emu.edu.tr/it/itec229

5. FORMs in HTML EXAMPLE 2 (output): http://sct.emu.edu.tr/it/itec229

Thank You ! END of CHAPTER 5 FORMs in HTML http://sct.emu.edu.tr/it/itec229