Forms and Text Boxes
Barebones

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 lang="EN">
<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 Linux students: Copy and save in your var/www/html folder as textboxform.html

Read How to Save

To save your forms in the var/www/html folder you'll need to elevate permissions in that folder. See: Localhost

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>
You live in:  <?php echo $_POST["city"]; 

print "<p><a href=formstext.htm>Back to Text Form</a></p>";
?>
</body>
</html>

Advanced students: Save as parse-textform.php in your var/www/html 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 Linux students: Copy and save in your var/www/html folder as texareaform.html

The PHP Script

	
<!DOCTYPE html>
<html lang="en">
<head>
<title>parse Textarea</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

</head>
<body>

<p>You posted:</p>
<?php echo $_POST["moreinfo"];

print "<p><a href=formstext.htm>Back to Forms</a></p>";
?>

</body>
</html>

Advanced Linux students: Save as parse-textarea.php in your var/www/html folder.

Note: You can add an embedded style sheet in the head section of the HTML pages and scripts or add a link to the website style sheet:

See: Using the Localhost (Learn to edit and browse forms via the Localhost server)

Top

Forms and Text BoxesBarebones

HTML5 Form Code:

The PHP Script

Textarea

The HTML 5 Form Code:

The PHP Script

Forms and Text Boxes
Barebones