1 / 17

Creating Forms

Creating Forms. Masters Project CS 490. HTML Tags. <FORM> <INPUT> </FORM>. Attributes. <FORM> required attributes ACTION= “script.url”—location on server of CGI script “mailto:(email address)” METHOD= “GET”—Data added at end of URL, sent as variable

shoshana-reynolds
Download Presentation

Creating Forms

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. Creating Forms Masters Project CS 490

  2. HTML Tags <FORM> <INPUT> </FORM>

  3. Attributes • <FORM> required attributes • ACTION= • “script.url”—location on server of CGI script • “mailto:(email address)” • METHOD= • “GET”—Data added at end of URL, sent as variable • “POST”—Data is sent separately to server (This is what we will use.)

  4. Sample ofOpening Form Tag • < FORM ACTION = “mailto: kmm @ neiu.edu METHOD = “POST” > (Spaces are shown for ease of viewing only.)

  5. User Input Fields • These define the elements that will appear on the form that the user will interact with. • This is the same concept as a database or a mail merge field. • The elements are defined using the <INPUT> tag. • Regular, explanatory text can be inter-spersed with <INPUT> on the form.

  6. The <INPUT> TagTYPE = Attribute • The TYPE= attribute specifies the type of input. Options are: • TEXT • PASSWORD • RADIO • CHECKBOX • SUBMIT • RESET

  7. Other <INPUT> TagAttributes • SIZE • Defines the size of text input box on form in # of characters—default is 20 • NAME • Gives the text input box a data element name that identifies the information • CHECKED • For marking radio button/checkbox by default • READONLY • To keep visitors from changing form elements

  8. Sample <FORM ACTION=“mailto:kmm@neiu.edu” METHOD=“POST”> <H2>Response Form</H2> <P> Customer Name: <INPUT TYPE=“TEXT” NAME=“customer” SIZE=“30”> </P> </FORM>

  9. Sample <FORM ACTION=“mailto:kmm@neiu.edu” METHOD= “POST”> <H2>Response Form</H2> <P>Customer Name: <INPUT TYPE=“TEXT” NAME=“customer” SIZE=“30”></P> <P>City: </P> <INPUT TYPE=“RADIO” NAME=“city” VALUE=“Des Plaines”>DesPlaines<BR> <INPUT TYPE=“RADIO” NAME=“city” VALUE= “Skokie” CHECKED>Skokie<BR> (Sample continued)

  10. Result Response Form Customer Name: City: Des Plaines Skokie

  11. List Boxes Using the SELECT tag and OPTION attribute, a list box can be created. <SELECT NAME=“Pets” MULTIPLE> <OPTION>Dog/s <OPTION>Cat/s <OPTION>Bird/s <OPTION>Other/s </SELECT>

  12. Sample Cont’d <P> <INPUT TYPE=“CHECKBOX” VALUE= “information”>Please send information.</P> <P> What types of pets do you have?<BR> (Select all that apply)</P> <SELECT NAME=“Pets” MULTIPLE> <OPTION>Dog/s <OPTION>Cat/s <OPTION>Bird/s <OPTION>Other/s </SELECT> (Sample continued)

  13. Dog/s Result Response Form Customer Name: City: Des Plaines Skokie Please send information What types of pets do you have? (Select all that apply)

  14. Finally... SUBMIT • The standard way for a user to send form info to the server is clicking a submit button RESET • This button resets all the form’s default settings <INPUT TYPE=“SUBMIT” VALUE=“Send Data”> <INPUT TYPE=“RESET” VALUE=“Clear”>

  15. Sample Cont’d <P> <INPUT TYPE=“SUBMIT” VALUE= “Send Data”> <INPUT TYPE=“RESET” VALUE=“Clear”> </P> </FORM> </BODY> </HTML>

  16. Dog/s Response Form Customer Name: City: Des Plaines Skokie Please send information What types of pets do you have? (Select all that apply) Send Data Clear K. Tabers

  17. HTML TagsReview

More Related