Embed Size (px)
Citation preview
Advanced Higher Computing Science
HTML Form Processing
HTML FormsA form can be used to :• sign up for a service• send an email to an organisation• upload data to a database• query a database• search a website• edit a page on a content managed site• several of the above things simultaneously
Account creation and comment submission
Database updates and queries
Content Managed websites
Content Managed sites• Generate HTML pages using server-side scripting
(PHP) and a database (MySQL) • Use forms to enable users to add content without
having to write HTML code• Restrict users to a house style dictated by site
administrator (CSS)• Use client-side and server-side validation to maintain
data integrity.
Content Managed sitesA content managed site will have users with different privileges such as:
• Visitors who can only view the public pages on the site• Content managers who can add, edit and delete
content• Administrators who can add or remove users change
user permissions and alter the structure and layout of the site.
Content Managed sitesForms used to:
• Build site• Add users• Create new content• Update content• Search site• Contact administrators
HTML Forms: User view
User visits a web page that contains a formWeb browser displays the HTML form.REPEATUser completes the form and submits it.
IF any required fields are empty or fields are not the required format THEN User is informed of error
UNTIL fields contain correct dataWeb browser displays response page
HTML forms: server view• User requests HTML page containing a form• Browser sends form page to client• Form data is received from browser• Form data is processed by script
Database is updated AND/OR Email sent Browser sends response to client AND/OR
page content is updated
HTTP protocol: GETClient requests web page on port 80
-> GET /index.html HTTP/1.0HTTP server sends response code
<- HTTP/1.0 200 OK Date: Fri, 31 Dec …..etc HTTP server sends requested page
<- <html><head><script type="text/javascript" src="script.js"></script> <meta name="description" content="Main Page."> <meta name=" ………… etc ……… <html>
HTTP server closes socket
HTTP protocol: GETClient requests search page on port 80
-> GET /search.html HTTP/1.0?=http+protocolHTTP server sends response code
<- HTTP/1.0 200 OK Date: Fri, 31 Dec …..etcHTTP server sends requested search results
<- <html>itemscope="" itemtype="http://schema.org/WebPage" lang="en-GB"><head> ………… etc ……… <html>
HTTP server closes socket
Basic structure of an HTML form
<html> <head> <title>Basic form</title> </head> <body>
<form name="commentForm" method="" action="" > <label for="comment">Enter your comment here</label> <input type="text" name="comment" value="" /> <input type="submit" name="submit" id="Submit" value="Submit" /> </form>
</body>
</html>
Basic structure of an HTML form
<form name="commentForm" method="" action=""> <label for="comment">Enter your comment here</label> <input type="text" name="comment" value="" /> <input type="submit" name="submit" id="Submit" value="Submit"/> </form>
The <form> element
name is a unique identifier for the form
method will be how the data is transmitted to the processing script
action will be the URL of the processing script on the server
Basic structure of an HTML form
<form name="commentForm" method="" action=""> <label for="comment">Enter your comment here</label> <input type="text" name="comment" value="enter comment here"/> <input type="submit" name="submit" value="Submit" /> </form>
The <input> element:
type="text" specifies that the browser should display a single line text input box
name="comment" means that when the form is submitted the contents of this input will be referred to as comment
value="" Value specifies a value to place in the text box when the form is created
Optional attributes:
maxlength="60" gives the text box a maximum number of characters that it can hold
size="40" the size of the text box as it appears in the web page
Basic structure of an HTML form
<form name="commentForm" method="" action=""> <label for="comment">Enter your comment here</label> <input type="text" name="comment" value="" /> <input type="submit" name="submit" value="Submit" /> </form>
The <input> element (button)
type="submit" creates a button that sends the forms contents for processing
name="submit" uniquely identifies the button
value="Submit" value specifies the text to display on the button
Optional attributes
Value="reset" creates a reset button that clears the values entered in the form
<input type="reset" name="reset" value="Clear form" />
Form elements• Text box: single line text box• Text area: multi line text area• Button: clickable button to perform an
action• Checkbox: multiple selection (on/off) • Radio Button: single selection (on/off) • List selection: dropdown list (text)
Form Field Verification
Not the same thing as validation!
Client side validation: HTML5
maxlength can limit the number of characters The pattern attribute is a method of declaring rules to match string contentsrequired means that the field cannot be empty
<input type="text" name="username" maxlength="40" pattern="^[A-Za-z0-9]+$" required />
Input patterns can be used to validate specific input formats such as telephone numbers, credit card numbers, IP addresses etc.
Client side validation: HTML5• HTML5 offers some (limited) input validation.• Results may be browser dependent
<input type="number" min="1" max="10"> <input type ="email"><input type ="url"> <input type ="date"> <input type ="time">
Client side validation: HTML5
<input type="text" name="name" id="name" pattern="[A-Za-z-0-9]+\s[A-Za-z-'0-9]+" title="firstname lastname"/>
<input type="text" name="firstname" required />
Client side validation: HTML5
<input type="number" min="1" max="9" name="number"/>
<input type="date" name="date"/>
<input type="time" name="time" />
Client side validation: HTML5
<input type="url" name="url" />
<input type="email" name="email" />
Client-side validation: CSS3CSS3 cannot validate input on a form, but it can be used to format invalid and valid input to help the user.
<style type="text/css"> input:invalid { border-color: red; background:hsl (0, 50%, 90%) } input:valid { border-color: green; background:hsl (120, 50%, 90%) }</style>
Client-side validation: HTML5HTML form validation is supported by all the latest desktop browsers, and most mobile browsers.
HTML form validation is not supported on versions of IE prior to IE10, iOS, Safari, or the default Android browser. If you want to use form validation on these browsers you need to use JavaScript
Client-side validation: FallbackIf people viewing your web page do not have the latest version of their browser installed, then there needs to be some system which detects this and directs them to a page which still provides client-side validation.
When a browser requests a page, it will provide the HTTP server with its name and version number.
https://www.whatismybrowser.com/
This is usually done using JavaScript code which detects the browser version and then sends the user to a page which uses JavaScript for client-side validation.
Examples are:
• Modernizer which tests for HTML5 and CSS3 features
• Yepnope will load scripts conditionally depending on the results from Modernizer
Client-side validation: JavaScript
A simple input validation script:
function checknumber(){
var numbertocheck = usernumber.value;
while (numbertocheck < 1 || numbertocheck >100){
alert("sorry that number is out of range, please re-enter");
document.getElementById('usernumber').value = null;
document = initDocument;
}
You can see more JavaScript examples here: http://www.codecademy.com/courses/web-beginner-en-8l45k/1/1
Client-side validation: JavaScript
Although JavaScript can be embedded inline on a web page, or in the <head> section of a web page, like CSS formatting it is best to implement it as an external file. This means that its code can be used by more than one page.
<head><script type="text/javascript" src="script.js"></script></head>
Front-end FrameworksFrameworks are packages made up of HTML, CSS and JavaScript code which can be used to build the user interface of a website. They will include tools for creating code to:• scale pages in response to the platform being used• build HTML forms• set up style definitions for HTML elements• set up CSS grids for element positioning• deal with browser incompatibility
Front-end FrameworksPopular front-end frameworks:
• Bootstrap• Foundation 3• Grids system
Sending form data to a script: GET
The values from the form are visible in the URL so are insecure. The string on values starts with "?"
• appends form data into the URL in name/value pairs (delimitated by &);
• the length of a URL is limited (to roughly 3000 characters);
• not suitable for sensitive information because the data is visible in the URL;
• useful for instances where the data will be part of a bookmark/link to a page;
• useful when debugging because the values passed to the processing script are visible.
Sending form data to a script: POST
The POST method adds the form data inside the body of the HTTP request to the processing script so the data is not visible in the URL. This is generally more secure than the GET method.
• adds the form data to the HTTP request to the processing script• has no size limitations on the amount of data that can be
submitted• form submissions with POST cannot be bookmarked
Sending form data to a script <form name="commentForm" method="POST" action="sendmail.php"> <label for="comment">Enter your comment here</label> <input type="text" name="comment" value="" /> <input type="submit" name="submit" value="Submit" /> </form>
Two possible methods are available: GET and POSTThe GET method adds the list of values from the form to the URL of the processing script.
The POST method adds the form data inside the body of the HTTP request to the processing script so the data is not visible in the URL. This is generally more secure than the GET method.
The action is the name of the script which processes the data
The sendmail.php script<?php
// get data from form
$comment = $_POST['comment'];
//send email
$to = "[email protected]"
$subject = "user comment";
$header = "From: Comment form";
$body = $comment;
mail( $to,$subject,$body,$header);
//send response
echo "Your comment has been sent, thank you for your response.";
?>
PHP essentials• PHP code is always enclosed inside this tag: <?php ?>
• PHP variable names are prefixed with a $ symbol.
• Every statement must end with a semicolon ";"
• Comments start with //
Retrieving data from a database
<?php
//connect to mysql server
$mysqli = new mysqli( "server" , "username" , "password", "database");
// setting up the MySQL
query$sql = "SELECT * FROM table1";
// get data
$result = mysql_query($sql);
//setting up table and printing two column headings
print "<table width = 50% border=1>"; print"<tr><td><b>Forename</b></td><td><b>Surname</b></td></tr>";
//while there is data to retrieve
while ( $db_field = mysql_fetch_assoc($result) ) {
//print row with two cells
print "<tr> <td>";
print $db_field['forename']. "</td><td>";
print $db_field['surname']. "</td></tr>"; }
print"</table>";
?>
Sending form data to a database <form name="addData" method="POST" action="addData.php"> <label for="forename">Enter your forename here</label> <input type="text" name="forename" value="" /> <label for="surname">Enter your surname here</label> <input type="text" name="surname" value="" />
<input type="submit" name="submit" value="Submit" /> </form>
The addData.php script<?php
//get data from form
$forename = $_POST['forename'];
$surname = $_POST['surname'];
//connect to mysql server
$mysqli = new mysqli( "server" , "username" , "password", "database");
//SQL code to add data to database
$sql ="INSERT INTO test1(forename,surname)VALUES('$forename','$surname')";
$result = $mysqli->query($sql);
?>
Form security: Code InjectionThis attack is when a weakness in poorly written code is used by an attacker to inject code into a vulnerable script and change the execution of the script.
Attackers will paste SQL or HTML code into a web form to extract unauthorised data from the database or control the MySQL server
http://info.varonis.com/web-security-fundamentals
Form security: Cross site scriptingA type of attack carried out on web applications. It allows hackers to inject client-side script into a web page that others can view. Cross-site scripting uses gaps in the security of web applications to allow malicious content to be delivered from a compromised site. When the user visits the compromised page information can be harvest by the attacker.
Server-side validation: sanitization
• Sanitization is the removal of illegal characters from the form data, to protect against code injection attacks
$name =filter_var($_GET['name'],FILTER_SANITIZE_STRING);
Server-side validation: PHP validation
function validate_form ($username, $email) {
if(!ctype_alnum($username)||!filter_var($email, FILTER_VALIDATE_EMAIL)){
return false;
}
return true;
}
This function uses the PHP type ctype_alnum to validate the username because this requires that $username be alphanumeric only. The PHP filter.
FILTER_VALIDATE_EMAIL
is used for the email address. Should either of these be invalid then a value of false is returned from the function. If they are valid then true is returned.
Past paper questions• Computing Science Specimen Paper Q 2• Information Systems 2015 Q11b• Information Systems 2014 Q11b• Information Systems 2013 Q13e• Information Systems 2012 Q16e
Specimen Paper Q 2
What method of processing would be used in line 1? Explain your answer.
GET Because the search text is included in the URL
Specimen Paper Q 2
State the missing contents of the type and value attributes needed to complete line 5.
State the missing contents of the name attribute needed to complete line 6
type="text" value="Search or enter catalogue number"
name="searchbox"
2015 Q11bWhen members first use one of the kiosks, they are asked to provide the additional information required using this HTML form:
The structure of this HTML form includes a form element and several input elements.
(i) Describe, in detail, the purpose of the form element.
2015 Q11bThe structure of this HTML form includes a form element and several input elements.(i) Describe, in detail, the purpose of the form element.
• the form element creates a form to gather input from the user which is then processed using a script• the action element refers to the name of the script that
will receive the data entered into the form and the method element refers to how the form data will be transmitted.
2015 Q11b(ii) One of the Return Date Notifications from the form shown on the opposite page is displayed below.
Write the HTML code to generate this Return Date Notification option.You should clearly indicate the contents of the type, name and value attributes.
<input type = “radio” name = “preferred date” value = “2 days prior to due date”>
2014 Q11bA system will enable customers to book tickets from home via the Internet and then collect them from the kiosks at each venue.Customers must enter their details into an online form as shown here:
2014 Q11bSome of the HTML code for this form is provided below:
(i) State what is missing from line 1 of the code above.There is no action attribute.
(ii) The textarea element is used for obtaining the customer’s address.Explain why an input element would not be suitable.
The input element does not allow multiple lines of text.
2014 Q11b(iii) Change the code for line 5 so that a button labelled ‘SEND’ is produced
<button type="submit"> send </button> or <input type = “submit” value = “send”>
2013 Q13eA motel allows guests to upload photographs taken during their stay. An HTML form is used for this purpose.
The HTML form element for the Photo Upload Form is provided below. < form action = “guest_photo.asp” method = “get” >Explain the purpose of the action attribute.
The action attribute specifies the page on the server that will receive any images submitted by guests.
Complete the type attribute of the input element for the button used to browse for the photo to be uploaded.
< input type="file" >
2012 Q16eThe online database can be accessed using a web browser. Part of the HTML code for the logon screen is shown below.
<form method= “post” action=“dblogin.php”>
<p> Username <input name=“username” type=“text” value=“******” /></p>
<p> Password <input name=“Password1” type=“password”
value = “*******”/> </p>
</form>
(i) Produce a sketch to show what will be displayed by this code in the web browser before the user starts to log on.
2012 Q16e<form method= “post” action=“dblogin.php”>
<p> Username <input name=“username” type=“text” value=“******” /></p>
<p> Password <input name=“Password1” type=“password”
value = “*******”/> </p>
</form>
ii) Explain the purpose of the action attribute in the above code.
The data entered in the form will be sent to the dblogin.php page .
