require() and include()
Allows the developer to place external file content into the calling page
The main difference between include and require is that an "include"d file is not found the page will still load, whereas a "require"d file that is not loaded will cause the page to stop executing.
However, both give the developer the option of centralizing functionality (PHP functions) and/or page content
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>A Page Built from Separate Files</title>
<link rel="stylesheet" type="text/css" href="css/stylesheet.css"/>
</head>
<body> </body>
</html><?php
include("header.html");
echo "<h1>First Build Page</h1>";
include("footer.html");
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>A Page Built from Separate Files</title>
<link rel="stylesheet" type="text/css" href="css/stylesheet.css"/>
</head>
<body>
<h1>First Build Page</h1>
</body>
</html>
For each page, there should be/could be page specific details. Example: title, comments, banners etc. If the pages that are "include"d need to make decisions on the fly, they CANNOT be HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html;
charset=UTF-8"/>
<title><?php echo $title; ?></title>
<link rel="stylesheet" type="text/css" href="css/stylesheet.css"/>
</head>
<body>
</body>
</html>
<?php
/*
$title has to be declared before the include or it will not be defined when the echo tries to display it in header.php
*/
$title = "A Built Page with a Dynamic Title";
include("header.php");
echo "<h1>Second Build Page</h1>";
include("footer.php");
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>A Built Page with a Dynamic Title</title>
<link rel="stylesheet" type="text/css" href="css/stylesheet.css"/>
</head>
<body>
<h1>Second Build Page</h1>
</a>
</body>
</html>
Up to this point, most of the web pages have been output only. Users could read or view content on the page. However, we will now allow the users to provide data to the server.
HTML uses forms to allow user input. This data could be used directly in the page, or could be sent on to a web server (for example, logging into a site, adding data to a database, editing a profile).
Every time we log-in, purchase items at an online store, or perform a search, we are using forms.
An HTML form is created using special markup and a number of special-purpose elements. The browser provides the user with custom components for entering, modifying, or even uploading data to be associated with our form. We'll begin by learning how to create, use, and style these form elements, and later look at how to work with the data programmatically in JavaScript.
The most important element for creating web forms <form>. A <form> element represents a section of a web page that contains interactive controls that a user can use to enter and submit data to the web page or server. The <form> element is a special type of container element, which we use to define information about how to send the user's data to a server:
<form id="data" action="submit.php" method="post">
</form>The form's action attribute defines the URL where the data should be sent when submitted. In this case submit.php really means "send this data to the same web server as the page was served from, and to the submit.php file in the same folder". Sometimes you'll also use action="#" to indicate that the form is to be processed in the browser, but not sent to any server URL.
The method tells the browser which HTTP method to use when submitting the data to the URL defined in action. By default this will be GET, and all form options will be sent as query string values in the URL. When submitting a lot of form data, we can also use POST, which will include the information in the request's headers instead, allowing more content to be sent (i.e., URLs have a maximum length). The post method also does not display data publicly where the query string is clearly visible to the user, meaning passwords may be disclosed.
A <form> contains various elements that make up the set of inputs and widgets available to the user. The most common type of input control is the <input> element.
An <input> element is an interactive control used to receive string data from the user. There are many different types of input controls, with new ones still being added. Here's a basic <input> element for a user to enter their name in a textbox:
<input id="name" type="text" name="first-name">The <input> element is used to tell the browser we want an input control to be created on the page. Notice that <input> elements are empty (i.e., no content) and don't have a closing tag. All of the information is stored in attributes on the element. As with all HTML elements, it's common (but not required) for an <input> control to have an id attribute, which uniquely identifies this control. In addition, we also specify a name="first-name" attribute, which is used later to associate the value entered by the user with the particular control on the form-in this case, the value entered by the user will be called first-name when the form gets processed. Finally, we have a type="text" attribute, indicating that this form control should be rendered in the page as a textbox.
There are many more form elements, attributes, and input types to learn. Let's continue by looking at some well-known, real-world examples of forms and how they are built.
<form id="form1" class="formClass" action="results.php" method="GET" name="form1">
<input name="source" type="hidden" value="hp">
<input value="qIXxW6O0FeTMjwT1zpioCA" name="hiddenCode" type="hidden">
<label for="nameSearch">Search String</label>
<input maxlength="100" name="searchText" type="text" title="Search">
<input value="Google Search" name="btnK" type="submit">
<input value="I'm Feeling Lucky" name="btnI" type="submit">
</form>produces (view source code to see the back-end bit):
The hidden type inputs are used for storing, and including data, in the submission without user input. This is often used to store product codes etc, when the page knows what product it is, saving the user from re-entering it and potentially causing an error.
The name attribute gives us an identifier that is used when reading the input back in the processing script.
The id attribute makes the tag an element allowing us to dynamically interact with it in scripted code.
The value attribute allows us to preset a value in the control before the user enters anything. This is often used when we are editing data, and not entering new data.
submit type inputs create a button which will trigger the action from the code. This can be intercepted through Client-side javascript, but does not have to be. Along side the submit type, there is a reset type that create a button, that sets the content of the form back to its default values.
A basic login form may look like:
The code would be:
<form action="loginProcess.php" method="post">
<label>Login: <input name="login" type="text" placeholder="login"></label>
<br>
<label>Password: <input name="pw" type="password"></label>
<br>
<input type="submit" value="Login">
<input type="reset" value="Reset">
</form>
Sometimes we want to have a number entered, and want to make sue the data is numeric only. This can be accomplished through JavaScript data validation, or more easily by using a type=number input box.
<input name="numberOfPeople" type="number" max="100" min="0" value="0" step="1">We can use dynamic HTML5 input types for times, dates, or both.
<input type="date" name="hireDate"≷or
<input type="datetime-local" name="startDateTime"≷Combo boxes, also called, dropdown lists are very common to allow the user a choice of items, without having to type them. This is ofter used for things like choosing a country or province.
<select name="country">
<option value="CA">Canada</option>
<option value="US">United States</option>
<option value="MX">Mexico</option>
</select>the code is:
<input type="text" list="subjects" name="course">
<datalist id="subjects">
<option value="INFT1206">Web Dev</option>
<option value="INFT1205">Intro to Database</option>
<option value="SYSD">Systems Design</option>
<option value="DNET1201">Network Communications</option>
</datalist>
Radio buttons are used most commonly when only one option is available and you want to see all the options at the same time. The most common use of radio buttons would be for multiple choice questions.
Which language would be used for client-side scripting?
The code would be:
<p>Which language would be used for client-side scripting?</p>
<input type="radio" id="html" name="cssLanguage" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="cssLanguage" value="CSS">
<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="cssLanguage" value="JavaScript">
<label for="javascript">JavaScript</label>When email addresses are required and must be properly formatted:
Is Post Approved
<input type="checkbox" name="isApproved" value="on">