Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Set the text wrap in a form in HTML
The wrap attribute in HTML controls how text wrapping behaves in a <textarea> element. This attribute determines whether line breaks are inserted when the text reaches the edge of the textarea and how those line breaks are handled when the form is submitted to the server.
Syntax
Following is the syntax for the wrap attribute −
<textarea wrap="value">Text content</textarea>
The value can be soft, hard, or off.
Wrap Attribute Values
The wrap attribute accepts three possible values −
soft − Text wraps visually in the textarea, but line breaks are not sent to the server when the form is submitted. This is the default behavior.
hard − Text wraps visually and actual line break characters are inserted and sent to the server when the form is submitted. Requires the
colsattribute to be specified.off − Text does not wrap automatically. Users must manually press Enter to create line breaks.
Using wrap="soft"
The soft value is the default behavior. Text wraps visually within the textarea, but no actual line break characters are inserted into the text when submitted.
Example
<!DOCTYPE html>
<html>
<head>
<title>Soft Text Wrap</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Soft Wrap Example</h2>
<form>
<textarea rows="4" cols="30" name="message" wrap="soft">This is a long line of text that will wrap visually in the textarea but will not have line breaks when submitted to the server.</textarea>
<br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
The text appears wrapped in the textarea for better readability, but the actual text data remains as one continuous line when submitted.
Using wrap="hard"
With hard wrapping, actual line break characters are inserted into the text at the wrap points and sent to the server. The cols attribute must be specified to determine where wrapping occurs.
Example
<!DOCTYPE html>
<html>
<head>
<title>Hard Text Wrap</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Hard Wrap Example</h2>
<form>
<textarea rows="4" cols="25" name="message" wrap="hard">This is a long line of text that will wrap and insert actual line breaks at the specified column width.</textarea>
<br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
When this form is submitted, the server receives the text with actual line break characters inserted at the wrapping points.
Using wrap="off"
With off wrapping, text does not wrap automatically. Users can only create line breaks by manually pressing the Enter key.
Example
<!DOCTYPE html>
<html>
<head>
<title>No Text Wrap</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>No Wrap Example</h2>
<form>
<textarea rows="4" cols="30" name="message" wrap="off">This very long line of text will not wrap automatically and will extend beyond the visible area requiring horizontal scrolling.</textarea>
<br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
The textarea will show a horizontal scrollbar when the text exceeds the visible width, and no automatic line breaks occur.
Comparing Wrap Values
| Wrap Value | Visual Wrapping | Line Breaks Sent to Server | Requires cols Attribute |
|---|---|---|---|
| soft (default) | Yes | No | No |
| hard | Yes | Yes | Yes |
| off | No | Only manual breaks | No |
Browser Compatibility
The wrap attribute is supported in HTML5 and works across all modern browsers including Chrome, Firefox, Safari, and Edge. The soft and hard values have broader support than off, which may not work consistently in older browsers.
Conclusion
The wrap attribute provides control over text wrapping behavior in HTML textarea elements. Use wrap="soft" for visual wrapping without server-side line breaks, wrap="hard" when you need actual line breaks preserved in the submitted data, and wrap="off" to disable automatic wrapping entirely.
853 Views
