<form>
    <fieldset>
        <legend>Inputs as descendents of labels (form legend)</legend>
        <label>
          <b>Text input</b>
          <input type="text" value="default value">
      </label>
        <label>
          <b>Email input</b>
          <input type="email">
      </label>
        <label>
          <b>Search input</b>
          <input type="search">
      </label>
        <label>
          <b>Tel input</b>
          <input type="tel">
      </label>
        <label>
          <b>URL input</b>
          <input type="url" placeholder="http://">
      </label>
        <label>
          <b>Password input</b>
          <input type="password" value="password">
      </label>
        <label>
          <b>File input</b>
          <input type="file">
      </label>
        <label>
          <b>Radio input</b>
          <input type="radio" name="rad">
      </label>
        <label>
          <b>Checkbox input</b>
          <input type="checkbox">
      </label>
        <label>
          <input type="radio" name="rad"> Radio input
      </label>
        <label>
          <input type="checkbox"> Checkbox input
      </label>
        <label>
          <b>Select field</b>
          <select>
              <option>Option 01</option>
              <option>Option 02</option>
          </select>
      </label>
        <label>
          <b>Textarea</b>
          <textarea cols="30" rows="5" >Textarea text</textarea>
      </label>
    </fieldset>

    <fieldset>
        <legend>Clickable inputs and buttons</legend>
        <input type="image" src="http://placekitten.com/90/24" alt="Image (input)">
        <input type="reset" value="Reset (input)">
        <input type="button" value="Button (input)">
        <input type="submit" value="Submit (input)">
        <button type="reset">Reset (button)</button>
        <button type="button">Button (button)</button>
        <button type="submit">Submit (button)</button>
    </fieldset>

    <fieldset id="boxsize">
        <legend>box-sizing tests</legend>
        <div><input type="text" value="text"></div>
        <div><input type="email" value="email"></div>
        <div><input type="search" value="search"></div>
        <div><input type="url" value="http://example.com"></div>
        <div><input type="password" value="password"></div>

        <div><input type="color" value="#000000"></div>
        <div><input type="number" value="5"></div>
        <div><input type="range" value="10"></div>
        <div><input type="date" value="1970-01-01"></div>
        <div><input type="month" value="1970-01"></div>
        <div><input type="week" value="1970-W01"></div>
        <div><input type="time" value="18:23"></div>
        <div><input type="datetime" value="1970-01-01T00:00:00Z"></div>
        <div><input type="datetime-local" value="1970-01-01T00:00"></div>

        <div><input type="radio"></div>
        <div><input type="checkbox"></div>

        <div><select><option>Option 01</option><option>Option 02</option></select></div>
        <div><textarea cols="30" rows="5">Textarea text</textarea></div>

        <div><input type="image" src="http://placekitten.com/90/24" alt="Image (input)"></div>
        <div><input type="reset" value="Reset (input)"></div>
        <div><input type="button" value="Button (input)"></div>
        <div><input type="submit" value="Submit (input)"></div>

        <div><button type="reset">Reset (button)</button></div>
        <div><button type="button">Button (button)</button></div>
        <div><button type="submit">Submit (button)</button></div>
    </fieldset>
</form>
<form>
  <fieldset> 
      <legend>Inputs as descendents of labels (form legend)</legend>
      <label>
          <b>Text input</b>
          <input type="text" value="default value">
      </label>
      <label>
          <b>Email input</b>
          <input type="email">
      </label>
      <label>
          <b>Search input</b>
          <input type="search">
      </label>
      <label>
          <b>Tel input</b>
          <input type="tel">
      </label>
      <label>
          <b>URL input</b>
          <input type="url" placeholder="http://">
      </label>
      <label>
          <b>Password input</b>
          <input type="password" value="password">
      </label>
      <label>
          <b>File input</b>
          <input type="file">
      </label>
      <label>
          <b>Radio input</b>
          <input type="radio" name="rad">
      </label>
      <label>
          <b>Checkbox input</b>
          <input type="checkbox">
      </label>
      <label>
          <input type="radio" name="rad"> Radio input
      </label>
      <label>
          <input type="checkbox"> Checkbox input
      </label>
      <label>
          <b>Select field</b>
          <select>
              <option>Option 01</option>
              <option>Option 02</option>
          </select>
      </label>
      <label>
          <b>Textarea</b>
          <textarea cols="30" rows="5" >Textarea text</textarea>
      </label>
  </fieldset>

  <fieldset>
      <legend>Clickable inputs and buttons</legend>
      <input type="image" src="http://placekitten.com/90/24" alt="Image (input)">
      <input type="reset" value="Reset (input)">
      <input type="button" value="Button (input)">
      <input type="submit" value="Submit (input)">
      <button type="reset">Reset (button)</button>
      <button type="button">Button (button)</button>
      <button type="submit">Submit (button)</button>
  </fieldset>

  <fieldset id="boxsize">
      <legend>box-sizing tests</legend>
      <div><input type="text" value="text"></div>
      <div><input type="email" value="email"></div>
      <div><input type="search" value="search"></div>
      <div><input type="url" value="http://example.com"></div>
      <div><input type="password" value="password"></div>

      <div><input type="color" value="#000000"></div>
      <div><input type="number" value="5"></div>
      <div><input type="range" value="10"></div>
      <div><input type="date" value="1970-01-01"></div>
      <div><input type="month" value="1970-01"></div>
      <div><input type="week" value="1970-W01"></div>
      <div><input type="time" value="18:23"></div>
      <div><input type="datetime" value="1970-01-01T00:00:00Z"></div>
      <div><input type="datetime-local" value="1970-01-01T00:00"></div>

      <div><input type="radio"></div>
      <div><input type="checkbox"></div>

      <div><select><option>Option 01</option><option>Option 02</option></select></div>
      <div><textarea cols="30" rows="5" >Textarea text</textarea></div>

      <div><input type="image" src="http://placekitten.com/90/24" alt="Image (input)"></div>
      <div><input type="reset" value="Reset (input)"></div>
      <div><input type="button" value="Button (input)"></div>
      <div><input type="submit" value="Submit (input)"></div>

      <div><button type="reset">Reset (button)</button></div>
      <div><button type="button">Button (button)</button></div>
      <div><button type="submit">Submit (button)</button></div>
  </fieldset>
</form>
{
  "siteName": "siteName",
  "siteUrl": "/"
}

There are no notes for this item.