Html Textarea

HTML textarea

Created By: chatGPT

A textarea in HTML is a multi-line text input control that allows users to enter larger blocks of text. It is often used in web forms when a user is expected to input a significant amount of text. To create a textarea, you'll use the <textarea> tag. This tag can include various attributes to customize its behavior and appearance.

<textarea rows="4" cols="50" placeholder="Enter your text here..."></textarea>

The rows attribute specifies the number of visible text lines in the textarea, while the cols attribute defines the width of the textarea in terms of the number of characters. The placeholder serves as a hint to the user about what to write in the textarea.

<textarea id="message" name="message" rows="8" cols="30">Enter your message here...</textarea>

You can further enhance the usability of the textarea by adding CSS styles. For example, to make the textarea look better or to make it responsive, you can apply CSS directly or through a stylesheet.

<style>
    textarea {
        font-family: Arial, sans-serif;
        width: 100%;
        padding: 10px;
        border-radius: 5px;
        border: 1px solid #ccc;
    }
</style>

Incorporating JavaScript can add dynamic functionalities to your textarea. For instance, you can capture the input from the textarea and display it elsewhere on the page or validate the input length.

<script>
    function displayText() {
        var textInput = document.getElementById('message').value;
        document.getElementById('output').innerText = textInput;
    }
</script>

Here's how the complete implementation looks, combining HTML, CSS, and JavaScript. When you type something in the textarea and click a button, it will display the text below the textarea.

<html>
<head>
    <title>Textarea Example</title>
    <style>
        textarea {
            font-family: Arial, sans-serif;
            width: 100%;
            padding: 10px;
            border-radius: 5px;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <textarea id="message" name="message" rows="8" cols="30" placeholder="Enter your message here..."></textarea>
    <button onclick="displayText()">Submit</button>
    <div id="output"></div>
    <script>
        function displayText() {
            var textInput = document.getElementById('message').value;
            document.getElementById('output').innerText = textInput;
        }
    </script>
</body>
</html>