Chapter 3 DESIGN FORM AND JAVASCRIPT Design form

Chapter 3 DESIGN FORM AND JAVASCRIPT

Design form q The HTML <form> element defines a form that is used to colllect user input <form> : : </form> Fig. 1: Form structure

The <input> Element q The <input> element can displayed in several ways, depending on the type of attribute Type Description <input type=“text”> Defines a one-line text input field <input type=“radio”> Defines a radio button (for selecting one of many choices) <input type=“submit”> Defines a submit button (for submitting the form)

#Example 1: Text Field <form> First name: <input type="text" name="firstname"> Last name: <input type="text" name="lastname"> </form> HTML Code First Name: Last Name: Output

#Example 2: Radio Button <form> <input type="radio" name="gender" value="male" checked> Male <input type="radio" name="gender" value="female"> Female <input type="radio" name="gender" value="other"> Other </form> HTML Code Male Female Other Output

#Example 3: Select <select name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select> HTML Code

#Example 4: Text Area <textarea name="message" rows="10" cols="30"> The cat was playing in the garden. </textarea> HTML Code

#Example 5: Checkbox <input type="checkbox" name="vehicle" value="Bike"> I have a bike <input type="checkbox" name="vehicle" value="Car“ checked="checked"> I have a car <input type="submit" value="Submit"> HTML Code I have a bike I have a car Output

Java. Script q Java. Script is the programming language of HTML and the web q Javascript is easy to learn

#Example 1: Validation Text Field <form name=“form 1” onsubmit=“validate(); ”> First name: <input type="text" name="firstname"> Last name: <input type="text" name="lastname"> </form> HTML Code

#Example 1: Validation Text Field <javascript> function validate() { var msg = “”; var err; if (document. form 1. firstname. value=="") { msg = msg + "n. First Name"; } if (document. form 1. lastname. value=="") { msg = msg + "n. Last Name"; } if (msg==err) { return true; } else { alert(msg); event. return. Value=false; } } </javascript> Javascript Code

#Example 2: Validation Radio Button <form> <input type="radio" name="gender" value="male" checked> Male <input type="radio" name="gender" value="female"> Female <input type="radio" name="gender" value="other"> Other </form> HTML Code