HTML - Textarea
What is a textarea
Textrea is used to allow users to enter large amount of text with the ability to enter this text in multi lines. The web browser will automatically add scroll bar if the amount of text is more that what can be displayed in the textarea.
Attributes of Textarea field:
Name: Specifies the name of the object through which it can be referenced.
Rows: Specifies the height of the textarea in characters.
Cols: Specifies the width of the textarea in characters.
Readonly: This attribute will not let the user change the contents of the field.
simple textarea code
<form> <p>Please provide your suggestion in the text box below:</p> <textarea cols="30" rows="10"></textarea> </form> |
This is how it will appear in a browser |
View above example output in a new browser window |
textarea with default value
textarea with default values, please note that scroll bar is automatically inserted by the browser and text lines are wrapped based on the cols attribute.
<form> <p>Quotes:</p> <textarea cols="30" rows="10"> Another year older, none the wiser. Birthdays are nature's way of telling us to eat more cake. Count your blessings, not your wrinkles. Happy birthday to you. Happy Birthday! You're one year closer to your death day. The younger you try to look; the older you actually are. You're older, You're wiser,You're sophisticated. A friend is a gift you give yourself. A friend is one who walks in when others walk out. A hug is worth a thousand words. Don't walk in front of me, I may not follow. Everyone is a friend, until they prove otherwise. Friends are true blue. It takes a long time to grow an old friend. The best mirror is an old friend. </textarea> </form> |
This is how it will appear in a browser |
View above example output in a new browser window |
textarea with readonly attribute
readonly attribute is used disable input and make text readonly for display purposes. It can be used in conjunction with database to implement security, however, you need to ensure that security is implemented at server side.
<form> <p>Quotes:</p> <textarea cols="30" rows="10" readonly="readonly"> Don't talk unless you can improve the silence. </textarea> </form> |
This is how it will appear in a browser |
View above example output in a new browser window |