How to create a scrollable text box?

Question

Currently, the site has the following css class, which is intended for use in a note (longer texts) in a form.

.scrollabletextbox { height:100px; width:200px; font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif; font-size: 82%; overflow:scroll; } 

The window and other case sizes are correct for the styles, but the text starts vertically in the center and never breaks. The only way to fully view the text is to move the cursor left / right.

The form uses the following html (with a small amount of php) to implement a large text field

 <input type="text" class="scrollabletextbox" name="note" value="<?php echo $note; ?>"> 

Thanks in advance for any help.

Answer 1

Try replacing input type="text" with the textarea tag.

Change your code to:

 <textarea class="scrollabletextbox" name="note"> <?php echo $note; ?> </textarea> 

It sends data in the same way as a regular input tag, so you can get data from it using the same methods.

Details for the textarea tag

Answer 2

I would switch the control from input to textarea , which will perform the functions you requested by default.

 <textarea class="scrollabletextbox" name="note"><?php echo $note; ?></textarea> 

JSFIDDLE: http://jsfiddle.net/rJy94/