How do I get both horizontal and vertical scroll bars in an HTML texbox

Try https://www.w3schools.com/TAgs/att_textarea_readonly.asp without the readonly field (to allow writing).

Basically try:

    <textarea>
    At w3schools.com you will learn how to make a website. We offer free
    tutorials in all web development technologies.
    </textarea> 

From the related link: https://stackoverflow.com/questions/1125482/how-to-impose-maxlength-on-textarea-in-html-using-javascript/1125521#1125521 one can use the onKeyPress event to update downstream content. For myself, for example, I defined a bunch of text boxes that are updated by other objects in the widget, since it was easier for me to get text boxes to work before the rest could (it was a sure but slow solution).

    <textarea onKeyPress="return ( this.value.length < 1000 );" id = "textareaid" rows="4">
    </textarea>

Within a backend widget for WordPress the "textareaid" needs to be treated delicately (I have another question about that here, but I do not have enough references available to post that link yet in the answer field.)

So, with what you explained in the comments, I don't know if I can see what you really need, as to the functions.

If you create a <textarea>, you will have multiline for the user to write.

If you create a <textarea>, and define white-space: pre;, you will have the possibility to have an horizontal bar.

If you create a <textarea>, define white-space: pre;, and tweak a little with JS, you will get a box, with horizontal scrolling and the possibility of defining a maxlength (Like in the example I made: https://codepen.io/anon/pen/MEJqBj