CreateaFreeWebsite
with Responsive Web Design

web Hosting
Menu

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

A simple form to demonstrate:

Please enter the name of the city where you live:

 

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:

A simple form to demonstrate:

In 25 words or less,
state what additional information you would like to see on this site:

 

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

 

Free Tools We Recommend

Free Ebook How to Code in HTML5 and CSS3
"How to Code in HTML5 and CSS3" is a free e-book about making websites in HTML5 and CSS for absolute beginners. It doesn't require any experience in IT to start....
Free Logo Generator Turbologo.com
If you are building a website for business you need to begin thinking about creating a brand identity. An unforgettable logo could be just the start you need. You can create it free at Turbologo.com. They also provide generators for business cards and letterheads.
FREE HTML Editor (Windows): NoteTab Light
All the features of a commercial HTML editor.
FREE Apache Server (Windows): IndigoAmpp
Set up a real time server environment right on your PC. Test forms and scripts before uploading to your web space.
Linux Users
If like us, you've left the insane world of Microsoft Windows for the even worse experience of Linux, we recommend the BlueFish HTML editor. You'll find it in your software repository. It does have some QUIRKS, but it's FREE.
For image resizing we've found the easiest Linux tool to be Krita.

Have you tried our Free Mobile Ready website template kit? Download Template #402 - 6 Page Kit