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:

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 "<p>Thanks for visiting us from $city.</p>";
print "<br>";
print "<p><a href=test-textform.html>Back to Text Form</a></p>";
?>
</body>
</html>

Advanced students: Save as parse-textform.php in your Apache/htdocs folder.*Try adding style sheet at bottom of page.

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>
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>

Add a link to the website style sheet:

Free Tools and Resources

Things Things Have you found Thiings yet?.
Over 6000 Free 3D images that you can download (individually or the complete set) and use for personal or commercial projects. You have got to SEE this!!

Free Bullet Images, WingDings and WebDings
🔵 🔶 😀 🎈 🐝 🏀 👉 👲 💡 🍅

Have you tried our NEWEST template kit with scrolling columns?
Download Template Kit #601 - 4 Page Kit or Test Drive It!