CHAPTER 6: CREATING A WEB FORM CREATED BY L. ASMA RIKLI (ADAPTED FROM HTML, CSS, AND DYNAMIC HTML BY CAREY)

Size: px

Start display at page:

Download "CHAPTER 6: CREATING A WEB FORM CREATED BY L. ASMA RIKLI (ADAPTED FROM HTML, CSS, AND DYNAMIC HTML BY CAREY)"

Melissa Maxwell
6 years ago
Views:

1 CHAPTER 6: CREATING A WEB FORM

2 INTERACTION BETWEEN A WEB FORM AND A WEB SERVER Without a form, a website is read-only. It only provides information.

3 EXAMPLES OF FORMS USAGE Performing searches Posting comments Asking for additional information Placing orders for goods and services

4 EXAMPLES OF COMPONENTS OF A WEB FORM Input Box: Text and numerical entries Text Area: Several lines of text Option Buttons (radio buttons): Single option from a predefined list Check Boxes: Selecting options from a predefined list. Selection List Color Picker Calendar Picker Spin Boxes Sliders Not Supported by all browsers

5 Text Input Calendar Picker Option (Radio) Buttons Spin boxes Color Picker Password Selection List Checkboxes Slider File Upload Text Area Button Reset Submit

6 CREATING AN INTERACTIVE WEB FORM Create a form + attributes Create Field sets + add legends Create Controls + add labels

7 CREATING AN INTERACTIVE WEB FORM 1 <form attributes> content </form> Forms contain form elements and other elements. Forms can be created anywhere in the body. A single page can contain many forms. id= registrationfrom name= registrationform What makes the form interactive <form id= registrationfrom name= registrationform > content </form> url: filename and location of the program that processes the form. Method: post / get. action= registrationscript.js method= post <form action= registrationscript.js method= post > content </form> <form id= id name= name action="url" method="post/get"> content </form>

8 CREATING A FIELD SET 2 A way to organize a form through grouping similar fields into a field set. <form id= id name= name action="url" method="post/get"> <fieldset id="id"> </fieldset> </form> You can add a legend to the field set. <form id= id name= name action="url" method="post/get"> <fieldset id="id"> <legend> Text </legend> </fieldset> </form>

9 CREATING INPUT (CONTROL) ELEMENTS 3 A. Basic Inputs input is an empty tag. input is a text-level inline element. type: type of input control. name: is required to retrieve the value associated with the input field by the server program. value: default value of the control. <input id= id name= name type= type value= value /> Type button submit reset checkbox radio text Description A button that can be clicked to preform an action. A button that submits the form. A button that resets the form. An input box that displays text entered by the user. All radio buttons related to one field share the same name password An input box that hides text entered by the user.

10 ADDING FIELD LABELS <label for= id > label text </label> The control is usually contained within the label. for: id of the control element associated with the label. Benefit of for: clicking on the label positions the cursor at the control element. <label for="id"> label text <input id="id" name="name" type="type" value="value"/> </label>

11 COMPLETE EXAMPLE <html> <head></head> <body> <form id="lecture3form" name="lecture3form" action="lecture3.js" method="post"> <fieldset id="personal"> <legend> Personal </legend> <label for="sname"> Name: <input id="sname" name="sname" type="text"/> </label> <br/><br/> <label> Status:</label> <label> <input id="status" name="status" type="radio" value="single"/> Single </label> <label> <input id="status" name="status" type="radio" value="married"/> Married </label> <label> <input id="status" name="status" type="radio" value="widowed"/> Widowed </label> <label> <input id="status" name="status" type="radio" value="divorced"/> Divorced </label> <br/><br/> <label for="spassword"> Password: <input id="spassword" name="spassword" type="password"/> </label> </fieldset> <fieldset id="professional"> <legend> Professional </legend> <label> Skills: </label> <input id="programming" name="programming" type="checkbox" value="programming"/> Programming <input id="technicalwriting" name="technicalwriting" type="checkbox" value="technicalwriting"/> Technical Writing <input id="systemanalysis" name="systemanalysis" type="checkbox" value="systemanalysis"/> System Analysis </fieldset> <input id="drawbutton" name="drawbutton" type="button" value="draw A Line"/> <input id="resetbutton" name="resetbutton" type="reset" value="reset Form"/> <input id="sumbitbutton" name="submitbutton" type="submit" value="submit Form"/> </form> </body> </html>

12 COMPLETE EXAMPLE

HTML Forms. By Jaroslav Mohapl

HTML Forms. By Jaroslav Mohapl HTML Forms By Jaroslav Mohapl Abstract How to write an HTML form, create control buttons, a text input and a text area. How to input data from a list of items, a drop down list, and a list box. Simply