Form Design & Validation Lesson 4 Form Design & Validation
Outlines Form Design Validation
Form Design The HTML <form> element defines a form that is used to collect user input: <form> . form elements . </form>
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)
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>
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>
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>
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>
Form Design The <select> element The <select> element defines a drop-down list:
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>
Form Design The <textarea> element The <textarea> element defines a multi-line input field (a text area):
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>
Form Handling The PHP superglobals $_GET and $_POST are used to collect form-data.
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> E-mail: <input type="text" name="email"><br> <input type="submit"> </form> </body> </html> Fig, 4.1. HTML Code
Form Handling Fig, 4.2. PHP Code <html> <body> Welcome <?php echo $_POST["name"]; ?><br> Your email address is: <?php echo $_POST["email"]; ?> </body> </html> Fig, 4.2. PHP Code
Form Handling Fig, 4.3. Output Welcome John Your email address is john.doe@example.com Fig, 4.3. Output
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> E-mail: <input type="text" name="email"><br> <input type="submit"> </form> </body> </html> Fig, 4.4. HTML Code
Form Handling Fig, 4.5. PHP Code <html> <body> Welcome <?php echo $_GET["name"]; ?><br> Your email address is: <?php echo $_GET["email"]; ?> </body> </html> Fig, 4.5. PHP Code
Form Handling Fig, 4.6. Output Welcome John Your email address is john.doe@example.com Fig, 4.6. Output
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
Form Validation (Jquery Validation) Example 4.9. (Validation using JQuery) Refer url: https://www.formget.com/jquery-contact-form/