HTML wrap Attribute

Introduction

The wrap attribute is used on the <textarea> element to control how line breaks are handled when the form is submitted. It does not replace CSS for visual layout; it affects the string sent to the server.

When users type long lines in a textarea, text may wrap visually at the edge of the box. The question is: should those automatic wrap points become real newline characters in the submitted value? That is what soft and hard decide.

What You’ll Learn

Purpose of wrap

The main purpose of the wrap attribute is to define whether the browser should insert newline characters at wrap points when a textarea value is submitted. This gives you control over plain-text formatting on the server side.

For most modern apps, soft (the default) is fine because servers and APIs handle long lines without requiring fixed-width line breaks. Use hard when you need email-style or fixed-column plain text with breaks preserved.

📝 Syntax

Add wrap to a <textarea> inside a form:

<form>
  <label for="message">Your Message:</label>
  <textarea id="message" name="message" wrap="soft" rows="4" cols="30"></textarea>
  <input type="submit" value="Submit">
</form>

Syntax Rules

• Valid only on <textarea>.
• Values: soft (default) or hard.
• Pair with cols so the browser knows the wrap width for hard.
• User-entered Enter/Return line breaks are always included in both modes.
• JavaScript: textarea.wrap = "hard" or setAttribute("wrap", "hard").
• Visual styling: use CSS width, resize, and white-space.

💎 Values

The wrap attribute accepts two keyword values:

• soft (default) — Text may wrap visually in the textarea, but when the form is submitted, the value contains only line breaks the user typed (Enter). Browser wrap points are not sent as newlines.
• hard — Text also wraps visually, and when submitted, the value includes newline characters at each wrap boundary (in addition to user line breaks). Useful for fixed-width plain text.

<!-- Default: soft -->
<textarea name="bio" rows="4" cols="40"></textarea>

<!-- Explicit hard wrap on submit -->
<textarea name="comment" wrap="hard" rows="6" cols="50"></textarea>

Applicable Elements

soft vs hard vs CSS wrapping

Examples Gallery

Try soft wrap in a form, compare hard wrap submission behavior, and toggle wrap with JavaScript.

<form>
  <label for="message">Your Message:</label>
  <textarea id="message" name="message" wrap="soft" rows="4" cols="30"></textarea>
  <input type="submit" value="Submit">
</form>

<textarea name="comment" wrap="hard" rows="6" cols="50"></textarea>

<textarea id="dynamicTextarea" rows="5" cols="30">
Type your text here...
</textarea>

<script>
  document.getElementById("dynamicTextarea").wrap = "hard";
</script>

♿ Accessibility

• Always label textareas — Use <label for="..."> or aria-label; wrap does not describe purpose.
• Do not rely on cols alone — Use CSS for readable width on all screen sizes.
• Resize thoughtfully — CSS resize can help users who need a larger input area.
• Instructions in visible text — If hard wrap affects expected format, explain it near the field.
• Keyboard users — Enter still inserts line breaks in both soft and hard modes.

💡 Best Practices

• Consider content type and user experience when choosing between soft and hard.
• Test forms across browsers if exact newline behavior matters.
• Use wrap when you need to control text presentation in multiline form fields at submit time.

🎉 Conclusion

The wrap attribute gives you control over newline handling in textarea form submission. For everyday forms, soft is usually enough. Choose hard when the server expects plain text with line breaks at fixed wrap columns.

Combine wrap with proper labels, CSS layout, and validation to build clear, accessible multiline inputs.