View video tutorial

HTML wrap Attribute

HTML

The wrap attribute in HTML specifies how text will be handled to wrap text content in a textarea when submitting a form.

Definition and Usage


➔ The wrap attribute has these values: soft (default) and hard.

➔ soft: This specifies that the text content in the textarea will not be wrapped (no newlines) when the form is submitted.

➔ hard: This specifies that the text content in the textarea will be wrapped (newline) when the form is submitted.

➔ Use the cols attribute with the hard attribute to specify where line breaks should occur.

Syntax
//In HTML
<!-- Text wraps visually but submits as a single line -->
<textarea it="sample" wrap="soft">This specifies that the text content 
in the textarea will not be wrapped (no newlines) when the form is 
submitted.
</textarea>

<!-- Text wraps with a new line every 30 characters when submitted  -->
<textarea wrap="hard" cols="30">This specifies that the text content 
in the textarea will be wrapped (newline) when the form is 
submitted.
</textarea>

//In JavaScript
<script>
    const element = document.getElementById('sample');
    element.wrap = 'hard';
    element.cols=30;
</script>

Applies to

This attribute can be used on the following element.

Attribute Element
wrap <textarea>

Example

<!DOCTYPE html>
<html>
<head>
    <title>HTML wrap attribute example</title>
    <meta charset="utf-8" />
</head>
<body>
    <h3>HTML wrap attribute example</h3>
    <p>wrap attribute specifies how to wrap text content in a textarea</p>
    <div>
        <!-- Text wraps visually but submits as a single line -->
        <textarea it="sample" wrap="soft">This specifies that the text 
content in the textarea will not be wrapped (no newlines) when the 
form is submitted.
</textarea>
        <!-- Text wraps with a new line every 30 characters when submitted  -->
        <textarea wrap="hard" cols="30">This specifies that the text 
content in the textarea will be wrapped (newline) when the form is 
submitted.
</textarea>
    </div>
    <script>
        //const element = document.getElementById('sample');
        //element.wrap = 'hard';
        //element.cols = 30;
    </script>
</body>
</html>
Try it Now »

Click on the "Try it Now" button to see how it works.