How to Create a Multi-Line Text Input Field In HTML

Solution with HTML

A multi-line text input field can be created by using the HTML <textarea> element. You need to use the cols and rows attributes of this element to set the text area size. The <textarea> must be used within a <form> element.

Next, see examples of adding a multi-line text area with a "submit" button.

Watch a course CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

Example of creating a multi-line input field:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <form action="/form/submit" method="GET">
      <textarea rows="5" cols="60" name="text" placeholder="Enter text"></textarea>
      <br/>
      <input type="submit" value="submit"/>
    </form>
  </body>
</html>

You can also create a label for the textarea using the<label> tag:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <form action="/form/submit" method="post">
      <label for="text">Add Comments:</label>
      <br>
      <textarea id="text" name="text" rows="12" cols="50"></textarea>
      <br/>
      <input type="submit" value="Submit">
    </form>
  </body>
</html>