---
layout: single
elementName: textarea
---

<section id="textarea" class="element">
  <header class="element-header">
    <nav class="element-links">
        <span>
          Type: <strong>inline</strong>
        </span>
      <span>
        Self-closing:
        <strong>
            No
        </strong>
      </span>
      <a class="element-links-direct" href="{{site.url}}/element/textarea/" data-element-name="textarea" data-tooltip="Single page for this element">Permalink</a>
      <a class="element-share" data-tooltip="Share on Twitter or Facebook" data-element-name="textarea">Share</a>
      <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/HTML/Element/textarea" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a>
    </nav>
    <h2 class="element-name">
      <a href="#textarea">
        <span>#</span>
        textarea
      </a>
    </h2>
    <div class="element-description">
      <p>Defines a <strong>multi-line text control</strong> within a web form.</p>

    </div>
  </header>


    <article id="textarea-name" class="attribute attribute--required">
      <header class="attribute-header">
        <h3 class="attribute-name">
          <code class="tag" data-tooltip="Click to copy" data-clipboard-text="name">
            name
          </code>
        </h3>
        <div class="attribute-description">
          <p>Defines the unique identifier for that textarea within the form. It allows the server to access each textarea&#39;s value when submitted.</p>

            <strong class="attribute-is-required">Required.</strong>
        </div>
      </header>

      <div class="attribute-values">
          <article id="textarea-name-message" class="value">
            <header class="value-header">
                <h4 class="value-name">
                  <code class="tag" data-tooltip="Click to copy name=&quot;message&quot;" data-clipboard-text="name=&quot;message&quot;">
                      "message"
                  </code>
                </h4>
              <div class="value-description">
                <p>The name value must be unique within the context of a <code>&lt;form&gt;</code> container.</p>
<p>It can only contain alphanumeric characters <code>a-z</code> <code>A-Z</code> <code>0-9</code> and some special characters like <code>-</code> <code>_</code>… but no space.</p>

              </div>
            </header>
            <aside class="value-preview">
              <div class="value-output"><textarea  columns="40" rows="10" placeholder="e.g. Hello my name is Alex" name="message"></textarea></div>
            </aside>
          </article>
      </div>
    </article>
    <article id="textarea-autocomplete" class="attribute">
      <header class="attribute-header">
        <h3 class="attribute-name">
          <code class="tag" data-tooltip="Click to copy" data-clipboard-text="autocomplete">
            autocomplete
          </code>
        </h3>
        <div class="attribute-description">
          <p>Determines if the browser can autocomplete the textarea.</p>

        </div>
      </header>

      <div class="attribute-values">
          <article id="textarea-autocomplete-off" class="value">
            <header class="value-header">
                <h4 class="value-name">
                  <code class="tag" data-tooltip="Click to copy autocomplete=&quot;off&quot;" data-clipboard-text="autocomplete=&quot;off&quot;">
                      "off"
                  </code>
                </h4>
              <div class="value-description">
                <p>The browser will <strong>disable</strong> autocomplete functions..</p>

              </div>
            </header>
            <aside class="value-preview">
              <div class="value-output"><textarea  columns="40" rows="10" placeholder="e.g. Hello my name is Alex" name="message" autocomplete="off"></textarea></div>
            </aside>
          </article>
          <article id="textarea-autocomplete-on" class="value">
            <header class="value-header">
                <h4 class="value-name">
                  <code class="tag" data-tooltip="Click to copy autocomplete=&quot;on&quot;" data-clipboard-text="autocomplete=&quot;on&quot;">
                      "on"
                  </code>
                </h4>
              <div class="value-description">
                <p>The browser will <strong>enable</strong> autocomplete functions.</p>

              </div>
            </header>
            <aside class="value-preview">
              <div class="value-output"><textarea  columns="40" rows="10" placeholder="e.g. Hello my name is Alex" name="message" autocomplete="on"></textarea></div>
            </aside>
          </article>
      </div>
    </article>
    <article id="textarea-minlength" class="attribute">
      <header class="attribute-header">
        <h3 class="attribute-name">
          <code class="tag" data-tooltip="Click to copy" data-clipboard-text="minlength">
            minlength
          </code>
        </h3>
        <div class="attribute-description">
          <p>Defines the minimum amount of characters the textarea required to be valid.</p>

        </div>
      </header>

      <div class="attribute-values">
          <article id="textarea-minlength-15" class="value">
            <header class="value-header">
                <h4 class="value-name">
                  <code class="tag" data-tooltip="Click to copy minlength=&quot;15&quot;" data-clipboard-text="minlength=&quot;15&quot;">
                      "15"
                  </code>
                </h4>
              <div class="value-description">
                <p>You can use <strong>integers</strong>.</p>

              </div>
            </header>
            <aside class="value-preview">
              <div class="value-output"><textarea  columns="40" rows="10" placeholder="e.g. Hello my name is Alex" name="message" autocomplete="on" minlength="15"></textarea></div>
            </aside>
          </article>
      </div>
    </article>
    <article id="textarea-maxlength" class="attribute">
      <header class="attribute-header">
        <h3 class="attribute-name">
          <code class="tag" data-tooltip="Click to copy" data-clipboard-text="maxlength">
            maxlength
          </code>
        </h3>
        <div class="attribute-description">
          <p>Defines the maxlength amount of characters allowed.</p>

        </div>
      </header>

      <div class="attribute-values">
          <article id="textarea-maxlength-140" class="value">
            <header class="value-header">
                <h4 class="value-name">
                  <code class="tag" data-tooltip="Click to copy maxlength=&quot;140&quot;" data-clipboard-text="maxlength=&quot;140&quot;">
                      "140"
                  </code>
                </h4>
              <div class="value-description">
                <p>You can use <strong>integers</strong>.</p>

              </div>
            </header>
            <aside class="value-preview">
              <div class="value-output"><textarea  columns="40" rows="10" placeholder="e.g. Hello my name is Alex" name="message" autocomplete="on" minlength="15" maxlength="140"></textarea></div>
            </aside>
          </article>
      </div>
    </article>
    <article id="textarea-placeholder" class="attribute">
      <header class="attribute-header">
        <h3 class="attribute-name">
          <code class="tag" data-tooltip="Click to copy" data-clipboard-text="placeholder">
            placeholder
          </code>
        </h3>
        <div class="attribute-description">
          <p>Defines a non-selectable placeholder text that only appears when the textarea is empty.</p>

        </div>
      </header>

      <div class="attribute-values">
          <article id="textarea-placeholder-eg-hello-my-name-is-alex" class="value">
            <header class="value-header">
                <h4 class="value-name">
                  <code class="tag" data-tooltip="Click to copy placeholder=&quot;e.g. Hello my name is Alex&quot;" data-clipboard-text="placeholder=&quot;e.g. Hello my name is Alex&quot;">
                      "e.g. Hello my name is Alex"
                  </code>
                </h4>
              <div class="value-description">
                <p>You can hint at the format expected for the textarea.</p>

              </div>
            </header>
            <aside class="value-preview">
              <div class="value-output"><textarea  columns="40" rows="10" placeholder="e.g. Hello my name is Alex" name="message" autocomplete="on" minlength="15" maxlength="140"></textarea></div>
            </aside>
          </article>
      </div>
    </article>
    <article id="textarea-cols" class="attribute">
      <header class="attribute-header">
        <h3 class="attribute-name">
          <code class="tag" data-tooltip="Click to copy" data-clipboard-text="cols">
            cols
          </code>
        </h3>
        <div class="attribute-description">
          <p>Defines the number of columns.</p>

        </div>
      </header>

      <div class="attribute-values">
          <article id="textarea-cols-40" class="value">
            <header class="value-header">
                <h4 class="value-name">
                  <code class="tag" data-tooltip="Click to copy cols=&quot;40&quot;" data-clipboard-text="cols=&quot;40&quot;">
                      "40"
                  </code>
                </h4>
              <div class="value-description">
                <p>You can use <strong>integers</strong>.</p>

              </div>
            </header>
            <aside class="value-preview">
              <div class="value-output"><textarea  columns="40" rows="10" placeholder="e.g. Hello my name is Alex" name="message" autocomplete="on" minlength="15" maxlength="140" cols="40"></textarea></div>
            </aside>
          </article>
      </div>
    </article>
    <article id="textarea-rows" class="attribute">
      <header class="attribute-header">
        <h3 class="attribute-name">
          <code class="tag" data-tooltip="Click to copy" data-clipboard-text="rows">
            rows
          </code>
        </h3>
        <div class="attribute-description">
          <p>Defines the number of rows.</p>

        </div>
      </header>

      <div class="attribute-values">
          <article id="textarea-rows-5" class="value">
            <header class="value-header">
                <h4 class="value-name">
                  <code class="tag" data-tooltip="Click to copy rows=&quot;5&quot;" data-clipboard-text="rows=&quot;5&quot;">
                      "5"
                  </code>
                </h4>
              <div class="value-description">
                <p>You can use <strong>integers</strong>.</p>

              </div>
            </header>
            <aside class="value-preview">
              <div class="value-output"><textarea  columns="40" rows="5" placeholder="e.g. Hello my name is Alex" name="message" autocomplete="on" minlength="15" maxlength="140" cols="40"></textarea></div>
            </aside>
          </article>
      </div>
    </article>
    <article id="textarea-wrap" class="attribute">
      <header class="attribute-header">
        <h3 class="attribute-name">
          <code class="tag" data-tooltip="Click to copy" data-clipboard-text="wrap">
            wrap
          </code>
        </h3>
        <div class="attribute-description">
          <p>Defines how the text should be wrapped.</p>

        </div>
      </header>

      <div class="attribute-values">
          <article id="textarea-wrap-hard" class="value">
            <header class="value-header">
                <h4 class="value-name">
                  <code class="tag" data-tooltip="Click to copy wrap=&quot;hard&quot;" data-clipboard-text="wrap=&quot;hard&quot;">
                      "hard"
                  </code>
                </h4>
              <div class="value-description">
                <p>The text will always be wrapped depending on the <code>cols</code> value.</p>

              </div>
            </header>
            <aside class="value-preview">
              <div class="value-output"><textarea  columns="40" rows="5" placeholder="e.g. Hello my name is Alex" name="message" autocomplete="on" minlength="15" maxlength="140" cols="40" wrap="hard"></textarea></div>
            </aside>
          </article>
          <article id="textarea-wrap-soft" class="value">
            <header class="value-header">
                <h4 class="value-name">
                  <code class="tag" data-tooltip="Click to copy wrap=&quot;soft&quot;" data-clipboard-text="wrap=&quot;soft&quot;">
                      "soft"
                  </code>
                </h4>
              <div class="value-description">
                <p>The text will only break when needed.</p>

              </div>
            </header>
            <aside class="value-preview">
              <div class="value-output"><textarea  columns="40" rows="5" placeholder="e.g. Hello my name is Alex" name="message" autocomplete="on" minlength="15" maxlength="140" cols="40" wrap="soft"></textarea></div>
            </aside>
          </article>
      </div>
    </article>
    <article id="textarea-disabled" class="attribute attribute--novalue">
      <header class="attribute-header">
        <h3 class="attribute-name">
          <code class="tag" data-tooltip="Click to copy" data-clipboard-text="disabled">
            disabled
          </code>
        </h3>
        <div class="attribute-description">
          <p>Disables the textarea.</p>

            <strong class="attribute-is-novalue">No value required.</strong>
        </div>
      </header>

      <div class="attribute-values">
          <article id="textarea-disabled-undefined" class="value">
            <header class="value-header">
              <div class="value-description">
                
              </div>
            </header>
            <aside class="value-preview">
              <div class="value-output"><textarea  columns="40" rows="5" placeholder="e.g. Hello my name is Alex" name="message" autocomplete="on" minlength="15" maxlength="140" cols="40" wrap="soft" disabled></textarea></div>
            </aside>
          </article>
      </div>
    </article>
    <article id="textarea-required" class="attribute attribute--novalue">
      <header class="attribute-header">
        <h3 class="attribute-name">
          <code class="tag" data-tooltip="Click to copy" data-clipboard-text="required">
            required
          </code>
        </h3>
        <div class="attribute-description">
          <p>Tells the browser that this textarea is <strong>required</strong>. Leaving it empty will show a warning.</p>

            <strong class="attribute-is-novalue">No value required.</strong>
        </div>
      </header>

      <div class="attribute-values">
          <article id="textarea-required-undefined" class="value">
            <header class="value-header">
              <div class="value-description">
                
              </div>
            </header>
            <aside class="value-preview">
              <div class="value-output"><textarea  columns="40" rows="5" placeholder="e.g. Hello my name is Alex" name="message" autocomplete="on" minlength="15" maxlength="140" cols="40" wrap="soft" disabled required></textarea></div>
            </aside>
          </article>
      </div>
    </article>
    <article id="textarea-autofocus" class="attribute attribute--novalue">
      <header class="attribute-header">
        <h3 class="attribute-name">
          <code class="tag" data-tooltip="Click to copy" data-clipboard-text="autofocus">
            autofocus
          </code>
        </h3>
        <div class="attribute-description">
          <p>Sets focus on the textarea when the web page loads.</p>

            <strong class="attribute-is-novalue">No value required.</strong>
        </div>
      </header>

      <div class="attribute-values">
          <article id="textarea-autofocus-undefined" class="value">
            <header class="value-header">
              <div class="value-description">
                
              </div>
            </header>
            <aside class="value-preview">
              <div class="value-output"><textarea  columns="40" rows="5" placeholder="e.g. Hello my name is Alex" name="message" autocomplete="on" minlength="15" maxlength="140" cols="40" wrap="soft" disabled required></textarea></div>
            </aside>
          </article>
      </div>
    </article>
    <article id="textarea-readonly" class="attribute attribute--novalue">
      <header class="attribute-header">
        <h3 class="attribute-name">
          <code class="tag" data-tooltip="Click to copy" data-clipboard-text="readonly">
            readonly
          </code>
        </h3>
        <div class="attribute-description">
          <p>Turns the textarea into a read-only element.</p>

            <strong class="attribute-is-novalue">No value required.</strong>
        </div>
      </header>

      <div class="attribute-values">
          <article id="textarea-readonly-undefined" class="value">
            <header class="value-header">
              <div class="value-description">
                
              </div>
            </header>
            <aside class="value-preview">
              <div class="value-output"><textarea  columns="40" rows="5" placeholder="e.g. Hello my name is Alex" name="message" autocomplete="on" minlength="15" maxlength="140" cols="40" wrap="soft" disabled required readonly></textarea></div>
            </aside>
          </article>
      </div>
    </article>
    <article id="textarea-spellcheck" class="attribute attribute--novalue">
      <header class="attribute-header">
        <h3 class="attribute-name">
          <code class="tag" data-tooltip="Click to copy" data-clipboard-text="spellcheck">
            spellcheck
          </code>
        </h3>
        <div class="attribute-description">
          <p>Enables the browser spell checker.</p>

            <strong class="attribute-is-novalue">No value required.</strong>
        </div>
      </header>

      <div class="attribute-values">
          <article id="textarea-spellcheck-undefined" class="value">
            <header class="value-header">
              <div class="value-description">
                
              </div>
            </header>
            <aside class="value-preview">
              <div class="value-output"><textarea  columns="40" rows="5" placeholder="e.g. Hello my name is Alex" name="message" autocomplete="on" minlength="15" maxlength="140" cols="40" wrap="soft" disabled required readonly spellcheck></textarea></div>
            </aside>
          </article>
      </div>
    </article>
</section>
