I've created a form with an input, but the box only handles text in a single row. I would like to style it so that the input field is similar to that of Twitter's, where the box itself is multiple rows:
And it also expands when you hit enter:
This is currently what I have:
<form name="userForm">
<input type="text" id="userInput" name="userInput" placeholder="Enter text here.">
<button type="submit" id="button">Submit</button>
</form>
I've styled the button and the input, but haven't done anything to change its shape, so it's at default. What do I have to tweak to achieve this?
You need to use an HTML <textarea>
element.
From MDN:
The HTML
<textarea>
element represents a multi-line plain-text editing control.
Using <input>
for multiline text is not possible natively and, if hacked, would be invalid HTML.
HTML5 spec:
4.10.5.1.2 Text (
type=text
) state and Search state (type=search
)The
input
element represents a one line plain text edit control for the element's value.(emphasis mine)
Twitter input box
You mention you want the textarea to resemble Twitter's (auto-resize / no scrollbar). Consider this option and the following SO posts:
A small, stand-alone script to automatically adjust textarea height.