Pure表格

Pure表格

Pure表格常用标签

1. input

• 和栅格样式差不多，pure-input-1-x表示输入框的长度是x分之一，

   <form class="pure-form pure-g">
      <div class="pure-u-1-4">
          <input class="pure-input-1" type="text" placeholder=".pure-u-1-4">
      </div>
      <div class="pure-u-3-4">
          <input class="pure-input-1" type="text" placeholder=".pure-u-3-4">
      </div>
        <div class="pure-u-1-8">
          <input class="pure-input-1" type="text" placeholder=".pure-u-1-8">
      </div>
      <div class="pure-u-1-8">
          <input class="pure-input-1" type="text" placeholder=".pure-u-1-8">
      </div>
      <div class="pure-u-1-4">
          <input class="pure-input-1" type="text" placeholder=".pure-u-1-4">
      </div>
      <div class="pure-u-1-2">
          <input class="pure-input-1" type="text" placeholder=".pure-u-1-2">
      </div>
  
  
  </form>

• Input的属性
  required 必填属性，比如说邮箱用户名什么的
  <input type="email" placeholder="Requires an email" required>

  disable 禁止输入
  <input type="text" placeholder="Disabled input here..." disabled>

  readonly 只读属性
  <input type="text" value="Readonly input here..." readonly>
  添加class pure-input-rounded 可实现圆角效果

  <form class="pure-form">
      <input type="text" class="pure-input-rounded">
  </form>

2. checkboxs

<form class="pure-form">
    <input type="checkbox" >You can choose</input>
</form>

3. radio

<form class="pure-form">
    <legend>性别</legend>
     <label for="man" class="pure-radio" >
        <input id="man" type="radio"  value="man"  name="people" checked/ >man
    </label>
    <label for="woman" class="pure-radio">
        <input id="woman" type="radio"  value ="woman" name="people"/>woman
    </label>
</form>

4. fieldset、legend

fieldset 元素可以吧表单内的相关元素分组,会对相关元素有一个框，框起来
legend标签，给相关元素定义标题

<form class="">
    <fieldset>


    <legend>性别</legend>
     <label for="man" class="pure-radio" >
        <input id="man" type="radio"  value="man"  name="people" checked/ >man
    </label>
    <label for="woman" class="pure-radio">
        <input id="woman" type="radio"  value ="woman" name="people"/>woman
    </label>
    </fieldset>
</form>

6. lable

label 元素没有任何特殊效果。不过，如果在 label 元素内点击文本，浏览器就会自动将焦点转到和标签相关的表单控件上

pure表格有很多种风格，

1. 紧凑内联表格

给form添加class pure-form就可以了

<form class="pure-form ">
    <fieldset>

        <legend>一个紧凑的内联表格</legend>
        <input type="email" placeholder="Email"></input>
        <input type="password" placeholder="Password"></input>

        <label for="remember">
            <input type="checkbox">Remember me</input>

        </label>
        <button type="submit" class="pure-button pure-button-primary">登录</button>
    </fieldset>
</form>

2. 堆叠式表格

在class pure-form的基础上，添加class pure-form-stacked

<!-- 堆叠式表格 -->
<form class="pure-form pure-form-stacked">
    <fieldset>
        <legend>堆叠式表格</legend>
        <label for="email">email</label>
        <input type="email" id="email" placeholder="Email"></input>
        <label for="password">password</label>
        <input type="password" id="password" placeholder="password"></input>
        <label for="provice"></label>
        <select id="provice">
            <option>浙江</option>
            <option>江苏</option>
            <option>上海</option>
        </select>

        <button type="submit" class = "pure-button pure-button-primary">登录</button>
    </fieldset>
</form>

3. 对齐式表格

在class pure-form的基础上，添加class pure-form-aligned

<!-- 对齐式表格 -->
<form class="pure-form pure-form-aligned">
     <fieldset>
     <legend>对齐式表格</legend>
        <div class="pure-control-group">
            <label for="name">Username</label>
            <input type="text" id="name" placeholder="Username">
        </div>
        <div class="pure-control-group">
            <label for="password">Password</label>
            <input type="text" id="password" placeholder="password">
        </div>
        <div class="pure-control-group">
            <label for="email">Email</label>
            <input id="email" type = "text" placeholder="email"></input>

        </div>
        <div class="pure-controls">
            <label for="cb" class="pure-checkbox" >
                <input type="checkbox" id="cb">I've read the terms</input>
            </label>
            <button type="submit" class="pure-button pure-button-primary"></button>
        </div>
        </fieldset>
</form>

4. 多列式（配合栅格）

在堆叠的样式上，添加栅格分局

<!-- 多列式（配合栅格） -->
<form class="pure-form pure-form-stacked" >
    <fieldset>
        <legend>多列式（配合栅格）</legend>
        <div class="pure-g">

            <div class="pure-u-1 pure-u-md-1-3" >
                <label for="name">姓名</label>
                <input type="text" id="name"></input>
            </div>


            <div class="pure-u-1 pure-u-md-1-3" id="email">
                <label for="age">邮箱</label>
                <input type="text" id="age" ></input>
            </div>


            <div class="pure-u-1 pure-u-md-1-3">
                <label for="email">年龄</label>
                <input type="text"  id="email" ></input>
            </div>

            <div class="pure-u-1 pure-u-md-1-3" >
                <label for="man" class="pure-radio">
                    <input type="radio" id="man" name="man"/>
                </label>
                <label for="woman" class="pure-radio">
                    <input type="radio" id="woman" name="woman"/>
                </label>

            </div>
            <div class="pure-u-1 pure-u-1-3">
                <label for="city">城市</label>
                <select id="city" class="pure-input-1-4">
                    <option value="">浙江</option>
                    <option value="">上海</option>
                    <option >北京</option>
                </select>
            </div>
        </div>
    <button type="submit" class="pure-button pure-button-primary">submit</button>
    </fieldset>
</form>

（ 于2016年9月19日，http://blog.csdn.net/bzd_111）