7 Ways to Enhance the HTML TextArea Element For A Richer User Experience
Last Updated -
In this article I review 7 ways you can style and enhance the Textarea element to add more value to your forms.
You will learn how to apply different formats, control state, add placeholder text and make it comply with material design guidelines.
An HTML textarea is a multi-line input field designed to collect larger, free-form text from a user. If you have every completed a form that required an opened ended answer then most likely you used a textarea.
Common examples include comments, descriptions and content management system administration interfaces like Wordpress.
Textareas are added to HTML documents using the textarea tag. Any text placed between the opening and closing textarea tags will be rendered inside the textarea element as the "default" text.
Most forms are composed of a parent form element, a handful of input elements and maybe a textarea or two. Single line input fields can have their type set to different types beside text, like email, urls or phone numbers. When you need to collect more than one line of text and or large free-form text, the textarea is the form element you need.
TextArea HTML Attributes or Properties
There are a collection of attributes that can be applied to control a textarea's behavior. The standard input attributes, like name, placeholder, tabindex and id are available.
But you should almost always define the cols (columns) and rows values to control the textarea's rendered size. This does not limit the number of words or characters you can enter, just the physical dimensions.
This is a list of textarea attributes you need to be aware of:
- form : Specifies one or more forms
- maxlength: A number that specifies the maximum number of characters in textarea
- placeholder: Specifies a short hint of the value in textarea
- readonly: Sets the input control to read-only. It won't allow the user to change the value. The control however, can receive focus and are included when tabbing through the form controls
- rows: Specifies the height of the textarea based on the number of visible lines of text. If there's more text than this allows, users can scroll using the textarea's scrollbars
- cols: Specifies the height of the textarea based on the number of visible lines of text. If there's more text than this allows, users can scroll using the textarea's scrollbars
- wrap: Specifies the text to be wrapped in textarea
The wrap attribute refers to how the user input reacts when it reaches the end of each row in the text field. Wrapping can be defined using one of three values:
- Soft forces the words to wrap once inside the textarea but once the form is submitted, the words will no longer appear as such, and line breaks and spacing are not maintained
- Hard wraps the words inside the text box and places line breaks at the end of each line so that when the form is submitted the text will transfer as it appears in the field, including line breaks and spacing
- Off sets a textarea to ignore all wrapping and places the text into one ongoing line
Read-Only
Setting a "yes" or "no" value for the readonly attribute determines whether or not a viewer has permission to manipulate the text inside the text field.
This read-only behavior allows a web surfer to see and highlight the text inside the element, but he or she cannot alter it in any way. When highlighted, the user may also Copy (Ctrl + C on a PC, Ctrl-Click on a Mac) the text to local clipboard and paste it anywhere he/she pleases.
Disabled
Disabling the textarea altogether prevents the surfer from highlighting, copying, or modifying the field in any way. To accomplish this, set the disabled property to "yes".
Keep in mind that just because users are unable to copy from the screen directly doesn't prevent them from taking a screen capture or extracting the data from the source code. Disabling the textarea offers no security whatsoever.
Textarea Placeholder Text
You could pre-fill text in a textarea to give users an example or description of how to go about filling out the text area field, but this will require script to 'clean' the text when the input is given focus. Instead you should use the placeholder attribute to provide instructions or hints.
Be sure to account for this when styling the textarea's label. In my examples I am overlaying the label at the top of the textarea, so the label overlaps the placeholder text.
I solved this problem by positioning the label above the textarea when the placeholder is applied. To make it simple I added a 'placeholder' class to the label to force the positioning. I used the same rule as when focus is placed in the textarea.
.form-row label.placeholder, .form-row label.active { transform: translateY(-140%); font-size: 0.8em; } Using the Change Event to Validate and Update the Page
The JavaScript change event triggers as the user types or loses focus. You can bind to this event to trigger real-time validation or other changes to the UI.
The input event is similar to change but is triggered every time the value of an element changes even while it still is in focus.
If you need to perform some sort of validation or UI change based on when the textarea has focus or loses focus you need to bind to the focus or blur events. These are fairly common input field events. I used them to toggle the active state of the textarea's label.
elem.addEventListener("focus", function (e) { e.target.label.classList.toggle("active"); }); elem.addEventListener("blur", function (e) { e.target.label.classList.toggle("active"); }); Textarea validation is typically simple because the content is typically free-form. Most of the type you would just check to make sure the field has text when it is required. You may also need to verify a minimal number of characters or words are supplied. Maybe it needs to be less than a maximum number of characters or words.
There is the maxlength attribute to limit the number of characters, but where is the fun in that?
Let's use the 'change' event to verify the number of words is at least 10.
min10.addEventListener("input", function (e) { var value = e.target.value; if (value.match(/\S+/g).length > 10) { e.target.classList.add("valid"); e.target.classList.remove("invalid"); } else { e.target.classList.remove("valid"); e.target.classList.add("invalid"); } }); Applying 'Material Design' to the TextArea and Label
I am a fan of material design, it is simple and clean. So I sort of 'borrowed' some styles from MD Bootstrap to style the textareas and their labels.
The textarea has its style customized to 'hide' the top, right and left borders. There are some transitions applied and the vertical scrolling is hidden.
.form-row textarea { transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out; outline: 0; box-shadow: none; border: none; border-bottom: 1px solid #ced4da; border-radius: 0; box-sizing: content-box; background-color: transparent; overflow-y: hidden; padding: 1.5rem 0; resize: none; } When focus is given to the textarea to the associated label moves above the textarea and the font shrinks. This is a normal Material Design effect.
The cool thing is you can style a textarea to render in many ways, this is only an example.
Summary
Textareas are a fundamental input field, used on forms everywhere. They are pretty simple elements to manage, but operate differently than their single line siblings, the input field.
Remember to always limit the number of rows and columns displayed, so your textareas are rendered at an appropriate size. You can also control text wrapping, styling and of course validation.
You can check out an example file with different attributes, styles and scripts you can use as a starter reference for your textareas on GitHub.