GOOD

Comment form

Signed Out

<form action="…" method="post" class="comment-form">
  <div class="container">
    <p class="text">
      <label>
        <span>Share your thoughts or insights...</span><br />
        <textarea name="comment" placeholder="Share your thoughts or insights..."></textarea>
      </label>
    </p>
    …
  </div>
  <p class="submit">
    <button type="submit">Post</button>
  </p>
</form>

Signed In

Agus Echague

<form action="…" method="post" class="comment-form">
  <div class="container">
    <h6 class="avatar"><img src="…" alt="Agus Echague" width="30" height="30" /></h6>
    <p class="text">… </p>
    …
  </div>
  …
</form>

Inactive

Agus Echague

<form action="…" method="post" class="comment-form inactive">
  <div class="container">
    <h6 class="avatar"><img src="…" alt="Agus Echague" width="30" height="30" /></h6>
    <p class="text">… </p>
    …
  </div>
  …
</form>

Video

Agus Echague

<form action="…" method="post" class="comment-form">
  <div class="container">
    …
    <p class="url">
      <label>
        <span>Embed Video</span><br />
        <input type="text" name="video" placeholder="Paste your YouTube or Vimeo URL…" />
      </label>
      <button type="submit" name="embed" value="1">Embed</button>
      <button type="submit" name="cancel" value="1" class="cancel"><span>Cancel</span></button>
    </p>
    <p class="file">…</p>
  </div>
  …
</form>

Images

Agus Echague

  1. bikes.jpg
  2. road.jpg 

<form action="" method="post" class="comment-form">
  <div class="container">
    …
    <ol class="images">
      <li>
        <img src="…" alt="" />
        <span>bikes.jpg</span>
        <button type="submit" name="remove" value="image1"><span>Remove this image</span></button>
      </li>
      <li>
        <img src="…" alt="" />
        <span>road.jpg</span>
        <button type="submit" name="remove" value="image2"><span>Remove this image</span></button>
      </li>
    </ol>
    <p class="file">…</p>
  </div>
  …
</form>

Uploading

Agus Echague

  1. bikes.jpg 80% Loaded
  2. road.jpg 

<form action="" method="post" class="comment-form">
  <div class="container">
    …
    <ol class="images">
      <li class="progress">
        <span>bikes.jpg</span>
        <button type="submit" name="remove" value="image1"><span>Remove this image</span></button>
        <progress max="100" value="80">80% Loaded</progress>
      </li>
      …
    </ol>
    <p class="file">…</p>
  </div>
  …
</form>

Change Order

Agus Echague

  1. ciclavia-bike-ride.jpg
  2. road.jpg
  3. festival.jpg 

<ol class="images">
  …
  <li>
    <button class="up"><span>Move Up</span></button>
    <button class="down"><span>Move Down</span></button>
    <img src="…" alt="" />
    …
  </li>
  …
</ol>

Error Message

Agus Echague

Oops! Nice pic, but it’s just not our (file) type. Please try uploading a .jpg or .png image.

Agus Echague

Oops! Nice video, but it’s just not our (video) type. Please enter a URL from YouTube or Vimeo.

<form action="" method="post" class="comment-form">
  <div class="container">
    …
    <p class="error-message"><span>Oops! Nice video, but it’s just not our (video) type…</span></p>
  </div>
  …
</form>

Information Message

Agus Echague

  1. ciclavia-bike-ride.jpg
  2. road.jpg
  3. festival.jpg

Ready to post! You’ve uploaded the maximum number of images.

Agus Echague

  1. Ciclavia: 80,000-person Community Bike Ride in Los Angeles

Your video is ready to post!

<form action="" method="post" class="comment-form">
  <div class="container">
    …
    <ol class="images">
      <li>
        <span class="video">
          <img src="…" alt="" />
        </span>
        <span>Ciclavia: 80,000-person Community Bike Ride in Los Angeles</span>
        …
      </li>
    </ol>
    <p class="note"><span>Your video is ready to post!</span></p>
  </div>
  …
</form>

Reply

<ul class="comment-list">
  <li>
    <article>
      …
      <footer>
        …
        <form action="" method="post" class="comment-form">
          …
        </form>
      </footer>
    </article>
  </li>
</ul>

Add Story

Add your story

Agus Echagüe 

<section class="add-story">
  <div class="container">
    <h2>Add your story</h2>
    <form action="" method="post" class="comment-form inactive">
      … 
    </form>
  </div>
</section>

Add Story (New Do)

Add your story

Optional

<section class="post-form">
  <form action="" method="post">
    …
    <section class="story">
      <div class="container">
        <h2>Add your story</h2>
        <p>Optional</p>
        <fieldset class="comment-form">
          <div class="container">
            …
          </div>
          <p class="checkbox">
            <label>
              <input type="checkbox" />
              <span>Yes, share this to Facebook.</span>
            </label>
          </p>
        </fieldset>
      </div>
    </section>
  </form>
</section>

Edit Story

Editing…

<main class="story">
  <article>
    …
    <form action="" method="post" class="comment-form">
      <div class="container">
        <h4>Editing…</h4>
        …
      </div>
      …
    </form>
    …
  </article>
</main>