Text Areas

If you want to have a text field that allows multiple lines to be typed, you need a completely different HTML control: the <textarea> element. Use the element's attributes to set the size and number of rows and columns of the control, among other features. For example,

<textarea name="WebSites" rows="30" cols="50">

creates a text area named WebSites whose size is 30 rows by 50 columns. A text area is designed to take whole sentences from the user. Its advantage is that you can set the size, and it can take many lines of text. <textarea> requires a closing tag, and you can place default text for each line inside the tags.

Ready to try using a text area?

Try it Out: Use Text Area

Start Example:
  1. Start your Web page editor and type the following:

    <html>
    <head><title></title></head>
    <body>
    <form method="POST" action="textarea.php">
    What are your favorite web sites?
    <textarea name="WebSites" cols="50" rows="5">
    http://
    http://
    http://
    http://
    </textarea>
    <br>
    <br>
    <br>
    <input type="submit" value="Submit">
    </form>
    </body>
    </html>
    
  2. Save it as textarea.html. Close the file.

  3. Create another file and type the following:

    <html>
    <head><title></title></head>
    <body>
    Your favorite web sites are:
    <?php
    echo $_POST['WebSites'];
    ?>
    </body>
    </html>
    
  4. Save this as textarea.php.

  5. Open textarea.html in your browser and type in the URLs of some of your favorite Web sites.

  6. When you're finished (you don't have to fill in all four sites), click the Submit button.

How It Works

Not quite as neat and tidy as the previous example, is it? But don't let that distract you from an important point, which is the URL that reads:

There's no query string attached. And that's because in the first of these two programs you set method to equal POST.

<html>
<head><title></title></head>
<body>
<form method="POST" action="textarea.php">
What are your favorite web sites?
...

You needed to make that change to ensure that your form details aren't freely visible. There's little else of particular interest on the Web page, apart from the <textarea> element:

<textarea name="WebSites" cols="50" rows="5">
http://
http://
http://
http://
</textarea>

It's set to be five rows high, and 50 columns across to get it to the size you need. Unlike in normal HTML, the text inside the <textarea> element doesn't require line breaks (the <br> tag); it's enough to start it on a new line to get it displayed on a new line. The name of the textarea control is set to WebSites, and then in the second program (textarea.php), this variable is referenced in PHP as $WebSites, once again taking care to ensure the cases are identical:

...
Your favorite web sites are:
<?php
echo $_POST['WebSites'];
?>
...

The entire contents of the <textarea> element are then dumped to the screen, but the carriage returns that separated them in the HTML page are automatically collapsed by the browser, along with any extra white space, to make the details fit in.