How to make Textarea read only

Sometimes we want to show some text inside the textarea, but we don’t want to let users input something there. In such cases, we can use readoonly.

With readonly, users can read and select elements inside textarea, but they can’t input anything.

Remember, if you want to store the data from this readonly textarea, you should also validate it in your backend code. Any user can simply remove readonly attribute from your textarea in their DevTools and input there something anyway.

To make your textarea read only, place the readonly=”” inside the opening tag.


<textarea readonly="">Hello World!</textarea>