web-ui.html

gistfile1.txt

<div class="container">
    <div class="mb">
      More info on:
  <br /><br />
  <a href="http://daily-dev-tips.com/posts/vanilla-javascript-string-includes/" target="_blank">Daily Dev Tips</a>
    </div>
    <form>
      <div class="form-group">
        <label>Text</label>
        <input type="text" name="firstname" placeholder="Firstname" pattern="[a-zA-Z0-9]+" />
      </div>
      <div class="form-group">
        <label>Disabled</label>
        <input type="text" name="firstname" placeholder="Firstname" disabled />
      </div>
      <div class="form-group">
        <label>Readonly</label>
        <input type="text" name="firstname" placeholder="Firstname" readonly />
      </div>
      <div class="form-group">
        <label>Email</label>
        <input type="email" name="email" placeholder="Email Address" />
      </div>
      <div class="form-group">
        <label>Number</label>
        <input type="number" name="number" placeholder="Amount?" min="5" max="15" step="5" />
      </div>
      <div class="form-group">
        <label>Range</label>
        <input type="range" name="age" min="0" max="100" step="2" />
      </div>
      <div class="form-group">
        <label>Password</label>
        <input type="password" name="password" placeholder="Password" />
      </div>
      <div class="form-group">
        <label>Submit</label>
        <input type="submit" value="Send form" />
      </div>
      <div class="form-group">
        <label>Checkbox</label>
        <input type="checkbox" name="dislike" value="Sprouts" />
        <input type="checkbox" name="dislike" value="Fish" />
        <input type="checkbox" name="dislike" value="Spinach" />
      </div>
      <div class="form-group">
        <label>Radio</label>
        <input type="radio" name="you_like" value="Pony" />
        <input type="radio" name="you_like" value="Unicorn" />
        <input type="radio" name="you_like" value="Llama" />
      </div>
      <div class="form-group">
        <label>File</label>
        <input type="file" name="files" multiple accept=".jpg, .jpeg" />
      </div>
      <div class="form-group">
        <label>Date</label>
        <input type="date" name="date_of_birth" />
      </div>
      <div class="form-group">
        <label>Time</label>
        <input type="time" name="time_online" />
      </div>
      <div class="form-group">
        <label>Month</label>
        <input type="month" name="month" />
      </div>
      <div class="form-group">
        <label>Week</label>
        <input type="week" name="week" />
      </div>
      <div class="form-group">
        <label>Color</label>
        <input type="color" name="favorite_color" value="#F4F4F4" />
      </div>
      <div class="form-group">
        <label>Tel</label>
        <input type="tel" name="telephone" placeholder="Telephone" />
      </div>
      <div class="form-group">
        <label>URL</label>
        <input type="url" name="website" placeholder="Your website?" />
      </div>
    </form>
  </div>