Styling an Input Field

Question

Hello,

How can I give the input field below the characteristics listed below?

Characteristics:

-Text typed into the field starts in the upper left corner and starts on another line (wraps?) when the right border of the field is reached.

-A scroll bar appears if the text is more than what can fit into the field.

-The text is in Courier font.

Thanks in advance,

John

echo '<form  action="http://www...com/sandbox/comments/comments2.php" method="post"> 
    <input type="hidden" value="'.$_SESSION['loginid'].'" name="uid">
    <input type="hidden" value="'.$submissionid.'" name="submissionid">  
    <input type="hidden" value="'.$submission.'" name="submission">


    <label class="addacomment" for="title">Add a comment:</label>

    <input class="commentsubfield" name="comment" type="comment" id="comment" maxlength="1000">  

    <div class="commentsubbutton"><input name="submit" type="submit" value="Submit"></div> 
</form>
';

Some relevant CSS:

.commentsubfield {margin-left: 30px; margin-top: 30px; width: 390px; height: 90px; border: 1px solid #999999; padding: 5px; }   

Answer 1

This might sound pretty elementary, but why not just use a textarea? It does exactly what you are describing

<textarea></textarea>

textarea

edit: to better show what the textarea should look like

<textarea class="commentsubfield" name="comment" id="comment" rows="10" cols="40"></textarea>

of note, textarea does not have a maxlength attribute, to limit length in the textarea you would need to use some javascript.

Answer 2

As mentioned you should use a textarea instead of a <input type="text".

The CSS would be

.commentsubfield { font-family: Courier, sans-serif; overflow: auto; }