Demo of text input

Have a look at the way things are displayed. For example, the textarea element can be dynamically resized.

HTML

<header>
    <p>Text Area Comparisons </p>
</header>
    
 <p>
    Modify the text area:<br/>
    <textarea id="id1" rows="5" cols="40">This from the editable textarea </textarea>
</p>
<p>
    Modify the pareagraph:<br/>
    <p id="id2" contenteditable="true">This is from the editable paragraph</p>
</p>
<p>
    Modify the text input area:<br/>
    <input id="id3" type="text" value="This is from the input element of type text"/>
</p>
<button onclick="show()">Show</button>

CSS

#id1, #id2, #id3 {
    background-color: lightgray;
}
#id2, #id3 {
    width: 70%;
}

header {
    margin: 0px;
    padding: 20px;
    width: 100%;
}

header p {
    padding: 10px;
    font-size: 2em;
}

JavaScript

function show() {
    var id1 = document.getElementById("id1").value;
    var id2 = document.getElementById("id2").innerHTML;
    var id3 = document.getElementById("id3").value;
    var result = "";
    result += "Text area: \n"  + id1  + "\n\n";
    result += "Paragraph: \n"  + id2  + "\n\n";
    result += "Input text: \n" + id3 + "\n\n";
    alert(result);
}