---
layout: demo
title: Light7 Demo
---
<div id="page-label-input" class="page">
  <header class="bar bar-nav">
    <a class="button button-link button-nav pull-left back" href="/demos/form">
      <span class="icon icon-left"></span>
      Back
    </a>
    <h1 class="title">Form</h1>
  </header>
  <div class="content">
    <div class="list-block">
      <ul>
        <!-- Text inputs -->
        <li>
          <div class="item-content">
            <div class="item-inner">
              <div class="item-title label">Name</div>
              <div class="item-input">
                <input type="text" placeholder="Your name">
              </div>
            </div>
          </div>
        </li>
        <li>
          <div class="item-content">
            <div class="item-inner">
              <div class="item-title label">E-mail</div>
              <div class="item-input">
                <input type="email" placeholder="E-mail">
              </div>
            </div>
          </div>
        </li>
        <li>
          <div class="item-content">
            <div class="item-inner">
              <div class="item-title label">Password</div>
              <div class="item-input">
                <input type="password" placeholder="Password" class="">
              </div>
            </div>
          </div>
        </li>
        <li>
          <div class="item-content">
            <div class="item-inner">
              <div class="item-title label">Gender</div>
              <div class="item-input">
                <select>
                  <option>Male</option>
                  <option>Female</option>
                </select>
              </div>
            </div>
          </div>
        </li>
        <!-- Date -->
        <li>
          <div class="item-content">
            <div class="item-inner">
              <div class="item-title label">Birth date</div>
              <div class="item-input">
                <input type="date" placeholder="Birth day" value="2014-04-30">
              </div>
            </div>
          </div>
        </li>
        <!-- Switch (Checkbox) -->
        <li>
          <div class="item-content">
            <div class="item-inner">
              <div class="item-title label">Switch</div>
              <div class="item-input">
                <label class="label-switch">
                  <input type="checkbox">
                  <div class="checkbox"></div>
                </label>
              </div>
            </div>
          </div>
        </li>
        <li class="align-top">
          <div class="item-content">
            <div class="item-inner">
              <div class="item-title label">Textarea</div>
              <div class="item-input">
                <textarea></textarea>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="content-block">
      <div class="row">
        <div class="col-50"><a href="#" class="button button-big button-fill button-danger">Cancel</a></div>
        <div class="col-50"><a href="#" class="button button-big button-fill button-success">Submit</a></div>
      </div>
    </div>
  </div>
</div>