> For the complete documentation index, see [llms.txt](https://bootcamp.shetechitaly.org/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://bootcamp.shetechitaly.org/day2/02-04.md).

# Step 4: add form

After `div#posts` add

```markup
<hr />
<form id="post-form">
  <div class="form-group">
    <label for="post-title" class="control-label">Post Title</label>
    <input type="text" class="form-control" id="post-title" placeholder="A new post" />
  </div>
  <div class="form-group">
    <label for="post-body" class="control-label">Post Content</label>
    <textarea type="text" class="form-control" id="post-body" placeholder="A new Body"></textarea>
  </div>
  <button type="submit" class="btn btn-primary">Post</button>
</form>
```

## What does this code do?

We are adding a **form** to let the user write and post a new message.

A form is a powerful tool that allows users to interact with the website interface through its components (such as text areas, option fields and so on). Once a form is submitted, its content is sent to a server where it can processed.

Usually an **HTML form** contains other control element like *input* or *textarea* that can used to insert any kind of text.

> [What is a `<form>`?](https://developer.mozilla.org/it/docs/Web/HTML/Element/form)

**What we just did:**

* We used a **form** to let our users write and post new messages.
* Form implements some css classes from [Boostrap](http://getbootstrap.com/) to appear more pleasant!