Download presentation
Presentation is loading. Please wait.
1
Form Design & Validation
Lesson 4 Form Design & Validation
2
Outlines Form Design Validation
3
Form Design The HTML <form> element defines a form that is used to collect user input: <form> . form elements . </form>
4
Form Design The <input> Element 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=“chekbox"> <input type="checkbox"> defines a checkbox <input type="submit"> Defines a submit button (for submitting the form)
5
Form Design Example 4.1 (Text Input) <html> <body>
<h2>Text Input</h2> <form> First name:<br> <input type="text" name="firstname"> <br> Last name:<br> <input type="text" name="lastname"> </form> <p>Note that the form itself is not visible.</p> <p>Also note that the default width of a text input field is 20 characters.</p> </body> </html>
6
Form Design Example 4.2 (Radio Button Input) <html> <body>
<h2>Radio Buttons</h2> <form> <input type="radio" name="gender" value="male" checked> Male<br> <input type="radio" name="gender" value="female"> Female<br> <input type="radio" name="gender" value="other"> Other </form> </body> </html>
7
Form Design Example 4.3 (Checkbox Input)
<h2>Checkboxes</h2> <p>The <strong>input type="checkbox"</strong> defines a checkbox:</p> <form action="/action_page.php"> <input type="checkbox" name="vehicle1" value="Bike">I have a bike <br> <input type="checkbox" name="vehicle2" value="Car">I have a car <br><br> <input type="submit"> </form>
8
Form Design Example 4.4 (Submit Button)
<h2>HTML Forms</h2> <form action="/action_page.php"> First name:<br> <input type="text" name="firstname" value="Mickey"> <br> Last name:<br> <input type="text" name="lastname" value="Mouse"> <br><br> <input type="submit" value="Submit"> </form>
9
Form Design The <select> element
The <select> element defines a drop-down list:
10
Form Design Example 4.5: (Select Element)
<h2>The select Element</h2> <p>The select element defines a drop-down list:</p> <form action="/action_page.php"> <select name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select> <br><br> <input type="submit"> </form>
11
Form Design The <textarea> element
The <textarea> element defines a multi-line input field (a text area):
12
Form Design Example 4.6: (Textarea Element)
<h2>Textarea</h2> <p>The textarea element defines a multi-line input field.</p> <form action="/action_page.php"> <textarea name="message" rows="10" cols="30">The cat was playing in the garden.</textarea> <br> <input type="submit"> </form>
13
Form Handling The PHP superglobals $_GET and $_POST are used to collect form-data.
14
Form Handling Example 4.7 Fig, 4.1. HTML Code
<html> <body> <form action="welcome.php" method="post"> Name: <input type="text" name="name"><br> <input type="text" name=" "><br> <input type="submit"> </form> </body> </html> Fig, 4.1. HTML Code
15
Form Handling Fig, 4.2. PHP Code <html> <body>
Welcome <?php echo $_POST["name"]; ?><br> Your address is: <?php echo $_POST[" "]; ?> </body> </html> Fig, 4.2. PHP Code
16
Form Handling Fig, 4.3. Output Welcome John
Your address is Fig, 4.3. Output
17
Form Handling Example 4.8 Fig, 4.4. HTML Code <html>
<body> <form action="welcome_get.php" method="get"> Name: <input type="text" name="name"><br> <input type="text" name=" "><br> <input type="submit"> </form> </body> </html> Fig, 4.4. HTML Code
18
Form Handling Fig, 4.5. PHP Code <html> <body>
Welcome <?php echo $_GET["name"]; ?><br> Your address is: <?php echo $_GET[" "]; ?> </body> </html> Fig, 4.5. PHP Code
19
Form Handling Fig, 4.6. Output Welcome John
Your address is Fig, 4.6. Output
20
Form Validation (Jquery Validation)
This jQuery plugin makes simple clientside form validation easy, whilst still offering plenty of customization options Contact form comes on first priority for any organisation as this may led to establish one to one communication with their customers
21
Form Validation (Jquery Validation)
Example 4.9. (Validation using JQuery) Refer url:
Similar presentations
![BBK P1 Module2010/11 : [‹#›] Forms (Getting data from users)](/25/7864092/big_thumb.jpg "BBK P1 Module2010/11 : [‹#›] Forms (Getting data from users)>")
