Rationale This material bridges the HTML and CSS and Using JavaScript lectures As it turns out, HTML forms are almost always supported by JavaScript---the two go together! For example, JavaScript is often used for client-side validation of data entered into HTML forms Fall 2004
CS 314
HTML Forms HTML forms permit the user to interact with your web application Usability principles must be observed Once completed the form is submitted to the server (usually via a POST request) Once submitted, the form data is usually processed by a server-side script We will build many forms in this course
Fall 2004
CS 314
1
Example Here is a simple login form: Username: Password:
This form submits a POST request
Fall 2004
CS 314
Example continued
When the “Login” button (a submit button) is pressed, a POST request is sent to the resource specified in the action attribute of the tag
Fall 2004
CS 314
HTML FORM Element The FORM element is a block-level element: The FORM element supports numerous attributes The only required attribute is action Fall 2004
CS 314
2
Form Elements BUTTON PASSWORD SELECTONE
CHECKBOX RADIO SELECTMULTIPLE
HIDDEN RESET TEXT
FILE SUBMIT TEXTAREA
HTML 4 supports 12 different types of form elements All (but SELECT and TEXTAREA) are created with the tag Also, there is a separate BUTTON element
Fall 2004
CS 314
HTML Textarea A textarea is very similar to a text field A primary difference is that the user can press the return key in a textarea The element requires a closing tag: Note that the rows and cols attributes are required: Fall 2004
CS 314
Buttons There are at least three types of buttons, each created with an INPUT element: Pressing the submit button submits the form (i.e., sends a request to the server) Pressing a reset button clears the form
Fall 2004
CS 314
3
Buttons contd A button type is an ordinary button Pressing a button button does nothing Add functionality to a button by adding an onclick event handler: The value of the onclick handler is some JavaScript code that executes when the button is pressed
Fall 2004
CS 314
Hidden Elements Hidden elements are used to send additional data to the server: The values of hidden elements may be dynamically set by scripts
Fall 2004
CS 314
HTML Select Element A SELECT element is most complicated: Sunday Monday Tuesday Wednesday Thursday Friday Saturday The above is called a drop-down menu
Fall 2004
CS 314
4
Scrollable Lists Scrollable lists are created with a SELECT element Scrollable lists may be single-valued or multi-valued A checkbox group is functionally equivalent to a multi-valued list A radio button group is functionally equivalent to a drop-down menu
Fall 2004
CS 314
Monster Form A “monster form” with each form element represented is available: http://voyager.cs.bgsu.edu/gzimmer/cs314/exa mples/monsterForm.html
This form lets you experiment with various form elements It even lets you choose a script to process the form!
Fall 2004
CS 314
Text fields The username element in the previous example is called a text field: The initial value of this form element is given by a value attribute; otherwise the value is that typed by the user Use a size attribute to override the default size of the text field (which is font dependent)
Fall 2004
CS 314
5
HTML Input Element The INPUT element is an inline element: There are a large number of supported attributes, the most important being type: Possible values of type are text (default), password, checkbox, radio, submit, reset, file, hidden, image, and button
Fall 2004
CS 314
Successful Control A successful control is a form element whose value is sent to the server when the form is submitted Only named form elements may be successful A form element with no value (e.g., a SELECT element with no option selected) is not sent to the server Press a submit button to submit a form
Fall 2004
CS 314
A Complete Example JavaScript with Forms function compute() { if ( window.confirm("Compute now?") ) myForm.result.value = eval(myForm.expr.value); } Enter expression: Result:
Fall 2004
CS 314
6
Example cont’d
confirm is a method of the Window object eval is a built-in JavaScript function (in NN2) onclick is a JavaScript event handler Note the variable names (myForm, expr, result) referred to in the script
Fall 2004
CS 314
Script Libraries
Fall 2004
CS 314
BGSU Scripts BGSU Scripts is a JavaScript library on the campus web server: http://www.bgsu.edu/scripts/ Here you will find general-purpose JavaScript scripts for web developers One script of interest is checkForm.js: http://www.bgsu.edu/scripts/#checkForm
Fall 2004
CS 314
7
Checkform.js Incorporate checkForm.js as follows:
