HTML Textarea

 HTML Textarea

An HTML Textarea is multi-line field for editing plain text.

It is form and an inline element.

It is commonly used in contact form, comment forms and more.

The <textarea> element defines an HTML Textarea.

HTML Textarea Attributes

  • rows : specifies an exact size in rows
  • cols : specifies an exact size in columns
  • placeholder : specifies a text placeholder that disappears when the texarea has been focused
💡 You will learn more attributes that can be used with a textarea on our HTML5 Form Elements Attributes lesson.

Example:

<!DOCTYPE html>
<html>
    <head>
        <title> HTML Textarea </title>
    </head>
    <body>
        <textarea rows="5" cols="35" placeholder="Type your message here..."></textarea>
    </body>
</html>

Output:

Styling Textarea and Getting Its Value Example:

<!DOCTYPE html>
<html>
    <head>
        <title> HTML Textarea Styling & Get Value </title>
        <style type="text/css">
            textarea{
                background-color: #f3f3f3;  /* Changing background color */
                color: #d9534f;    /* Changing the text color */
                border: none;   /* Removing border */
                outline: none;  /* Removing outline */
                resize: none;   /* Disabling the resize functionality */ 
            }
        </style>
    </head>
    <body>
        <textarea rows="5" cols="35" placeholder="Type your message here..." id="sample"></textarea>
        <br />
        <button onClick="getValue();"> Get Value </button>

        <script type="text/javascript">
            function getValue(){
                var value = document.getElementById('sample').value;
                alert(value) 
            }
        </script>
    </body>
</html>

Output:


    
                                                                                

Post a Comment

Post a Comment (0)