Advanced Higher Computing Science HTML Form Processing
advertisement
Advanced Higher Computing
Science
HTML Form Processing
HTML Forms
A 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 sites
A 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 sites
Forms 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 form
Web browser displays the HTML form.
REPEAT
User 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 data
Web 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: GET
Client requests web page on port 80
->
GET /index.html HTTP/1.0
HTTP 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: GET
Client requests search page on port 80
->
GET /search.html HTTP/1.0?=http+protocol
HTTP server sends response code
<-
HTTP/1.0 200 OK Date: Fri, 31 Dec …..etc
HTTP 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:
• Text area:
• Button:
• Checkbox:
• Radio Button:
• List selection:
single line text box
multi line text area
clickable button to perform an action
multiple selection (on/off)
single selection (on/off)
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 contents
required 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
<input
<input
<input
<input
type="number" min="1" max="10">
type ="email">
type ="url">
type ="date">
type ="time">
Client side validation: HTML5
<input type="text" name="name" id="name" pattern="[A-Za-z-09]+\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="time" name="time"
/>
<input type="date" name="date"/>
Client side validation: HTML5
<input type="url" name="url" />
<input type="email" name="email" />
Client-side validation: CSS3
CSS3 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: HTML5
HTML 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: Fallback
If 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 Frameworks
Frameworks 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 Frameworks
Popular 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 POST
The 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 = "queries@mycompany.co.uk"
$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 Injection
This 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 scripting
A 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.
type="text"
value="Search or enter catalogue number"
State the missing contents of the name attribute needed to complete line 6
name="searchbox"
2015 Q11b
When 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 Q11b
The 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 Q11b
A 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 Q11b
Some 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 Q13e
A 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 Q16e
The 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 .
