1 / 26

Unit 4

Unit 4. Working with data. Form Element. HTML forms are used to pass data to a server. A form can contain input elements like text fields, checkboxes, radio-buttons, submit buttons and more. A form can also contain select lists, text area, field set and label elements.

burrism
Télécharger la présentation

Unit 4

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Unit 4 Working with data

  2. Form Element • HTML forms are used to pass data to a server. • A form can contain input elements like text fields, checkboxes, radio-buttons, submit buttons and more. • A form can also contain select lists, text area, field set and label elements. • The <form> tag is used to create an HTML form:

  3. <form>.input elements.</form>

  4. Input Element • The most important form element is the input element. • The input element is used to select user information. • An input element can be different in many ways, depending on the type attribute. • An input element can be of type text field, checkbox, password, radio button, submit button, and more. • The most used input types are described below.

  5. 1. Text Fields <input type="text" /> • defines a one-line input field that a user can enter text into: • <form>First name: <input type="text" name="firstname" /><br />Last name: <input type="text" name="lastname" /></form> • Note: The form itself is not visible. Also note that the default width of a text field is 20 characters. 

  6. 2. Password Field • <input type="password" /> • defines a password field: E.X:- <form>Password: <input type="password" name="pwd" /></form> • Note: The characters in a password field are masked (shown as asterisks or circles). 

  7. 3. Radio Buttons • <input type="radio" /> • defines a radio button. Radio buttons let a user select ONLY ONE one of a limited number of choices: • <form><inputtype="radio“ name="sex" value="male"/>Male<br/><input type="radio“ name="sex" value="female"/>Female</form>

  8. 4. Checkboxes • <input type="checkbox" /> • defines a checkbox. Checkboxes let a user select ONE or MORE options of a limited number of choices. • <form><input type="checkbox" name="vehicle" value="Bike" /> I have a bike<br /><input type="checkbox" name="vehicle" value="Car" /> I have a car </form>

  9. 5. Submit Button • <input type="submit" /> defines a submit button. • A submit button is used to send form data to a server. • The data is sent to the page specified in the form's action attribute. The file defined in the action attribute usually does something with the received input: • <form name="input" action="html_form_action.php" method="get">Username: <input type="text" name="user" /><input type="submit" value="Submit" /></form>

  10. 6. Select (Pull Down menu) and Select multiple HTML form element • This type of HTML form element is used to allow user to select from multiple choices. • For example selecting a month or a day. The html syntax is as below.<select name=”year”><option value=”2004″>2004</option><option value=”2005″>2005</option><option value=”2006″>2006</option><option value=”2007″>2007</option><option value=”2008″>2008</option></select>

  11. 7. Image • <input type="image" /> defines an image as a submit button. • The src and alt attribute are required with <input type="image">. Example:- <input type="image" src="submit.gif" alt="Submit" />

  12. Passing variables between pages 1.Passing variable through a GET • $_GET Function:- The built-in $_GET function is used to collect values in a form with method="get". • Information sent from a form with the GET method is visible to everyone (it will be displayed in the browser's address bar) and has limits on the amount of information to send.

  13. Example • <form action="welcome.php" method="get">Name: <input type="text" name="fname" />Age: <input type="text" name="age" /><input type="submit" /></form> • When the user clicks the "Submit" button, the URL sent to the server could look something like this: • http://www.w3schools.com/welcome.php?fname=Peter&age=37

  14. <html> • <body> • Welcome <?php echo $_GET["fname"]; ?>!<br /> • You are <?php echo $_GET["age"]; ?> years old. • </body> • </html>

  15. The "welcome.php" file can now use the $_GET function to collect form data. • When using method="get" in HTML forms, all variable names and values are displayed in the URL • Note: 1. This method should not be used when sending passwords or other sensitive information! 2. The get method is not suitable for very large variable values. It should not be used with values exceeding 2000 characters.

  16. 2. Passing variable through a POST:- • The built-in $_POST function is used to collect values from a form sent with method="post". • Information sent from a form with the POST method is invisible to others and has no limits on the amount of information to send. • Note: However, there is an 8 Mb max size for the POST method, by default (can be changed by setting the post_max_size in the php.ini file).

  17. Example • <form action="welcome.php" method="post">Name: <input type="text" name="fname" />Age: <input type="text" name="age" /><input type="submit" /></form> • When the user clicks the "Submit" button, the URL will look like this: • http://www.w3schools.com/welcome.php

  18. The "welcome.php" file can now use the $_POST function to collect form data (the names of the form fields will automatically be the keys in the $_POST array): E.X:- Welcome <?php echo $_POST["fname"]; ?>!<br />You are <?php echo $_POST["age"]; ?> years old. • Information sent from a form with the POST method is invisible to others and has no limits on the amount of information to send.

  19. 3. Passing variable through a REQUEST:- • The PHP built-in $_REQUEST function contains the contents of both $_GET, $_POST, and $_COOKIE. • The $_REQUEST function can be used to collect form data sent with both the GET and POST methods.

  20. Example:- • <form action=”myphp.php” method=”POST”>Firstname: <input type=”text” name=”firstname” />Lastname: <input type=”text” name=”lastname” /><input type=”submit” /></form> • <?phpecho “Firstname: “ $_REQUEST[“firstname”]; . <br />;echo “Lastname: “ $_REQUEST[“lastname”];?>

  21. Validating the user input • "never trust user input" is the golden rule on the web. • There are several types of problem that’s why we need the validation on user input. • Problems like 1. Mistake on input. User types 1095 rather than 10.95 2. Bad input. User purposefully provides incorrect input in attempt to gain advantage 3. Dangerous input. User innocently enters information that would harm the system 4. Missing input. User provides no input.

  22. When validating input, we have two choices: • validate on the client side using a scripting language. • validate on the server side using PHP.

  23. 1. Client side Validationusing a scripting language • You can write scripting code that will verify form fields contain good data before being submitted to the server, and this is often used. • The advantages to using client-side validation are: • users receive feedback quicker • it saves load on the server - more work is done on the client side.

  24. The disadvantage to using client-side validation are: 1. client-side support for varies scripting languages, with some browsers supporting scripts very well, others supporting bits and pieces, and others supporting nothing at all. 2. Furthermore, clever users can disable your client-side checking in order to feed you bad data - if you only apply client-side checking, you are bound to get hacked eventually.

  25. Server side validate using PHP. • Server-side data validation means using PHP to verify that good values have been sent to the script. • Using server-side validation has pretty much the exact opposite of client-side development: • it is more secure and works with all browsers, but it is costly and slower feedback for users.

  26. One big advantage to server-side validation is that you can use PHP - a language by now you have attained some skill with. • As you know, PHP has a wide variety of functions and language features to help you cut and change strings, check numbers are within ranges, and so on. • Furthermore, you can use PHP to connect to a database to check whether a username exists, for example, which is simply impossible using client-side scripting.

More Related