表单Form

支持元素:<input>、<select>、<textarea>、<label>

<input>元素支持类型:radio、checkbox、file、text、password、email、url、number、tel、search、date、month、week、time、datetime、datetime-local

类名 设定值(表单元素的宽度比例) 权重 小屏幕 (0-750px) 中等屏幕 (0-1200px) 大屏幕 (>1200px)
空值 None None 默认为inline-block 默认为inline-block 默认为inline-block
.ratio 60、70、80、90、100 默认 保持设定值 保持设定值 保持设定值
.ratio-m 100 高于.ratio 触发设定值 触发设定值 不触发
.ratio-s 100 高于.ratio及.ratio-m 触发设定值 不触发 不触发
  • Username
  • Password
  • Login
Basic:
<form> 
    <ul class="form">
        <li><span>Username</span><div><input type="text"></div></li>
        <li><span>Password</span><div><input type="text"></div></li>
    </ul>
</form>

Extended:
<form> 
    <ul class="form">
        <li><span>Login</span><div><input type="text" placeholder="Username"></div></li>
        <li><div><input type="text" placeholder="Password"></div></li>
        <li><div><label><input type="checkbox">Remember me</label></div></li>
        <li><button type="submit" class="btn xs">Submit</button></li>
    </ul>
</form>

组合Group

  • Name
  • City
  • Address
  • Profile Images
  • Personal Info
  • Shipping
  • Shipping
<form>
    <ul class="form ratio100"> 
        <li><span>Name</span><div><input type="text" placeholder="First Name"></div></li>
        <li><div><input type="text" placeholder="Last Name"></div></li>
        <li><span>City</span>
            <div>
                <select class="line">
                    <option>class="line"</option>
                    <option value="text1">text1</option>
                    <option value="text2">text2</option>
                    <option value="text3">text3</option>
                </select>
            </div>
        </li>
        <li><span>Address</span>
            <div>
                <select>
                    <option>State</option>
                    <option value="text1">text1</option>
                    <option value="text2">text2</option>
                    <option value="text3">text3</option>
                </select>
                <select>
                    <option>Country</option>
                    <option value="text1">text1</option>
                    <option value="text2">text2</option>
                    <option value="text3">text3</option>
                </select>
            </div>
        </li>
        <li><span>Profile Image</span><div><input type="file"></div></li>
        <li><span>Personal Info</span><div><textarea></textarea></div></li>
        <li><span>Shipping</span>
            <div>
                <label><input name="z1" type="radio" checked>Standard</label>
                <label><input name="z1" type="radio">Premium</label>
            </div>
        </li>
        <li>
            <div>
                <label class="line"><input name="z2" type="checkbox" checked>class="line"</label>
                <label class="line"><input name="z2" type="checkbox">class="line"</label>
            </div>
        </li>
        <li class="tc"><button type="button" class="btn">Submit</button></li>
    </ul>
</form>

表单100%宽度Width 100%

添加class="ratio100"

  • E-mail
  • Password
<form>
    <ul class="form ratio100">
        <li><span>E-mail</span><div><input type="text"></div></li>
        <li><span>Password</span><div><input type="text"></div></li>
        <li><div><label><input type="checkbox">Remember me</label></div></li>
        <li><div><button type="button" class="btn">Submit</button></div></li>
    </ul>
</form>

表单90%宽度Width 90%

添加class="ratio90"

  • E-mail
  • Password
<form>
    <ul class="form ratio90">
        ...
    </ul>
</form>

表单80%宽度Width 80%

添加class="ratio80"

  • E-mail
  • Password
<form>
    <ul class="form ratio80">
        ...
    </ul>
</form>

表单70%宽度Width 70%

<

添加class="ratio70"

  • E-mail
  • Password
<form>
    <ul class="form ratio70">
        ...
    </ul>
</form>

表单60%宽度Width 60%

添加class="ratio60"

  • E-mail
  • Password
<form>
    <ul class="form ratio60">
        ...
    </ul>
</form>

响应式排列Responsive layout

通过预定义的class="ratio60~100"、class="ratio-m100"、class="ratio-s100"来对中、小屏幕作排列调整
例:添加class="ratio80 ratio-s100",即表单元素默认为80%宽度占比,视窗像素小于750px则转换为100%宽度占比

<form>
    <ul class="form ratio80 ratio-s100">
        <li><span>E-mail</span><div><input type="text"></div></li>
        <li><span>Password</span><div><input type="text"></div></li>
        <li><div><label><input type="checkbox">Remember me</label></div></li>
        <li><div><button type="button" class="btn">Submit</button></div></li>
    </ul>
</form>

向右对齐Align right

添加class="tr"使文本向右对齐

  • E-mail
  • Password
<form>
    <ul class="form ratio80 tr">
        ...
    </ul>
</form>

纯文本Text

<div>元素添加class="text"

  • E-mail
    diquick@163.com
  • Password
<form>
    <ul class="form ratio80">
        <li><span>E-mail</span><div class="text">diquick@163.com</div></li>
        <li><span>Password</span><div><input type="text"></div></li>
    </ul>
</form>

自定义宽度的表单实例1Example

通过box系统自由设定列宽

  • First Name
  • Last Name
  • Address
  • City
  • Country
  • Zip
<form>
    <ul class="form ratio-s100 tr">
        <li class="box100"><span class="box25">Name</span><div class="box75"><input type="text"></div></li>
        <li class="box100"><span class="box30">Name</span><div class="box70"><input type="text"></div></li>
        <li class="box100"><span class="box35">Name</span><div class="box65"><input type="text"></div></li>
        <li class="box100"><span class="box40">Name</span><div class="box60"><input type="text"></div></li>
        <li class="box100"><span class="box45">Name</span><div class="box55"><input type="text"></div></li>
        <li class="box100"><span class="box50">Name</span><div class="box50"><input type="text"></div></li>
        <li class="box100 tc"><button type="button" class="btn">Submit</button></li>
    </ul>
</form>

自定义宽度的表单实例2Example

通过box系统自由设定列宽

  • First Name
  • Last Name
  • Address
  • City
  • Country
  • Zip
  • Personal Info
<form>
    <ul class="form ratio-s100">
        <li class="box50 plr"><span>Name</span><div class="box100"><input type="text"></div></li>
        <li class="box50 plr"><span>Name</span><div class="box100"><input type="text"></div></li>
        <li class="box100 plr"><span>Name</span><div class="box100"><input type="text"></div></li>
        <li class="box33 plr"><span>Name</span><div class="box100"><input type="text"></div></li>
        <li class="box33 plr"><span>Name</span><div class="box100"><input type="text"></div></li>
        <li class="box33 plr"><span>Name</span><div class="box100"><input type="text"></div></li>
        <li class="box100 plr"><span>Name</span><div class="box100"><textarea></textarea></div></li>
        <li class="box100 tc"><button type="button" class="btn">Submit</button></li>
    </ul>
</form>

Input

  • No border
  • <p>Note

    We just need a little more info to create your account

  • Active
  • Disabled
  • Icon
  • checkbox,radio
No border:
<input type="text" class="noborder">

Note:
<input type="text"><p>Text</p>

Active:
<input type="text" class="active">

Disabled:
<input type="text" disabled>

Icon:
<i class="flaticon-personal29"></i><input type="text">

[checkbox,radio]
Icon:
<label><input type="checkbox"><i class="flaticon-design25"></i>Icon</label>

Disabled:
<label><input type="radio" disabled>Disabled</label>

Line:
<label class="line"><input type="checkbox">Line</label>

Note:
<label class="line"><input type="checkbox">Note<p>Text</p></label>

Select

  • <p>Note

    We just need a little more info to create your account

  • Line
  • Multiple
  • Active and Disabled
Note:
<select></select><p>Text</p>

Line:
<select class="line"></select>

Multiple:
<select multiple></select>

Active:
<select class="active"></select>

Disabled:
<select disabled></select>

Textarea

  • <p>Note

    We just need a little more info to create your account

  • Active
  • Disabled
Note:
<textarea></textarea><p>Text</p>

Active:
<textarea class="active"></textarea>

Disabled:
<textarea disabled></textarea>