HTML Multiline Input Tutorial

Introduction

HTML <textarea> tag allows users to enter and submit free text within a form. In this lab, we will create a simple HTML form with a <textarea> input and apply some commonly used attributes.

Note: You can practice coding in index.html and learn How to Write HTML in Visual Studio Code. Please click on 'Go Live' in the bottom right corner to run the web service on port 8080. Then, you can refresh the Web 8080 Tab to preview the web page.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("`HTML`")) -.-> html/BasicStructureGroup(["`Basic Structure`"]) html(("`HTML`")) -.-> html/FormsandInputGroup(["`Forms and Input`"]) html/BasicStructureGroup -.-> html/basic_elems("`Basic Elements`") html/BasicStructureGroup -.-> html/head_elems("`Head Elements`") html/FormsandInputGroup -.-> html/forms("`Form Elements`") subgraph Lab Skills html/basic_elems -.-> lab-70860{{"`HTML Multiline Input`"}} html/head_elems -.-> lab-70860{{"`HTML Multiline Input`"}} html/forms -.-> lab-70860{{"`HTML Multiline Input`"}} end

Create an HTML Skeleton

Create an empty HTML file named index.html and enter the basic HTML5 boilerplate code.

<!doctype html>
<html>
  <head>
    <title>HTML Textarea Tag Tutorial</title>
  </head>
  <body>
    <!-- Your HTML code here -->
  </body>
</html>

Add a Form Element

Add a <form> element to the HTML body. We will use this form to collect information from the user.

<form>
  <!-- Form elements go here -->
</form>

Add a Textarea Input

Add a <textarea> element inside the <form> element. You can customize the size of the text area by setting the rows and cols attributes.

<form>
  <label for="feedback">Enter your feedback:</label>
  <textarea id="feedback" name="feedback" rows="10" cols="50"></textarea>
</form>

Here, we have added a label to describe the input field (feedback), and a textarea input with an id attribute of "feedback". The name attribute is used to identify the input field on the server-side.

Add Other Form Attributes

We can add other HTML attributes to our form and input elements. For example, we can add a required attribute to ensure the user inputs some text.

<form>
  <label for="feedback">Enter your feedback:</label>
  <textarea
    id="feedback"
    name="feedback"
    rows="10"
    cols="50"
    required
  ></textarea>
  <input type="submit" value="Submit Feedback" />
</form>

Here, we have added an input element of type submit to allow the user to submit their feedback. Now the user cannot submit a blank form since required attribute has been added to the textarea.

Further Customization with CSS

Finally, you can apply some CSS styles to the form and input elements to make the form more visually appealing.

<style>
  form {
    border: 1px solid #ccc;
    padding: 10px;
    margin: 20px auto;
    max-width: 500px;
  }

  label,
  textarea,
  input[type="submit"] {
    display: block;
    margin-bottom: 10px;
    width: 100%;
  }
</style>

Here, we have set a border, added padding and margin, and restricted the maximum width of the form. We have also adjusted the display and width of the label, textarea, and submit input elements.

Summary

In this lab, we have learned how to create a basic HTML form with a <textarea> input and apply commonly used attributes. We have also applied some CSS styles to customize the form elements' appearance. You can further customize the form and input elements as per your requirements.

HTML Multiline Input