1 / 23

FORMs in HTML

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

farica
Télécharger la présentation

FORMs in HTML

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 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

  2. 5. FORMs in HTML • Used to collectinformation from people viewing your site • The <FORM> </FORM> tag is used to create an HTML form. • FORM elementAttributes • METHOD attribute indicates the way the Web server willorganize and send you form output. • • METHOD = “post” in a form that causes changes • to serverdata. • • METHOD = “get” in a form that does not cause • any changesin server data. • ACTION attribute • • Path to a script Web server: machine that processes browser requests. http://sct.emu.edu.tr/it/itec229

  3. 5. FORMs in HTML • HTML forms are used to pass data to a server. • A form can contain input elements like; • text fields, • checkboxes, • radiobuttons, • submit buttons • and more.. • A form can also contain • select lists, • textarea, • fieldset, • legend, • and label elements. http://sct.emu.edu.tr/it/itec229

  4. 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. 5. FORMs in HTML • The Input Element • INPUT elementAttributes: • 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 tothe server upon submission • SIZE • – For TYPE = “text”, specifies the width of the textinput, measured in characters • MAXLENGTH • – For TYPE = “text”, specifies the maximum number ofcharacters that the text input will accept http://sct.emu.edu.tr/it/itec229

  6. 5. FORMs in HTML Text Fields • <input type="text"> defines a one-line input field that a user canenter 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

  7. 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

  8. 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 selectedinitially <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

  9. 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 differentVALUE attribute values • Otherwise, browser will cannot distinguish between them • CHECKED attribute checks boxes initially http://sct.emu.edu.tr/it/itec229

  10. 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

  11. 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

  12. 5. FORMs in HTML Reset Button • <input type= "reset" > defines a resetbutton. • A resetbutton 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

  13. 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

  14. 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

  15. 5. FORMs in HTML SELECT <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

  16. 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

  17. 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

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

  19. 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

  20. 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

  21. 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

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

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

More Related