Make input element (type="text") handle multiple lines of text
<p>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:</p>

<p><a href="https://i.stack.imgur.com/OVrXW.png" rel="noreferrer"><img src="https://i.stack.imgur.com/OVrXW.png" alt="twitter-input"></a></p>

<p>And it also expands when you hit enter:</p>

<p><a href="https://i.stack.imgur.com/6rK8f.png" rel="noreferrer"><img src="https://i.stack.imgur.com/6rK8f.png" alt="enter image description here"></a></p>

<p>This is currently what I have:</p>

<pre><code>&lt;form name="userForm"&gt;
  &lt;input type="text" id="userInput" name="userInput" placeholder="Enter text here."&gt;
  &lt;button type="submit" id="button"&gt;Submit&lt;/button&gt;
&lt;/form&gt;
</code></pre>

<p>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?</p>