Building a Basic Web Form

What is an HTML Form?

In HTML, a form is a collection of elements designed to get input from a user. You see forms everywhere online: login pages, search bars, contact pages, and checkout processes.

The foundation of any form is the <form> element. It acts as a container for all the input fields, like text boxes, checkboxes, and buttons.

The <form> tag has two important attributes, action and method, which tell the browser where and how to send the user's data. For now, you can leave them out. They are for connecting to a backend server, which we will build in a later module.

The Core Components: Text Area, Label, and Submit Button

For our AI application, we need three key pieces:

1. A large text box for the user to write or paste their text.
2. A label to tell the user what the text box is for.
3. A button to "submit" the text for analysis.

The following video provides an excellent introduction to creating these elements. It uses a single-line text input as its first example, but the concepts for labels and submit buttons are exactly the same for our multi-line text area.

The Text Area: Your App's Main Input

While a single-line <input type="text"> is good for names or search terms, your AI tool needs to handle paragraphs or even whole documents. For this, we use the <textarea> element. It creates a multi-line text input box that the user can type into.

The <textarea> tag is highly customizable. This article provides a fantastic, in-depth look at how to use it effectively.

As you read, you'll see a few key attributes for <textarea>:

• name: Gives the data a name so our backend server can identify it later.
• rows: Sets the visible height of the text area (in lines of text).
• cols: Sets the visible width of the text area (in characters).
• placeholder: Displays hint text inside the box that disappears when the user starts typing.

<textarea rows="15" cols="50" placeholder="Write your story here..."></textarea>

Let's Code: Building the Form

Now it's time to put all these pieces together in your index.html file. We will replace the "Planned Features" list with our new form, as this form is the first real feature we're building.

Open your index.html file and replace the entire content inside your <body> tags with the following code:

<body>
  <h1>AI Writing Assistant</h1>
  <p>Enter the text you want to analyze or improve in the box below.</p>

  <form>
    <label for="user-text">Your Text:</label><br><br>
    
    <textarea id="user-text" name="user-text" rows="10" cols="60" placeholder="Paste your text here..."></textarea><br><br>
    
    <input type="submit" value="Analyze Text">
  </form>
</body>

Let's break down what's new here:

• <form>: This wraps our input elements.
• <label for="user-text">: This label is explicitly linked to our text area. Clicking this label will now focus the cursor in the text area.
• <textarea id="user-text" ...>: This is our main input field. Note how its id matches the for attribute in the label.
• <input type="submit" value="Analyze Text">: This creates our submit button. The value attribute sets the text displayed on the button.
• <br>: This is a line break tag. We've used it here to add some simple spacing. We'll learn more advanced ways to control layout with CSS later on.

After you save the file, refresh index.html in your browser. You should now see a clean interface with a title, a text area, and a button! It doesn't do anything yet, but the entire visual structure is in place.

Conclusion

Excellent work! You have just built the most important piece of the user interface for your web application. You've moved from displaying static content to creating an interactive element that can receive input from a user.

Key Takeaways from this lesson:

• The <form> element is a container for user input fields.
• The <textarea> element is used to create a multi-line text input box, perfect for longer user submissions.
• The <label> tag provides a description for an input field and improves usability and accessibility, especially when linked via the for and id attributes.
• <input type="submit"> creates a button that, when clicked, attempts to send the form's data.

In the next lesson, we will learn how to use div and span elements to group and organize page content. This will give us more control over the layout and structure of our page, preparing it for the styling we'll add with CSS in the next module.