CS代考 CGI 10

Forms and Common Gateway Interface
Copyright © Ellis Horowitz 1999-2022 CGI 1

• Used to create a set of pages that contain fields in which the viewer can select and supply information

Copyright By PowCoder代写 加微信 powcoder

– Introduced very early in HTML 2.0
– Allows WWW users to perform data entry
– Permit direct interaction with customers for inquiries, registration, sales of products, and services
– To create a capability requires two steps:
• Use HTML form elements to create the pages that contain the form
• Write a server-side script to process form data; this program must be placed so the WWW server can execute it
Copyright © Ellis Horowitz 1999-2022 CGI 2

Text Checkbox
Radio button Submit Reset Password
The Original Set of User Interface
<br /> Copyright © Ellis Horowitz 1999-2022<br /> Red Green Blue</p> <p> FORM Element and Some Attributes<br /> • Syntax <FORM>…</FORM> • Attribute Specifications<br /> – ACTION=URI (form handler)<br /> – METHOD=[ get | post ] (HTTP method for submitting form)<br /> • GET is the default; form contents are appended to the URL<br /> • POST form contents to be sent as payload<br /> – ENCTYPE=ContentType (content type to submit form as)<br /> • Defaults to application/x-www-urlencoded which returns name/value pairs, separated by &, spaces replaced by + and reserved characters (like #) replaced by %HH, H a hex digit<br /> – ACCEPT-CHARSET=Charsets (supported character encodings)<br /> – TARGET=FrameTarget (frame to render form result in, in HTML4)<br /> (a browsing context name or keyword, in HTML5, such as _self,<br /> _blank, _parent, _top, iframename)<br /> – ONSUBMIT=Script (form was submitted)<br /> – ONRESET=Script (form was reset)<br /> – AUTOCOMPLETE (HTML5 ONLY) values completed by browser https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form<br /> Copyright © Ellis Horowitz 1999-2022 CGI 4</p> <p> <INPUT> Tag<br /> • Used inside <FORM> tag to specify a data-entry object • Has attributes, here are a few<br /> – TYPE: User input type (default is TEXT)<br /> – NAME: Name of data entry object whose value the user will supply<br /> – CHECKED:<br /> – MAXLENGTH:<br /> Required for radio and checkboxes<br /> For radio buttons and checkboxes<br /> Specific to each type of field<br /> Limit on accepted characters<br /> file used as a graphical submit<br /> – SRC: Image<br /> button when TYPE=IMAGE<br /> – DISABLED unavailable in this context<br /> – READONLY for text and passwords<br /> • HTML5 adds several new attributes for validation • See http://www.w3schools.com/tags/tag_input.asp<br /> Copyright © Ellis Horowitz 1999-2022 CGI 5</p> <p> <INPUT> Tag Attributes<br /> • <input> tag also supports the Global Attributes, that can be used with all HTML elements<br /> – CLASS: Specifies one or more class names for an element (refers to a class in a style sheet)<br /> – HIDDEN: Specifies that an element is not yet, or is no longer, relevant<br /> – And many more. See: https://www.w3schools.com/tags/ref_standardattributes.asp<br /> • The <input> tag also supports the Event Attributes in HTML.<br /> – Window event attributes: onload, onunload, etc.<br /> – Form event attributes: onchange, onfocus, etc.<br /> – Keyboard / mouse events: onkeydown, onclick, etc.<br /> – Drag, clipboard, media events: onpause, onplay, etc. – And many more. See: https://www.w3schools.com/tags/ref_eventattributes.asp<br /> Copyright © Ellis Horowitz 1999-2022 CGI 6</p> <p> <INPUT> Element, Type Options(cont’d)<br /> •TYPE:[CHECKBOX1⁄2FILE1⁄2HIDDEN1⁄2IMAGE1⁄2PASSWORD1⁄2 RADIO1⁄2RESET1⁄2SUBMIT1⁄2TEXT]<br /> [HTML5 adds 13 new input types. See later slides] •CHECKBOX: A single value, on/off; each generates<br /> name/value pair<br /> <INPUT TYPE=CHECKBOX CHECKED NAME="MARRIED" VALUE="yes"><br /> •FILE: Users attach a file to the form contents; a text field holds the file name, and a button permits browsing<br /> <INPUT TYPE=FILE NAME=“fname"><br /> •HIDDEN: The field is not rendered, so servers can<br /> maintain state information<br /> <INPUT TYPE=HIDDEN NAME="BANKACCT" VALUE="A057-23- Copyright © Ellis Horowitz 1999-2022 CGI 7 <INPUT> Element, Type Options(cont’d) •RESET: Defines a button that users click to<br /> reset fields to their initial state<br /> <INPUT TYPE=RESET VALUE="CLEAR"><br /> •SUBMIT: Defines a button that users click to submit the form’s contents to the server<br /> <INPUT TYPE=SUBMIT VALUE="submit data"><br /> •TEXT: An input field of a single line where users can enter data<br /> <INPUT TYPE=TEXT SIZE=20 NAME="lastname" VALUE=“type your last name"><br /> Copyright © Ellis Horowitz 1999-2022 CGI 8</p> <p> <INPUT> Element, Type Options(cont’d)<br /> • IMAGE: Used for graphical submit buttons<br /> <INPUT TYPE=IMAGE SRC="banner.gif“ VALUE="gohome"><br /> • PASSWORD: Just like TYPE=TEXT, but the input is echoed with *<br /> <INPUT TYPE=PASSWORD SIZE=10 NAME="pw"><br /> • RADIO: Used for attributes that take a single value from a set of alternatives; all buttons have same name and explicit value<br /> <INPUT TYPE=RADIO NAME="AGE" VALUE="0-20"><br /> <INPUT TYPE=RADIO NAME="AGE" VALUE="21-50"><br /> <INPUT TYPE=RADIO NAME="AGE" VALUE="51-100" Copyright © Ellis Horowitz 1999-2022 CGI 9 <INPUT> Element, Type Options<br /> •TYPE:[COLOR1⁄2DATE1⁄2DATETIME1⁄2DATETIME-LOCAL1⁄2EMAIL1⁄2 MONTH1⁄2NUMBER1⁄2RANGE1⁄2SEARCH|TEL|TIME|URL|WEEK]<br /> •COLOR: Used for input fields that should contain a color<br /> Select color: <INPUT TYPE="COLOR" name=”favcolor"><br /> •DATE: Allows the user to select a date<br /> Birthday: <INPUT TYPE="DATE" NAME="bday"><br /> •DATETIME: Allows the user to select a date and time (with time zone)<br /> Birthday: <INPUT TYPE="DATETIME" NAME="BDAYTIME” •EMAIL: Allows the user to enter an e-mail address E-Mail: <INPUT TYPE="EMAIL" NAME="email” •MONTH: Allows the user to select month/year Birthday (M/Y): <INPUT TYPE="MONTH" NAME="bdaymonth" Copyright © Ellis Horowitz 1999-2022 CGI 10 <INPUT> Element, Type Options (cont’d) •NUMBER: Used to enter a numeric value<br /> Quantity (1-5): <INPUT TYPE="NUMBER" name="quantity" min="1" max="5"><br /> •RANGE: Used to enter a value from a range of numbers<br /> <INPUT TYPE="RANGE" NAME="points"><br /> •SEARCH: Used for search fields (behaves like regular TEXT)<br /> Search Google: <INPUT TYPE="SEARCH" NAME="GOOGLESEARCH”><br /> •TEL: Allows the user to enter a telephone num. Telephone: <INPUT TYPE="TEL" NAME="ustel" •TIME: Allows the user to select a time Time: <INPUT TYPE="TIME" NAME="ustime" Copyright © Ellis Horowitz 1999-2022 CGI 11 <INPUT> Element, Type Options (cont’d)<br /> •URL: Used to enter a URL address<br /> Add Homepage: <INPUT TYPE="URL" name="homepage" •WEEK: Used to select a week and year Select a week: <INPUT TYPE="WEEK" NAME="week_YR"><br /> •DATETIME-LOCAL: Used selct date and time(no time zone)<br /> Birthday: <INPUT TYPE="DATETIME-LOCAL” NAME="bday"><br /> Copyright © Ellis Horowitz 1999-2022 CGI 12</p> <p> <INPUT> Element, Type Options (cont’d)<br /> http://csci571.com/examples/html5/input.html<br /> Examples of all of the <input> element types, including the most recent in HTML5<br /> provided by w3schools<br /> Copyright © Ellis Horowitz 1999-2022 CGI 13</p> <p> Example of <FORM> With Text Widgets<br /> <HTML><HEAD><TITLE>Testing Text Widgets</TITLE><br /> <FORM METHOD="POST" ACTION="/cgi-bin/post-query"><br /> Name: <INPUT NAME="in_name" TYPE="text" SIZE=40><P><br /> Date of Birth: <INPUT TYPE="text” NAME="in_dob"><P><br /> Social Security Number: <INPUT TYPE="text" NAME="in_ssn"><P><br /> You can submit by clicking the SEND button:<br /> <INPUT TYPE="submit" VALUE="SEND"><br /> </FORM></BODY></HTML> Note:post-query is a standard Apache CGI program distributed by web servers and used<br /> to check that form elements are being properly sent to the server<br /> Copyright © Ellis Horowitz 1999-2022 CGI 14</p> <p> Browser Output of Text Widgets Example<br /> Copyright © Ellis Horowitz 1999-2022 CGI 15</p> <p> Query Results for Text Widget Example<br /> Copyright © Ellis Horowitz 1999-2022 CGI 16</p> <p> Example of <FORM> With Checkboxes<br /> <HTML><HEAD><TITLE>Testing Checkboxes</TITLE></HEAD> <BODY><br /> <FORM METHOD="POST" ACTION="/cgi-bin/post-query"> Fill in facts about yourself:<P><br /> <INPUT TYPE="checkbox" NAME="house" VALUE="yes">own a house<BR><br /> <INPUT TYPE="checkbox" NAME="car" VALUE="yes">own a car<BR><br /> <INPUT TYPE="checkbox" NAME="boat" VALUE="yes">own a boat<BR><br /> <INPUT TYPE="checkbox" NAME="degree" VALUE="yes">have a college degree<BR><br /> To reset the checkboxes, click here<br /> <INPUT TYPE=reset VALUE="RESET"><P><br /> You can submit by clicking on the SEND button: <INPUT TYPE=submit VALUE="SEND"><P> </FORM></BODY></HTML><br /> Copyright © Ellis Horowitz 1999-2022 CGI 17</p> <p> Browser Output of Checkbox Example<br /> Copyright © Ellis Horowitz 1999-2022 CGI 18</p> <p> Query Results of Checkbox Example<br /> Copyright © Ellis Horowitz 1999-2022 CGI 19</p> <p> Example of <FORM> With Radio Buttons<br /> <HTML><HEAD><TITLE>Testing Radio Buttons</TITLE></HEAD><br /> <BODY><FORM METHOD="POST" ACTION="/cgi-bin/post-query"><br /> How would you like to pay? Choose one of the following:<P><br /> <OL><LI><INPUT TYPE="radio" Name="paymethod" VALUE="billme" CHECKED>Bill me<BR><br /> <LI><INPUT TYPE="radio" Name="paymethod" VALUE="check">Check<BR><br /> <LI><I> Credit Card </I><br /> <UL><LI><INPUT TYPE="radio" Name="paymethod" VALUE="mastercard">mastercard<BR><br /> <LI><INPUT TYPE="radio" Name="paymethod" VALUE="visa">Visa<BR><br /> <LI><INPUT TYPE="radio" Name="paymethod" VALUE="amer">American Express<BR><br /> </UL></OL><INPUT TYPE="submit" VALUE="Submit Query"> </FORM></BODY></HTML><br /> Copyright © Ellis Horowitz 1999-2022 CGI 20</p> <p> Browser Output of Radio Buttons<br /> Copyright © Ellis Horowitz 1999-2022 CGI 21</p> <p> Query Results for Radio Buttons Example<br /> Copyright © Ellis Horowitz 1999-2022 CGI 22</p> <p> <TEXTAREA> Tag<br /> • specifies a large rectangular text-entry object with multi-line input and scroll bars<br /> • Attributes:<br /> NAME=name specifies a name for the data entry<br /> object to be sent to the server-side script<br /> – Width (in characters) of a text-entry<br /> region on the screen<br /> – If user types more than COLS characters,<br /> field is scrolled<br /> – Height (in characters) of a text-entry<br /> region on the screen<br /> – If user types more than ROWS lines, field<br /> is scrolled<br /> Copyright © Ellis Horowitz 1999-2022 CGI 23</p> <p> Example of Multiline Input Areas<br /> <HTML><HEAD><TITLE>Form Example with Multiple<br /> Multiline Inputs</TITLE></HEAD> <body></p> <form method="POST" action="/cgi-bin/postquery"> <TEXTAREA NAME="largearea" ROWS=10 COLS=30>This is<br /> 10 x 30

Here is a 10 x 30 text area.

This is 2<br /> x 20

Here is a 2 x 20 text area.

This is 1<br /> x 40

Here is a 1 x 40 area

To submit your comments, press this button:



Copyright © Ellis Horowitz 1999-2022 CGI 24

Browser Output of Multiline Input Areas
Initial Screen
Copyright © Ellis Horowitz 1999-2022 CGI 25

Query Results of Textarea Example
Copyright © Ellis Horowitz 1999-2022 CGI 26

Tag
• Used inside the

element to specify a selection list object (a list of items or a pop-down menu that the user can select from)
• Attributes: – NAME=name
• Specifies a name for the data entry object to be passed to the server-side script
– SIZE=num
• Number of lines of the list to display at a time
• If SIZE is 1 or unspecified, browser will display as a drop-down list box
• If SIZE is greater than 1, browser will display as a scrollable list with only SIZE options visible at a time
Copyright © Ellis Horowitz 1999-2022 CGI 27

Tag Attributes
– MULTIPLE
• Specifies that multiple list items may be selected (whereas normally only 1 item can be selected)
• All selected values are sent to server-side script as separate name/value pairs
– HTML5 adds more attributes:
• AUTOFOCUS: drop-down list should
automatically get focus
• FORM: defines one of more forms the select fields belongs to
• REQUIRED: user is required to select a value before submitting the form
Copyright © Ellis Horowitz 1999-2022 CGI 28

Tag
• Used inside the tag to specify the start of a new menu item in the selection list
• Syntax as follows: Text
• Attributes: – SELECTED
• Menu item is pre-selected in the list – VALUE=”text”
• Text specifies the value to be sent to the script if the option is selected
• By default, the text following the OPTION element is sent
– DISABLED
• Specifies a “grayed”, non-selectable item
• HTML5 adds the REQUIRED attribute
Copyright © Ellis Horowitz 1999-2022 CGI 29

Example of

, Tags

Which School would you like to apply to?

Letters&Science Engineering Business
Law Medicine
What semester do you wish to start?


Fall Spring Summer

To submit your choices, press this button: .

To reset the form, press this button: .

Copyright © Ellis Horowitz 1999-2022 CGI 30

Browser Output of , Example
Copyright © Ellis Horowitz 1999-2022 CGI 31

Query Results for

Example
Copyright © Ellis Horowitz 1999-2022 CGI 32

FIELDSET – Form Control Group
• The FIELDSET element defines a form control group.
– By grouping related form controls, authors can divide a form into smaller, more manageable parts, improving the usability problem that can strike when confronting users with too many form controls.
– The grouping provided by FIELDSET also helps the accessibility of forms to those using aural browsers by allowing these users to more easily orient themselves when filling in a large form.
• The content of a FIELDSET element must begin with a LEGEND to provide a caption for the group of controls. Following the LEGEND, FIELDSET may contain any HTML element, including another FIELDSET.
Copyright © Ellis Horowitz 1999-2022 CGI 33

Browser Output
3 Fieldsets Grouping form elements
Run through Tab order:
Mailing Address HTML 3.2 HTML 4.0
To test ACCESSKEY in Chrome use ALT + ACCESSKEY (I, O, C)
To test ACCESSKEY in Firefox use
ALT + SHIFT + ACCESSKEY
http://csci571.com/examples/html5/fieldsettest.html
Copyright © Ellis Horowitz 1999-2022 CGI 34

Fieldset Example (see next slide)

Purpose of the CGI
• Common Gateway Interface (CGI) is a mechanism by which programs, called scripts, can be used to create dynamic Web documents
– Scripts are placed in a server directory
often named cgi-bin
– Scripts can deliver information that is not
directly readable by clients
– Scripts dynamically convert data from a non-
Web source (e.g., DBMS) into a Web-compatible
• Current version of CGI is 1.1
• The reason for the term “common gateway” is these programs act as gateways between the WWW and any other type of data or service
• See http://www.w3.org/CGI/
Copyright © Ellis Horowitz 1999-2022 CGI 36

Basic Operation
• An executable program that can be run without being directly invoked by users
The browser issues a query, (a), which is sent to the server; the server interprets it and invokes the proper CGI script, passing it the input data, (b); output from the script is returned, (c), via the server, to the browser, (d); output may be HTML, but it may instead be a URL, which is fetched by the server
Copyright © Ellis Horowitz 1999-2022 CGI 37

Languages to Write Gateway Programs
• Any language that can produce an executable file • Some typical ones are:
– Traditional compiled languages such as C/C++ – Or interpreted languages such as:
• PHP, JavaScript, Python or Java
• Interpreted languages are often preferred as they are
– Easy to write and portable, and speed is usually not a factor
http://w3techs.com/technologies/overview/programming_language/all
Copyright © Ellis Horowitz 1999-2022 CGI 38

Anchors Are Used to Invoke CGI Scripts
• A hypertext reference can refer to:
– A remote file

– An executable script in the cgi-bin directory

– An executable script with arguments

• URLs produced by the query “bicycle tours”:
http://search.yahoo.com/bin/search?p=bicycle+tours
http://search.msn.com/results.asp?RS=CHECKED&FORM=M
SNH&v=1&q=bicycle+tours&zip=90211
Copyright © Ellis Horowitz 1999-2022 CGI 39

程序代写 CS代考 加微信: powcoder QQ: 1823890830 Email: powcoder@163.com