The Textarea Element - HTML: HyperText Markup Language | MDN

Trang chủ » Html5 Textarea Example » The Textarea Element - HTML: HyperText Markup Language | MDN

Có thể bạn quan tâm

  1. References
  2. HTML
  3. Elements
  4. <textarea>
Article Actions
  • English (US)
    • Remember language
    • Deutsch
    • Español
    • Français
    • 日本語
    • Português (do Brasil)
    • 中文 (简体)
  • Try it
  • Attributes
  • Styling with CSS
  • Examples
  • Technical summary
  • Specifications
  • Browser compatibility
  • See also
  1. HTML
  2. Beginner's tutorials
    1. Your first website: Creating the content
    2. Structuring content with HTML
      1. Basic HTML syntax
      2. What's in the head? Webpage metadata
      3. Headings and paragraphs in HTML
      4. Emphasis and importance
      5. Lists
      6. Structuring documents
      7. Advanced text features
      8. Creating links
      9. Challenge: Marking up a letter
      10. Challenge: Structuring a page of content
      11. HTML images
      12. HTML video and audio
      13. Challenge: Mozilla splash page
      14. HTML table basics
      15. HTML table accessibility
      16. Challenge: Structuring a planet data table
      17. Forms and buttons in HTML
      18. Debugging HTML
  3. Guides
    1. Content categories
    2. Block-level elements
    3. Inline elements
    4. Quirks Mode and Standards Mode
    5. Date and time formats used in HTML
    6. Constraint validation
    7. Microdata
    8. Microformats
    9. Viewport meta tag
    10. Allowing cross-origin use of images and canvas
  4. References
  5. HTML elements
    1. <a>
    2. <abbr>
    3. <acronym> Deprecated
    4. <address>
    5. <area>
    6. <article>
    7. <aside>
    8. <audio>
    9. <b>
    10. <base>
    11. <bdi>
    12. <bdo>
    13. <big> Deprecated
    14. <blockquote>
    15. <body>
    16. <br>
    17. <button>
    18. <canvas>
    19. <caption>
    20. <center> Deprecated
    21. <cite>
    22. <code>
    23. <col>
    24. <colgroup>
    25. <data>
    26. <datalist>
    27. <dd>
    28. <del>
    29. <details>
    30. <dfn>
    31. <dialog>
    32. <dir> Deprecated
    33. <div>
    34. <dl>
    35. <dt>
    36. <em>
    37. <embed>
    38. <fencedframe> Experimental
    39. <fieldset>
    40. <figcaption>
    41. <figure>
    42. <font> Deprecated
    43. <footer>
    44. <form>
    45. <frame> Deprecated
    46. <frameset> Deprecated
    47. <h1>
    48. <head>
    49. <header>
    50. <hgroup>
    51. <hr>
    52. <html>
    53. <i>
    54. <iframe>
    55. <img>
    56. <input>
    57. <ins>
    58. <kbd>
    59. <label>
    60. <legend>
    61. <li>
    62. <link>
    63. <main>
    64. <map>
    65. <mark>
    66. <marquee> Deprecated
    67. <menu>
    68. <meta>
    69. <meter>
    70. <nav>
    71. <nobr> Deprecated
    72. <noembed> Deprecated
    73. <noframes> Deprecated
    74. <noscript>
    75. <object>
    76. <ol>
    77. <optgroup>
    78. <option>
    79. <output>
    80. <p>
    81. <param> Deprecated
    82. <picture>
    83. <plaintext> Deprecated
    84. <portal> Experimental
    85. <pre>
    86. <progress>
    87. <q>
    88. <rb> Deprecated
    89. <rp>
    90. <rt>
    91. <rtc> Deprecated
    92. <ruby>
    93. <s>
    94. <samp>
    95. <script>
    96. <search>
    97. <section>
    98. <select>
    99. <slot>
    100. <small>
    101. <source>
    102. <span>
    103. <strike> Deprecated
    104. <strong>
    105. <style>
    106. <sub>
    107. <summary>
    108. <sup>
    109. <table>
    110. <tbody>
    111. <td>
    112. <template>
    113. <textarea>
    114. <tfoot>
    115. <th>
    116. <thead>
    117. <time>
    118. <title>
    119. <tr>
    120. <track>
    121. <tt> Deprecated
    122. <u>
    123. <ul>
    124. <var>
    125. <video>
    126. <wbr>
    127. <xmp> Deprecated
  6. Global attributes
    1. accesskey
    2. anchor Experimental Non-standard
    3. autocapitalize
    4. autocorrect Experimental
    5. autofocus
    6. class
    7. contenteditable
    8. data-*
    9. dir
    10. draggable
    11. enterkeyhint
    12. exportparts
    13. hidden
    14. id
    15. inert
    16. inputmode
    17. is
    18. itemid
    19. itemprop
    20. itemref
    21. itemscope
    22. itemtype
    23. lang
    24. nonce
    25. part
    26. popover
    27. slot
    28. spellcheck
    29. style
    30. tabindex
    31. title
    32. translate
    33. virtualkeyboardpolicy Experimental
    34. writingsuggestions
  7. Attributes
    1. accept
    2. autocomplete
    3. capture
    4. crossorigin
    5. dirname
    6. disabled
    7. elementtiming
    8. for
    9. max
    10. maxlength
    11. min
    12. minlength
    13. multiple
    14. pattern
    15. placeholder
    16. readonly
    17. rel
    18. required
    19. size
    20. step
  8. <input> types
    1. <input type="button">
    2. <input type="checkbox">
    3. <input type="color">
    4. <input type="date">
    5. <input type="datetime-local">
    6. <input type="email">
    7. <input type="file">
    8. <input type="hidden">
    9. <input type="image">
    10. <input type="month">
    11. <input type="number">
    12. <input type="password">
    13. <input type="radio">
    14. <input type="range">
    15. <input type="reset">
    16. <input type="search">
    17. <input type="submit">
    18. <input type="tel">
    19. <input type="text">
    20. <input type="time">
    21. <input type="url">
    22. <input type="week">
  • Try it
  • Attributes
  • Styling with CSS
  • Examples
  • Technical summary
  • Specifications
  • Browser compatibility
  • See also

The <textarea> HTML element represents a multi-line plain-text editing control, useful when you want to allow users to enter a sizeable amount of free-form text, for example a comment on a review or feedback form.

Try it

The above example demonstrates a number of features of <textarea>:

  • An id attribute to allow the <textarea> to be associated with a <label> element for accessibility purposes
  • A name attribute to set the name of the associated data point submitted to the server when the form is submitted.
  • rows and cols attributes to allow you to specify an exact size for the <textarea> to take. Setting these is a good idea for consistency, as browser defaults can differ.
  • The <textarea> element specifies its content differently in HTML and JavaScript contexts:
    • In HTML, the initial content of a <textarea> is specified between its opening and closing tags, not as a value attribute.
    • In JavaScript, <textarea> elements have a value property that can be used to get or set the current content, and defaultValue to get and set its initial value (equivalent to accessing the HTML element's text content).

The <textarea> element also accepts several attributes common to form <input>s, such as autocapitalize, autocomplete, autofocus, disabled, placeholder, readonly, and required.

Attributes

This element includes the global attributes.

autocapitalize

Controls whether inputted text is automatically capitalized and, if so, in what manner.

autocomplete

Controls whether entered text can be automatically completed by the browser. Possible values are:

  • off: The user must explicitly enter a value into this field for every use, or the document provides its own auto-completion method; the browser does not automatically complete the entry.
  • on: The browser can automatically complete the value based on values that the user has entered during previous uses.
  • <token-list>: An ordered set of space-separated autofill detail tokens, optionally preceded by a sectioning token, a billing or shipping grouping token, and/or a token identifying the type of recipient.

<textarea> elements that don't specify the autocomplete attribute inherit the autocomplete on or off status set on the <textarea>'s form owner. The form owner is either the <form> element that this <textarea> element is a descendant of or the form element whose id is specified by the form attribute of the input element. For more information, see the autocomplete attribute in <form>.

autocorrect

Controls whether automatic spelling correction and processing of text is enabled while the user is editing this textarea. Permitted values are:

on

Enable automatic spelling correction and text substitutions.

off

Disable automatic spelling correction and text substitutions.

autofocus

This Boolean attribute lets you specify that a form control should have input focus when the page loads. Only one form-associated element in a document can have this attribute specified.

cols

The visible width of the text control, in average character widths. If it is specified, it must be a positive integer. If it is not specified, the default value is 20.

dirname

This attribute is used to indicate the text directionality of the element contents. For more information, see the dirname attribute.

disabled

This Boolean attribute indicates that the user cannot interact with the control. If this attribute is not specified, the control inherits its setting from the containing element, for example <fieldset>; if there is no containing element when the disabled attribute is set, the control is enabled.

form

The form element that the <textarea> element is associated with (its "form owner"). The value of the attribute must be the id of a form element in the same document. If this attribute is not specified, the <textarea> element must be a descendant of a form element. This attribute enables you to place <textarea> elements anywhere within a document, not just as descendants of form elements.

maxlength

The maximum string length (measured in UTF-16 code units) that the user can enter. If this value isn't specified, the user can enter an unlimited number of characters.

minlength

The minimum string length (measured in UTF-16 code units) required that the user should enter.

name

The name of the control.

placeholder

A hint to the user of what can be entered in the control. Carriage returns or line-feeds within the placeholder text must be treated as line breaks when rendering the hint.

Note: Placeholders should only be used to show an example of the type of data that should be entered into a form; they are not a substitute for a proper <label> element tied to the input. See <input> labels for a full explanation.

readonly

This Boolean attribute indicates that the user cannot modify the value of the control. Unlike the disabled attribute, the readonly attribute does not prevent the user from clicking or selecting in the control. The value of a read-only control is still submitted with the form.

required

This attribute specifies that the user must fill in a value before submitting a form.

rows

The number of visible text lines for the control. If it is specified, it must be a positive integer. If it is not specified, the default value is 2.

spellcheck

Specifies whether the <textarea> is subject to spell-checking by the underlying browser/OS. The value can be:

  • true: Indicates that the element needs to have its spelling and grammar checked.
  • default : Indicates that the element is to act according to a default behavior, possibly based on the parent element's own spellcheck value.
  • false : Indicates that the element should not be spell-checked.
wrap

Indicates how the control should wrap the value for form submission. Possible values are:

  • hard: The browser automatically inserts line breaks (CR+LF) so that each line is no longer than the width of the control; the cols attribute must be specified for this to take effect
  • soft: The browser ensures that all line breaks in the entered value are a CR+LF pair, but no additional line breaks are added to the value.
  • off Non-standard : Like soft but changes appearance to white-space: pre so line segments exceeding cols are not wrapped and the <textarea> becomes horizontally scrollable.

If this attribute is not specified, soft is its default value.

Styling with CSS

<textarea> is a replaced element — it has intrinsic dimensions, like a raster image. By default, its display value is inline-block. Compared to other form elements it is relatively easy to style, with its box model, fonts, color scheme, etc. being easily manipulable using regular CSS.

Styling HTML forms provides some useful tips on styling <textarea>s.

Baseline inconsistency

The HTML specification doesn't define where the baseline of a <textarea> is, so different browsers set it to different positions. For Gecko, the <textarea> baseline is set on the baseline of the first line of the textarea, on another browser it may be set on the bottom of the <textarea> box. Don't use vertical-align: baseline on it; the behavior is unpredictable.

Controlling whether a textarea is resizable

In most browsers, <textarea>s are resizable — you'll notice the drag handle in the right-hand corner, which can be used to alter the size of the element on the page. This is controlled by the resize CSS property — resizing is enabled by default, but you can explicitly disable it using a resize value of none:

csstextarea { resize: none; }

Styling valid and invalid values

Valid and invalid values of a <textarea> element (e.g. those within, and outside the bounds set by minlength, maxlength, or required) can be highlighted using the :valid and :invalid pseudo-classes. For example, to give your textarea a different border depending on whether it is valid or invalid:

csstextarea:invalid { border: 2px dashed red; } textarea:valid { border: 2px solid lime; }

Examples

Basic example

The following example shows a textarea with a set number of rows and columns, some default content, and CSS styles that prevent users from resizing the element more than 500px wide and 130px high:

html<textarea name="textarea" rows="5" cols="15">Write something here</textarea> csstextarea { max-height: 130px; max-width: 500px; }

Result

Example using "minlength" and "maxlength"

This example has a minimum and maximum number of characters — of 10 and 20 respectively. Try it and see.

html<textarea name="textarea" rows="5" cols="30" minlength="10" maxlength="20"> Write something here… </textarea> csstextarea { max-height: 130px; max-width: 500px; }

Result

Note that minlength doesn't stop the user from removing characters so that the number entered goes past the minimum, but it does make the value entered into the <textarea> invalid. Also note that even if you have a minlength value set (3, for example), an empty <textarea> is still considered valid unless you also have the required attribute set.

Example using "placeholder"

This example has a placeholder set. Notice how it disappears when you start typing into the box.

html<textarea name="textarea" rows="5" cols="30" placeholder="Comment text."></textarea> csstextarea { max-height: 130px; max-width: 500px; }

Result

Note: Placeholders should only be used to show an example of the type of data that should be entered into a form; they are not a substitute for a proper <label> element tied to the input. See <input> labels for a full explanation.

Disabled and readonly text areas

This example shows two <textarea>s — one is readonly and one is disabled. You cannot edit the contents of either element, but the readonly element is focusable and its value is submitted in forms. The disabled element's value is not submitted and it's not focusable.

html<textarea name="textarea" rows="5" cols="30" readonly> I am a read-only textarea. </textarea> <textarea name="textarea" rows="5" cols="30" disabled> I am a disabled textarea. </textarea> csstextarea { display: block; resize: horizontal; max-width: 500px; }

Result

Technical summary

Content categories Flow content, phrasing content, Interactive content, listed, labelable, resettable, and submittable form-associated element.
Permitted content Text
Tag omission None, both the starting and ending tag are mandatory.
Permitted parents Any element that accepts phrasing content.
Implicit ARIA role textbox
Permitted ARIA roles No role permitted
DOM interface HTMLTextAreaElement

Specifications

Specification
HTML Standard # the-textarea-element

Browser compatibility

BCD tables only load in the browser

See also

  • Other form-related elements:
    • <form>
    • <button>
    • <datalist>
    • <legend>
    • <label>
    • <select>
    • <optgroup>
    • <option>
    • <input>
    • <fieldset>
    • <output>
    • <progress>
    • <meter>

Help improve MDN

Was this page helpful to you?YesNoLearn how to contribute.

This page was last modified on Dec 19, 2024 by MDN contributors.

View this page on GitHub • Report a problem with this content

Từ khóa » Html5 Textarea Example