Step 4: add form

After div#posts add

<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>?

What we just did:

• We used a form to let our users write and post new messages.

• Form implements some css classes from Boostrap to appear more pleasant!