Forms Web Design Ms. Olifer

More Interactive web-pages So far what we have seen was to present the information. (Ex: tables. Lists,….). But it is not enough. We want to design web-pages that are more interactive. Pages that get the data from user (input). Process data. Return the result (output). A two way communication.

Forms Form is an area in your web-page which can contain form elements. This area is specified by <FORM></FORM> tags. Form-elements are elements that allow the web-page to get data from user by providing graphical interfaces to the users to enter their data .

Form-Elements Text Field Text Area Check box Radio buttons Buttons (Reset, submit,…) Dropdown boxes And more ... Example

<Form></Form> Any standard HTML element (except another <form>) can be contained within <form> Attributes: NAME = “name” and ACTION =“url” NAME: Name the form (For tasks related to user input data processing ) ACTION: The URL of the program that will process the data when the form is submitted .

Form-Elements <INPUT></INPUT> : Specifies the type of graphical interface to get the data from user. Attributes: TYPE: text radio checkbox button reset submit Password NAME: names this element.

Text Field A single line field which is used when you want the user to type letters, numbers, etc. in a form. Example: <input type = "text" name = "firstname"> NAME: Name given to this form element SIZE: The number of characters allowed in this text field. If you do not include this attribute, the text length will be 20 by default.

Event Handlers Form elements are made to interact with scripts (small programs within the page for processing data). This interactions are done by means of Event Handlers. Event Handlers are attributes of form elements which their values determine what sort of actions to take in case an event occurred.

Examples of Events Submitting a form Clicking a mouse Passing a mouse over a link Loading a page Selecting an item or a button. Clicking a button, link ,… Changing the value of a text field or text area

CheckBox User chooses a sub-set of a number of options using a checkbox. <input type="checkbox" name=“Name" value=“Val“> Example: bike: <input type="checkbox" name="vehicle value="Bike"> <br> car: <input type="checkbox" name="vehicle" value="Car"> <br> airplane: <input type="checkbox" name="vehicle" value="Airplane“>

Radio Button Radio Button is for the case when we want the user to choose exactly one of the options. <input type=“radio" name=“Name" value=“Val“> Example: <input type="radio" name=“degree" value=“undergrad"> Under Graduate <br> <input type="radio" name=“degree" value=“grad"> graduate Note that if you want to make sure that only one of radio buttons can be selected you need to relate the radio buttons by having the same name for all of them.

Dropdown Menu <select name=“name"> <option value=“op1"> Option1 </option> <option value=“op2"> Option2 </option> <option value="op3"> Option3 </option> <option value=“op4"> Option4 </option> </select>

Text Area A user can write un-limited text in the text-area. <textarea rows=“10" cols="20"></textarea> rows: The number of rows for the text area. cols: The number of columns for the text area. ONSELECT and ONCHANGE are two possible event handler attributes for a text area. Add a textarea to your html.

Buttons A general button: <input type="button" value="Push“> ONCLICK is an event handler for button. A submit button will send the data collected by the form for processing. <input type="submit" value="Submit"> ONSUBMIT is an event handler for submit button. A reset button resets the form. <input type="reset" value="Reset">