Textarea in HTML - Mini Project: Build & Apply

Create a Simple Feedback Form with a Textarea

📖 Scenario: You are building a simple feedback form for a website. Users will type their comments or suggestions in a box.

🎯 Goal: Build a basic HTML form that includes a <textarea> element where users can enter their feedback.

📋 What You'll Learn

Use semantic HTML5 elements

Include a <textarea> with a label for accessibility

Set the rows and cols attributes on the textarea

Add a submit button

Ensure the form is responsive and accessible

💡 Why This Matters

🌍 Real World

Feedback forms are common on websites to collect user opinions, bug reports, or suggestions.

💼 Career

Knowing how to build accessible and semantic forms is essential for front-end web development roles.

1

Create the basic HTML form structure

Write the HTML code to create a <form> element with a <label> for feedback and a <textarea> with id="feedback". Set the rows attribute to 4 and the cols attribute to 50.

HTML

Need a hint?

Use a <label> with a for attribute matching the id of the <textarea>.

2

Add a submit button to the form

Add a <button> element inside the <form> with type="submit" and the text Send Feedback.

HTML

  Your Feedback:
  
  

Need a hint?

The submit button should be inside the form and have type="submit".

3

Add accessibility features to the textarea

Add the aria-label="Feedback text area" attribute to the <textarea> element to improve accessibility.

HTML

  Your Feedback:
  
  
  Send Feedback

Need a hint?

The aria-label attribute helps screen readers describe the textarea.

4

Wrap the form in a semantic <main> element and add a heading

Wrap the entire <form> inside a <main> element. Above the form, add an <h1> heading with the text Feedback Form.

HTML

  Feedback Form
  
    Your Feedback:
    
    Send Feedback
  
  

Need a hint?

The <main> element is used for the main content. The heading helps users understand the page purpose.