UNIT 3

READING DATA IN WEB PAGES

PREPARED BY : MS. PREETI BHATT 1

UNIT COVERS

3.1. Setting Up Web Pages

3.2. FORM Element and INPUT Element
3.3. Redirecting Methods: Get post and request
3.4. Handling Basic Controls
3.5. Client-Side Data Validation
3.6. Handling HTML Tags in User Input

PREPARED BY : MS. PREETI BHATT 2

GET AND POST METHODS

 There are two ways the browser client can send information to the web server.
 The GET Method
 The POST Method
 Before the browser sends the information, it encodes it using a scheme called URL encoding.
 In this scheme, name/value pairs are joined with equal signs and different pairs are separated by the ampersand.
 name1=value1&name2=value2&name3=value3

PREPARED BY : MS. PREETI BHATT 3

 GET METHOD
 The GET method sends the encoded user information appended to the page request. The page and the encoded
information are separated by the ?character.
 The GET method produces a long string that appears in your server logs, in the browser's Location: box.
 The GET method is restricted to send up to 1024 characters only.
 Never use GET method if you have password or other sensitive information to be sent to the server.
 GET can't be used to send binary data, like images or word documents, to the server.
 The data sent by GET method can be accessed using QUERY_STRING environment variable.
 The PHP provides $_GET associative array to access all the sent information using GET method.

PREPARED BY : MS. PREETI BHATT 4

POST METHOD

 The POST method transfers information via HTTP headers.

 The information is encoded as described in case of GET method and put into a header called
QUERY_STRING.
 The POST method does not have any restriction on data size to be sent.
 The POST method can be used to send ASCII as well as binary data.
 The data sent by POST method goes through HTTP header so security depends on HTTP protocol.
By using Secure HTTP you can make sure that your information is secure.
 The PHP provides $_POST associative array to access all the sent information using POST method.

PREPARED BY : MS. PREETI BHATT 5

ACCESS DATA

 Access submitted data in the relevant array for the submission type, using the
input name as a key.

<form action=“path/to/submit/page”
method=“get”>
<input type=“text” name=“email”>
</form>

$email = $_GET[‘email’];
FORMS: HOW THEY WORK

 We need to know..

1. How forms work.

2. How to write forms in XHTML.

3. How to access the data in PHP.

HOW FORMS WORK

User requests a particular URL

XHTML Page supplied with Form

User fills in form and submits.

Another URL is requested and the
Form data is sent to this page either in
URL or as a separate piece of data.
User
Web Server
XHTML Response
XHTML FORM

 The form is enclosed in form tags..

<form action=“path/to/submit/page”
method=“get”>
<!–- form contents -->
</form>
FORM TAGS

 action=“…” is the page that the form should submit its data to.
 method=“…” is the method by which the form data is submitted. The option are either get or
post. If the method is get the data is passed in the url string, if the method is post it is passed as a
separate file.
 INPUT
 INPUT attributes
 type: the kind of user input control
 name: the name of the control
 This gets passed through to the handling code
 In PHP: $_POST[‘name’]
 value: initial value of the control
 size: initial width of the control
 in pixels, except for text and password controls
 maxlength: for text/password, maximum number of characters allowed
 checked: for radio/checkbox, specifies that button is on
 src: for image types, specifies location of image used to decorate input button
PREPARED BY : MS. PREETI BHATT
SPECIAL BUTTONS

 submit: the submit button.

 Causes input to be sent to the server for processing
 reset: the reset button.
 Causes all input fields to be reset to their initial values

 File upload
 file: creates a file upload control

PREPARED BY : MS. PREETI BHATT 12

INPUT CONTROL TYPES

 text:
 password:
 checkbox:
 radio:
 button
 hidden:

PREPARED BY : MS. PREETI BHATT 13

FORM FIELDS: TEXT INPUT

 Use a text input within form tags for a single line freeform text input.

<label for=“fn">First Name</label>

<input type="text"
name="firstname"
id=“fn"
size="20"/>
FORM TAGS

 name=“…” is the name of the field.You will use this name in PHP to access the data.
 id=“…” is label reference string – this should be the same as that referenced in the
<label> tag.
 size=“…” is the length of the displayed text box (number of characters).
FORM FIELDS: PASSWORD INPUT

 Use a starred text input for passwords.

<label for=“pw">Password</label>
<input type=“password"
name=“passwd"
id=“pw"
size="20"/>
FORM FIELDS: TEXT INPUT

 If you need more than 1 line to enter data, use a textarea.

<label for="desc">Description</label>
<textarea name=“description”
id=“desc“
rows=“10” cols=“30”>
Default text goes here…
</textarea>
FORM FIELDS: TEXT AREA

 name=“…” is the name of the field.You will use this name in PHP to access the data.
 id=“…” is label reference string – this should be the same as that referenced in the
<label> tag.
 rows=“…” cols=“..” is the size of the displayed text box.
FORM FIELDS: DROP DOWN

<label for="tn">Where do you live?</label>

<select name="town" id="tn">
<option value="swindon">Swindon</option>
<option value="london”
selected="selected">London</option>
<option value=“bristol">Bristol</option>
</select>
FORM FIELDS: DROP DOWN

 name=“…” is the name of the field.

 id=“…” is label reference string.
 <option value=“…” is the actual data sent back to PHP if the option is selected.
 <option>…</option> is the value displayed to the user.
 selected=“selected” this option is selected by default.
FORM FIELDS: RADIO BUTTONS
<input type="radio“ name="age“ id="u30“
checked=“checked”
value="Under30" />
<label for="u30">Under 30</label>
<br />
<input type="radio“ name="age“ id="thirty40"
value="30to40" />
<label for="thirty40">30 to 40</label>
FORM FIELDS: RADIO BUTTONS

 name=“…” is the name of the field. All radio boxes with the same name are grouped
with only one selectable at a time.
 id=“…” is label reference string.
 value=“…” is the actual data sent back to PHP if the option is selected.
 checked=“checked” this option is selected by default.
FORM FIELDS: CHECK BOXES
What colours do you like?<br />
<input type="checkbox"
name="colour[]"
id="r"
checked="checked"
value="red" />
<label for="r">Red</label>
<br />
<input type="checkbox"
name="colour[]"
id="b"
value="blue" />
<label for="b">Blue</label>
FORM FIELDS: CHECK BOXES

 name=“…” is the name of the field. Multiple checkboxes can be selected,

so if the button are given the same name, they will overwrite previous
values. The exception is if the name is given with square brackets – an
array is returned to PHP.
 id=“…” is label reference string.
 value=“…” is the actual data sent back to PHP if the option is
selected.
 checked=“checked” this option is selected by default.
HIDDEN FIELDS

<input type="hidden"
name="hidden_value"
value="My Hidden Value" />

 name=“…” is the name of the field.

 value=“…” is the actual data sent back to PHP.
SUBMIT BUTTON..

 A submit button for the form can be created with the code:

<input type="submit"
name="submit"
value="Submit" />
FIELDSET
 In XHTML 1.0, all inputs must be grouped within the form into fieldsets. These represent logical
divisions through larger forms. For short forms, all inputs are contained in a single fieldset.
<form>
<fieldset>
<input … />
<input … />
</fieldset>
<fieldset>
<input … />
<input … />
</fieldset>
</form>
A WARNING..

NEVER TRUST USER INPUT

 Always check what has been input.
 Validation can be undertaken using Regular expressions or in-built PHP functions.
IS IT SUBMITTED?

 We also need to check before accessing data to see if the data is submitted, use isset() function.

if (isset($_POST[‘username’])) {
// perform validation
}
VALIDATION

 How to determine if first time

Can check if the $_POST[] array is empty
– Will be empty first time through
– if (empty($_POST)) { create initial form }
– if (!empty($_POST)) { validate input }

htmlspecialchar(string ) : Convert special characters to HTML entities.

stripslashes() : Un-quotes a quoted string
trim(): Remove unwanted space.
PREPARED BY : MS. PREETI BHATT 30
FILTER_VAR()

 filter_var(string , FILTER_VALIDATE_OPTION)
 FILTER_VALIDATE_BOOLEAN
 FILTER_VALIDATE_DOMAIN
 FILTER_VALIDATE_EMAIL
 FILTER_VALIDATE_FLOAT
 FILTER_VALIDATE_INT
 FILTER_VALIDATE_IP
 FILTER_VALIDATE_MAC
 FILTER_VALIDATE_REGEXP
 FILTER_VALIDATE_URL

PREPARED BY : MS. PREETI BHATT 31