Forms and Text Boxes
There are two devices provided to collect typed input from your users in a form.
They are the text box and textarea input types.
We will provide a simple form and a matching PHP script for each.
The Naked Code for a Textbox:
Text <input type="text">
The W3C recommends placing the inline input devices within paragraphs as shown:
<p>Text <input type="text"></p>
Attributes
- size =length of box
- maxlength=maximum number of characters that can be entered.
- name=name assigned to value to be retrieved
- value=default contents of text box
- required=required (Optional) User must enter a value
A simple form to demonstrate:
HTML5 Form Code:
<!DOCTYPE html>
<html>
<head>
<title>Text Textbox</title>
<meta charset="utf-8">
</head>
<body>
<form method="post" action="parse-textform.php">
<p>Please enter the name of the city where you live:<br/>
<input type="text" name="city" size="30" maxlength="45" required="required"></p>
<p><input type="submit" value="Submit"></p>
</form>
</body>
</html>
Advanced students: Copy and save in your Apache/htdocs folder as test-textform.html
The PHP Script
In order to execute PHP scripts on your PC you must install a localhost server
<!DOCTYPE html>
<html>
<head>
<title>Parse Textbox</title>
<meta charset="utf-8">
</head>
<body>
<?
$city=$_POST['city'];
print "<h1>Hello Friend</h1>";
print "Thanks for visiting us from $city.";
print "<br>";
print "<a href=test-textform.html>Back to Text Form</a>";
?>
</body>
</html>
Advanced students: Save as parse-textform.php in your Apache/htdocs folder.
Textarea
Textareas are useful when you want more than a one word or phrase answer from your users.
Textarea <textarea></textarea>
Attributes:
- cols=width of text area, sets number of characters per line
- rows=height in lines before box begins to scroll
- name=name assigned to information gathered
- value=can display a default text
A simple form to demonstrate:
NOTE: The addition of the Reset button, allows the user to erase an entry and start over.
Notice also that you can change the caption on the Submit button by changing the value attribute.
Try submitting an empty form. The required attribute doesn't allow it.
The HTML 5 Form Code:
<!DOCTYPE html>
<html>
<head>
<title>Text Textarea</title>
<meta charset="utf-8">
</head>
<body>
<form method="post" action="parse-textarea.php">
<p>In 25 words or less, state what additional information you would like to see on this site:</p>
<p><textarea name="moreinfo" cols="60" rows="10" required="required">
</textarea><br/>
<input type="submit" value="Submit Answer"> <input type="reset"></p>
</form>
</body>
</html>
Advanced students: Copy and save in your Apache/htdocs folder as test-textarea.html
The PHP Script
<!DOCTYPE html>
<html>
<head>
<title>parse Textarea</title>
<meta charset="utf-8">
</head>
<body>
<?
$moreinfo=$_POST['moreinfo'];
print "<h1>You entered:</h1>";
print "<p>$moreinfo</p>";
print "<br>";
print "<p><a href=test-textarea.html>Back to Form</a></p>";
?>
</body>
</html>
Advanced students: Save as parse-textarea.php in your Apache/htdocs folder.
Note: You can add an embedded style sheet in the head section of the HTML pages and scripts.
<style type="text/css">
body {
background: #28CACC;
color: #010101;
font-family: arial, tahoma, serif
}
h1, p {
text-align: center
}
form {
background: #dfdfdf;
width: 40%;
display: block;
margin: 0 auto;
padding: 20px;
box-shadow: 4px 4px 8px #020202 inset;
border-radius: 10px }
</style>
Or
Add a link to the website style sheet:
<link rel="stylesheet" href="yoursite-css file" type="text/css" />