How to Create Your Own Website

1. Lecture 5: Forms. How to Create Your Own Website

2. Today’s Lecture: • Allowing users to submit information. • Forms. • HTTP: GET vs. POST. • Form processing: invoking server-side scripts.

3. Dilemma • We’ve learned how to present a wide variety of content to users. • We have not yet learned how users can contribute content back. • Users may wish to comment on a page or product, send feedback, sign up for an account, or search your website. • Ideally, communication flows both ways.

4. Illustrated We know how to design most of this page, but not the textbox or buttons. (And where do they go once they’re submitted anyway?)

5. Available Form Fields • These interactive components are known as form fields, contained within forms. • One-line textboxes. • Password textboxes (showing *s in place of characters). • Dropdown lists (a list of choices, only one shown at a time unless you expand it). • Lists (multiple items to select, many displayed at once). • Buttons (or images that serve as buttons). • Submit buttons. • Reset buttons. • Other buttons. • Checkboxes. • Option buttons. • Multi-line textboxes. • File uploads. • Hidden form fields (information sent with the form but not seen). • All of these elements are possible to create in HTML. • They can also be styled with CSS. • Often it is possible to create more complex form inputs by combining styled simple elements.

6. <Form> • All form fields must go between opening and closing <form> tags. • This tag defines the action taken when the form is submitted. • Multiple forms on a single page are allowed. • It has two important attributes: • method, which is one of “GET” or “POST”, defining the HTTP command used to submit the form. • action, which is an address to submit the form data to. Often this points to a server-side PHP or Perl script.

7. HTTP GET • The methods GET and POST correspond to HTTP (hypertext transfer protocol) commands. • “GET” is the normal method used to retrieve pages (from links, or by typing in the URL). • When you fetch index.html in your browser, the browser connects to the server and sends the following command: • GET index.html HTTP/1.0 • The server then returns the HTML code of the page index.html. • Some pages (mainly server-side scripts) also make use of variables passed to them: • For example, http://tech.slashdot.org/article.pl?sid=09/05/03/154231 and http://ask.slashdot.org/article.pl?sid=09/05/03/1318242 both point to the same file on the server (article.pl). • However, they lead to different articles because the “sid” parameters are different. • This is an example of passing variables by a GET request, and it is how your form data will be sent if method=“GET”. • You can also link to pages with parameters by adding data to the URL as follows: • Variables are given in the form var=value (no quotes). • The first one is preceded by a “?”, to let the browser know that the rest are parameters to the page and not part of its filename. • Each subsequent variable is separated from earlier ones with a “&”. • For example, http://www.mysite.com/page.cgi?var1=value1&var2=value2&var3=value3 • Note that GET variables appear as part of the URL in the address bar.

8. HTTP POST • POST is a request used to send large blocks of content back to a server. • The variables are not part of the URL in a POST request; they are part of the HTTP headers sent after the URL. • As such, they are not shown in the address bar. • A typical POST request looks like: POST /cgi-bin/script.cgi HTTP/1.0 Host: mysite.com var1=val1&var2=val2&var3=val3 • This method is not used with links or manually-typed addresses; it’s reserved for forms. • There’s an important reason for that…

9. When to use GET vs. POST. • GET requests are meant to be used for retrieving content, not modifying it. • These requests should be safe, meaning that they do not modify resources on the server. • Failing that, they should at least be idempotent, meaning that the effects of many identical calls are the same as the effects of one such call. • For example, a counter would not be idempotent; it would increment each time a user refreshed it. • If it logged IP addresses and only incremented on the first load by each IP address (assuming IP is a parameter passed to it), it would then be idempotent. • Applications of GET requests include submitting search queries, fetching specific articles or other content, and navigating to forums. • These requests do not change anything on the server; they’re “safe”. • Since subsequent calls to the same resource won’t affect the output, the browser can cache the results to display them quicker the next time the page is loaded. • POST requests are used to modify content. • Examples: • Deleting a forum post. • Submitting contact information (sending an email is a modification). • Charging a credit card. • Changing the text of a wiki or blog. • The effects of a POST are lasting, perhaps permanent. • Because they produce changes, the browser will not cache them. • If you try to refresh a POSTed page, browsers will warn you that doing so will resubmit the information and may cause the action to repeat (e.g. double charges to a credit card). • Search engines will index pages they can get to via GET requests; none will follow POST requests. • Therefore, if you use GET for modification, search engines may alter your content when they index.

10. Where does it connect? • HTML alone is not enough to make functioning forms. • The frontend of the form is designed in HTML. • But there is no way to process the submitted data in HTML. • This data is processed using scripts: small programs running on the server. • These scripts are written in languages such as Perl, PHP, Ruby, or ASP. • Learning these languages is too advanced for this course. • The variables submitted from the web form are passed into the script specified by the “action” attribute. • Although we won’t discuss writing your own scripts, we’ll demonstrate how to use others’ CGI scripts today.

11. Form Fields • Textboxes, checkboxes, buttons, password boxes, option buttons, file uploads, and hidden form fields are all created using the <input> tag. • They are differentiated using the “type” attribute, which has the following values: • text: A normal textbox. • password: A masked password input box. • checkbox: A checkbox (multiple boxes can be checked). • radio: Option button (selecting one deselects the others). • submit: A button that submits the form (sends its contents to its “action” URL) when clicked. • reset: A button that clears the form values when clicked. • button: A button that does not do anything by default (but can be scripted to do something when clicked using Javascript). • image: An image that acts as a submit button. • hidden: A hidden form field. Submitted to the processing script, but not shown directly to the user. The user can still see it in “view source”. • file: A file upload box. • Since these correspond to variables sent to the script, they also need names. These names are specified using the “name” attribute of each input tag, and can be any combination of alphanumeric characters. • Input fields can also be assigned default values using the “value” attribute. In some fields, e.g. text fields, the user can and usually does change the defaults. Other fields, such as submit buttons, are immutable and have values set solely for the purpose of displaying a certain caption to the user.

12. Example Form • This form will query Google when submitted. • Note that the language (value=“en”) is stored in a hidden field (name=“hl”) and is not seen by the user. • Google is using it; try setting it to another value (say “fr”) and see what happens. • <form method="GET" action="http://www.google.com/search"> • Query: <input type="text" name="q" value="Type your search term here." /> • <input type="hidden" name="hl" value="en" /> • <input type="submit" value="Google It" /> • <input type="reset" value="Start Over" /> • </form>

13. Example

14. Single-line text and password boxes • type=“text” or type=“password”. • Allow the user to type in one-line of text. • Used for storing information such as name, address, email, phone number, credit card number, username, password, etc. • The password box displays “*”s instead of characters (but the text is still sent to the server unencrypted). • A width may be specified in number of characters using the “size” attribute, but you should prefer setting it in CSS using width: (use 5em for space to hold 5 characters). • A maximum length in characters may be specified using the maxlength attribute. There is no analogue in CSS. • For example, <input type=“text” name=“year” maxlength=“4” /> • If the user hits enter in a single line text box, the default behavior is to automatically submit the form.

15. Buttons (Submit, Reset, Others) • type=“submit”, “reset”, or “button”. • All three appear the same, but have different behaviors. • Submit buttons submit the form when clicked. • Reset buttons clear all fields on a form to their default values when clicked. • Other buttons do nothing by default. • One form may have more than one submit button (e.g. Google’s “I’m Feeling Lucky”). • In this case, the button that is clicked will have its name and value sent to the server; the other buttons won’t. • The value of a button is the text shown within it. It is not usually useful on the server. • The name is generally not required either unless more than one submit button exists on a form.

16. Option Buttons and Checkboxes • type=“radio” or “checkbox” • Option (“radio”) buttons and checkboxes allow one or more selections to be made from a small list of choices. • Checkboxes allow any number of options to be checked. • However, only one option button in a group may be selected. When a new option is selected, the others will be cleared. • All option buttons in a group have the same name but different values; only the selected button will send its value to the server. • E.g. <input type=“radio” name=“opt1” value=“1” /> <input type=“radio” name=“opt1” value=“2” /> • If the second option button is selected, the value of “opt1” will be “2”. • You may specify which button is (or checkboxes are) to be selected by default when the page loads by giving the relevant <input> tag(s) the attribute selected=“selected”. • Checkboxes only send their values if they are checked.

17. Hidden Fields • type=“hidden” • Hidden fields are not shown to the user and thus cannot be edited by the user. • They are used to send static data that you, the developer, choose to send. • For example, the language sent to Google was fixed at “en” (English). • Their names and values are arbitrary; both the name and the value will be sent to the server.

18. CSS Styling Form Fields • The most commonly used rules on form fields are likely: • height: Sets the height of the field. • width: Sets the width of the field. • font: Sets font properties. • color: Sets the text color. • There is nothing particularly special about form fields as CSS is concerned. • Most of them can be styled just like anything else.

19. Other Fields • A few fields are not created using the <input> tag, but have their own tags: • Dropdown lists. • Simple lists. • Multi-line text boxes. • Dropdown and simple lists are created using the <select> tag. Between this tag and the closing </select> tag are <option> tags for each choice in the list. • The name belongs to the <select> tag, but the values belong to the <option> tags. • Only the selected option’s value is sent. • For example, • <select name=“timezone”> • <option value=“-5”>Eastern</option> • <option value=“-6”>Central</option> • <option value=“-7”>Mountain</option> • <option value=“-8”>Pacific</option> • </select> • <select> also takes a size attribute. If set to “1”, the list will be a dropdown. If set greater than 1, it will be a simple list (with the height to accommodate that number of options). • Multiline text boxes are specified with the <textarea> tag. • These can be used to input very long strings of text. • The dimensions can be controlled with CSS height and width, or the “rows” and “cols” attributes (rows in # of lines, cols in # characters). • The name attribute acts as it does in a single line text input box. • However, the value attribute does not. To set the default text shown in the textarea, insert it between the <textarea> and </textarea> tags: • <textarea name=“LongText”> • This is the default content of the textbox. • It can span multiple lines and can potentially be very long. • </textarea>

20. Labels • The <label> tag associates a block of text with a form field. • When clicked, a label will highlight its corresponding form field for input. • The user can then type into it if it’s a text field. • There are two ways to use labels: • Wrap it around a form field; e.g. <label>Query: <input type=“text” name=“q” /></label> • Give the form field an ID and point the label to it using the “for” attribute with that ID; e.g. <label for=“q”>Query:</label> <input type=“text” name=“q” id=“q” />

21. Form Example – A Script • I’ve created a Perl script at http://resources.polymathlectures.org/IT150/formdata.cgi that will print out the information you submit from a form. • (You can find the source code for the script at formdata.txt in the same path if interested). • Similar scripts exist on the Internet; you need not write your own for many common tasks. • We’ll now see how to write a form that uses all of these field types (except file uploads, which require a script specifically written to accept them).

22. Form Example

23. Next Time • Making pages dynamic. • Rollovers. • Popups. • Dropdown menus. • Including Javascripts (client-side scripting) in your pages and some of the dangers.

24. A Nonprofit Organization of New Jersey, USA http://www.projectpolymath.org