Tuesday 25 July 2017

Textboxes and the Wrap Attribute

In the HTML5 Specification, there exists a new attribute for the textarea element - wrap. Both soft and hard are possible values for this attribute.The default value for this is soft.

OK, I promise not to break into a juvenile repeat of what I did with Soft and Hard Bounces. What I would like to do here, is illustrate the difference between a Soft Wrap and a Hard Wrap.

Consider this PHP code. What this is meant to accomplish, is for you to be able to enter a value in the textbox, which will then be displayed once you click the "Submit" button.
<!DOCTYPE html>
<html>
    <head>
        <title>Wrap test</title>
    </head>
    <body>
        Soft Wrap Output:
        <div style="width=100%;outline:1px solid black;padding:10px">
            <pre>
<?php
if (isset($_POST["test"]))
{
    echo $_POST["test"];
}
?>
            </pre>
        </div>

        <br />

        <form method="POST">
            Test:
            <textarea name="test" rows="10" cols="30" wrap="soft"></textarea>
            <input type="submit" value="Test!">
        </form>
    </body>
</html>


This is what it's meant to look like. I know this UI is ugly as sin, but my priority here is for it to work, so bear with me.


Let's try some input, shall we? Here are a few paragraphs of Lorem Ipsum text...


And this is what you get after clicking "Submit". See how the three paragraphs become three long lines? That's a Soft Wrap. However nicely it fits in the textbox, the output does not include the breaks appearing in the textbox. Only user-specified paragraph breaks have been preserved.


Now change the code. Let's try a Hard Wrap.
<!DOCTYPE html>
<html>
    <head>
        <title>Wrap test</title>
    </head>
    <body>
        Hard Wrap Output:
        <div style="width=100%;outline:1px solid black;padding:10px">
            <pre>
<?php
if (isset($_POST["test"]))
{
    echo $_POST["test"];
}
?>
            </pre>
        </div>

        <br />

        <form method="POST">
            Test:
            <textarea name="test" rows="10" cols="30" wrap="hard"></textarea>
            <input type="submit" value="Test!">
        </form>
    </body>
</html>


Let's test using those paragraphs of Lorem Ipsum text...


And this is the result of clicking "Submit". The three paragraphs look exactly like how they look in the textbox. The line breaks enforced by the textbox have been preserved, as well as user-specified paragraph breaks!


And that, ladies, gentlemen, dear readers of all ages; is the difference between a Hard Wrap and a Soft Wrap.

And... that's a wrap!
T___T

No comments:

Post a Comment