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