HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLのwrap属性とは？textareaのテキスト折り返し設定を解説

wrap属性とは

HTMLのwrap属性は、<textarea>要素内のテキストを、フォーム送信時にどのように折り返すかを定義する属性です。画面上での見た目だけでなく、サーバーへ送信されるデータに改行コードを含めるかどうかを制御できる点が特徴です。

指定できる値

  • soft：画面上では自動的に折り返して表示されますが、送信されるテキストには改行コードが挿入されません（デフォルト値）。
  • hard：画面上の折り返し位置に基づいて、フォーム送信時に改行コードが挿入されます。この値を使用する場合はcols属性の指定が必須です。

構文

wrap属性の基本的な書き方は以下のとおりです。

<textarea wrap="hard | soft"></textarea>

サンプルコード

次の例では、wrap属性に「soft」を指定したテキストエリアを作成しています。「wrap属性の値を表示」ボタンをクリックすると、現在設定されているwrap属性の値が画面に表示されます。

<!DOCTYPE html>
<html>
<style>
    body {
        color: #000;
        height: 100vh;
    }
    .btn {
        background: #db133a;
        border: none;
        height: 2rem;
        border-radius: 2px;
        width: 40%;
        display: block;
        color: #fff;
        outline: none;
        cursor: pointer;
        margin: 1rem 0;
    }
    .show {
        font-size: 1.5rem;
        margin: 1rem 0;
    }
</style>
<body>
<h1>HTML wrap属性 デモ</h1>
<form action='' method="post">
<textarea rows="5" cols="28" wrap="soft">こんにちは！これはダミーテキストを含むテキストエリア要素です。</textarea>
<input type="submit" class='btn' value="フォームを送信">
</form>
<button onclick="set()" class="btn">wrap属性の値を表示</button>
<div class="show"></div>
<script>
    function set() {
        document.querySelector('.show').innerHTML = "wrap属性の値は " + document.querySelector("textarea").wrap;
    }
</script>
</body>
</html>

実行結果

HTMLのwrap属性とは？textareaのテキスト折り返し設定を解説

「wrap属性の値を表示」ボタンをクリックすると、textarea要素のwrap属性の値が画面に表示されます。

HTMLのwrap属性とは？textareaのテキスト折り返し設定を解説

まとめ

wrap属性を使うことで、テキストエリアのテキスト折り返し方法を柔軟に制御できます。通常はデフォルトの「soft」で十分ですが、ユーザーが入力した通りの改行位置をサーバー側でも保持したい場合には「hard」を選択しましょう。その際は、cols属性の指定を忘れないようにしてください。

  1. HTML pattern属性とは？使い方とサンプルコードをわかりやすく解説

    HTMLのpattern属性は、<input>要素に入力された値が、あらかじめ指定した正規表現に一致するかどうかを検証するための属性です。この属性を活用すれば、JavaScriptを書かなくてもブラウザ側で手軽に入力チェック（バリデーション）を実装でき、フォームの利便性を高めることができます。pattern属性を指定した入力欄に正規表現と一致しない値が入力された場合、フォーム送信時にエラーメッセージが表示され、送信がブロックされます。利用できるのはtext・search・tel・url・email・passwordなどのテキスト系入力タイプです。構文pattern属性の基本構文は次

  2. HTMLのdraggable属性とは？使い方とサンプルコードを解説

    HTMLのdraggable属性とはHTML DOMのdraggable属性は、要素がドラッグ可能かどうかを示す真偽値（boolean）を取得・設定するための属性です。この属性を活用することで、ドラッグ＆ドロップ操作に対応したインタラクティブなWebページを簡単に実装できます。注意：リンク（<a>タグ）や画像（<img>タグ）は、デフォルトでドラッグ可能に設定されています。draggable属性に指定できる値true … 要素をドラッグ可能にするfalse … 要素をドラッグ不可にするauto … ブラウザのデフォルト動作に従うHTML draggable属性の使用例以