表单Form

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

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

类名设定值（表单元素的宽度比例）权重小屏幕 (0-750px)中等屏幕 (0-1200px)大屏幕 (>1200px)
空值NoneNone默认为inline-block默认为inline-block默认为inline-block
.ratio60、70、80、90、100默认保持设定值保持设定值保持设定值
.ratio-m100高于.ratio触发设定值触发设定值不触发
.ratio-s100高于.ratio及.ratio-m触发设定值不触发不触发

表单 Form - 图1

表单 Form - 图2

  1. <form> 
  2.     <ul class="form">
  3.         <li>
  4.             <span>Username</span>
  5.             <div><input type="text"></div>
  6.         </li>
  7.         <li>
  8.             <span>Password</span>
  9.             <div><input type="text"></div>
  10.         </li>
  11.     </ul>
  12. </form>
  14. <form> 
  15.     <ul class="form">
  16.         <li>
  17.             <span>Login</span>
  18.             <div><input type="text" placeholder="Username"></div>
  19.         </li>
  20.         <li>
  21.             <div><input type="text" placeholder="Password"></div>
  22.         </li>
  23.         <li>
  24.             <div><label><input type="checkbox">Remember me</label></div>
  25.         </li>
  26.         <li>
  27.             <div><button type="submit" class="btn xs">Submit</button></div>
  28.         </li>
  29.     </ul>
  30. </form>

组合Group

表单 Form - 图3

  1. <form>
  2.     <ul class="form ratio100">
  3.         <li>
  4.             <span>First Name</span>
  5.             <div><input type="text"></div>
  6.         </li>
  7.         <li>
  8.             <span>Last Name</span>
  9.             <div><input type="text"></div>
  10.         </li>
  11.         <li>
  12.             <span>City</span>
  13.             <div>
  14.                 <select class="line">
  15.                     <option>class="line"</option>
  16.                     <option value="text1">text1</option>
  17.                     <option value="text2">text2</option>
  18.                     <option value="text3">text3</option>
  19.                 </select>
  20.             </div>
  21.         </li>
  22.         <li>
  23.             <span>Address</span>
  24.             <div>
  25.                 <select>
  26.                     <option>State</option>
  27.                     <option value="text1">text1</option>
  28.                     <option value="text2">text2</option>
  29.                     <option value="text3">text3</option>
  30.                 </select>
  31.                 <select>
  32.                     <option>Country</option>
  33.                     <option value="text1">text1</option>
  34.                     <option value="text2">text2</option>
  35.                     <option value="text3">text3</option>
  36.                 </select>
  37.             </div>
  38.         </li>
  39.         <li>
  40.             <span>Range</span>
  41.             <div><input type="range"></div>
  42.         </li>
  43.         <li>
  44.             <span>Date</span>
  45.             <div><input type="date"></div>
  46.         </li>
  47.         <li>
  48.             <span>Profile Images</span>
  49.             <div><input type="file"></div>
  50.         </li>
  51.         <li>
  52.             <span>Personal Info</span>
  53.             <div><textarea></textarea></div>
  54.         </li>
  55.         <li>
  56.             <span>Shipping</span>
  57.             <div>
  58.                 <label><input name="z1" type="radio" checked>Standard</label>
  59.                 <label><input name="z1" type="radio">Premium</label>
  60.             </div>
  61.         </li>
  62.         <li>
  63.             <span>Shipping</span>
  64.             <div>
  65.                 <label class="line"><input name="z2" type="checkbox" checked>class="line"</label>
  66.                 <label class="line"><input name="z2" type="checkbox">class="line"</label>
  67.             </div>
  68.         </li>
  69.         <li>
  70.             <div class="tc"><button type="button" class="btn">Submit</button></div>
  71.         </li>
  72.     </ul>
  73. </form>

比例Ratio

通过预定义的class="ratio60~100"快速调整表单元素在主体空间的占比

添加class="ratio100"使表单元素占比100%

表单 Form - 图4

  1. <form>
  2.     <ul class="form ratio100">
  3.         <li>
  4.             <span>E-mail</span>
  5.             <div><input type="text"></div>
  6.         </li>
  7.         <li>
  8.             <span>Password</span>
  9.             <div><input type="text"></div>
  10.         </li>
  11.         <li>
  12.             <div><label><input type="checkbox">Remember me</label></div>
  13.         </li>
  14.         <li>
  15.             <div><button type="button" class="btn">Submit</button></div>
  16.         </li>
  17.     </ul>
  18. </form>

添加class="ratio90"使表单元素占比90%

表单 Form - 图5

  1. <form>
  2.     <ul class="form ratio90">
  3.         ...
  4.     </ul>
  5. </form>

添加class="ratio80"使表单元素占比80%

表单 Form - 图6

  1. <form>
  2.     <ul class="form ratio80">
  3.         ...
  4.     </ul>
  5. </form>

添加class="ratio70"使表单元素占比70%

表单 Form - 图7

  1. <form>
  2.     <ul class="form ratio70">
  3.         ...
  4.     </ul>
  5. </form>

添加class="ratio60"使表单元素占比60%

表单 Form - 图8

  1. <form>
  2.     <ul class="form ratio60">
  3.         ...
  4.     </ul>
  5. </form>

响应式排列Responsive Layout

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

  1. <form>
  2.     <ul class="form ratio80 ratio-s100">
  3.         <li>
  4.             <span>E-mail</span>
  5.             <div><input type="text"></div>
  6.         </li>
  7.         <li>
  8.             <span>Password</span>
  9.             <div><input type="text"></div>
  10.         </li>
  11.         <li>
  12.             <div><label><input type="checkbox">Remember me</label></div>
  13.         </li>
  14.         <li>
  15.             <div><button type="button" class="btn">Submit</button></div>
  16.         </li>
  17.     </ul>
  18. </form>

向右对齐Align Right

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

表单 Form - 图9

  1. <form>
  2.     <ul class="form ratio60 tr">
  3.         ...
  4.     </ul>
  5. </form>

纯文本Text

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

表单 Form - 图10

  1. <form>
  2.     <ul class="form ratio80 ratio-s100">
  3.         <li>
  4.             <span>E-mail</span>
  5.             <div class="text">diquick@qq.com</div>
  6.         </li>
  7.         <li>
  8.             <span>Password</span>
  9.             <div><input type="text"></div>
  10.         </li>
  11.     </ul>
  12. </form>

图标元素Text

为<div>元素添加class="icon"，并在input元素前添加图标元素

表单 Form - 图11

  1. <form>
  2.     <ul class="form ratio80 ratio-s100">
  3.         <li>
  4.             <span>E-mail</span>
  5.             <div class="icon"><i class="flaticon-email89"></i><input type="text"></div>
  6.         </li>
  7.         <li>
  8.             <span>Password</span>
  9.             <div class="icon"><i class="flaticon-locked44"></i><input type="text"></div>
  10.         </li>
  11.     </ul>
  12. </form>

Input

表单 Form - 图12

  1. <form>
  2.     <ul class="form ratio80 ratio-s100">
  3.         <li>
  4.             <span>Not border</span>
  5.             <div><input type="text" class="notborder" placeholder="Not border"></div>
  6.         </li>
  7.         <li>
  8.             <span><p>Note</span>
  9.             <div>
  10.                 <input type="text">
  11.                 <p>We just need a little more info to create your account</p>
  12.             </div>
  13.         </li>
  14.         <li>
  15.             <span>Active</span>
  16.             <div><input type="text" class="active"></div>
  17.         </li>
  18.         <li>
  19.             <span>Disabled</span>
  20.             <div><input type="text" disabled></div>
  21.         </li>
  22.         <li>
  23.             <span>checkbox,radio</span>
  24.             <div>
  25.                 <label><input type="checkbox"><i class="flaticon-design25 mr3"></i>Icon</label>
  26.                 <label class="disabled"><input type="checkbox" disabled>Disabled</label>
  27.             </div>
  28.         </li>
  29.         <li>
  30.             <div>
  31.                 <label class="line"><input type="radio" name="z3">line</label>
  32.                 <label class="line"><input type="radio" name="z3">line</label>
  33.             </div>
  34.         </li>
  35.         <li>
  36.             <div>
  37.                 <label class="line">
  38.                     <input type="checkbox">Note
  39.                     <p>By signing in you agree to the terms of the User Agreement and Privacy Policy.</p>
  40.                 </label>
  41.             </div>
  42.         </li>
  43.     </ul>
  44. </form>

Select

表单 Form - 图13

  1. <form>
  2.     <ul class="form ratio80 ratio-s100">
  3.         <li>
  4.             <span>Note</span>
  5.             <div>
  6.                 <select>
  7.                     <option>Note</option>
  8.                     <option value="text1">text1</option>
  9.                     <option value="text2">text2</option>
  10.                     <option value="text3">text3</option>
  11.                 </select>
  12.                 <p>We just need a little more info to create your account</p>
  13.             </div>
  14.         </li>
  15.         <li>
  16.             <span>Line</span>
  17.             <div>
  18.                 <select class="line">
  19.                     <option>class="line"</option>
  20.                     <option value="text1">text1</option>
  21.                     <option value="text2">text2</option>
  22.                     <option value="text3">text3</option>
  23.                 </select>
  24.             </div>
  25.         </li>
  26.         <li>
  27.             <span>Multiple</span>
  28.             <div>
  29.                 <select class="line" multiple>
  30.                     <option>class="line"</option>
  31.                     <option value="text1">text1</option>
  32.                     <option value="text2">text2</option>
  33.                     <option value="text3">text3</option>
  34.                 </select>
  35.             </div>
  36.         </li>
  37.         <li>
  38.             <span>Active and Disabled</span>
  39.             <div>
  40.                 <select class="active">
  41.                     <option>Active</option>
  42.                     <option value="text1">text1</option>
  43.                     <option value="text2">text2</option>
  44.                     <option value="text3">text3</option>
  45.                 </select>
  46.                 <select disabled>
  47.                     <option>Disabled</option>
  48.                     <option value="text1">text1</option>
  49.                     <option value="text2">text2</option>
  50.                     <option value="text3">text3</option>
  51.                 </select>
  52.             </div>
  53.         </li>
  54.     </ul>
  55. </form>

Textarea

表单 Form - 图14

  1. <form>
  2.     <ul class="form ratio80 ratio-s100">
  3.         <li>
  4.             <span>Note</span>
  5.             <div><textarea></textarea><p>We just need a little more info to create your account</p></div>
  6.         </li>
  7.         <li>
  8.             <span>Active</span>
  9.             <div><textarea class="active"></textarea></div>
  10.         </li>
  11.         <li>
  12.             <span>Disabled</span>
  13.             <div><textarea disabled></textarea></div>
  14.         </li>
  15.     </ul>
  16. </form>

自定义风格Custom Style

可以使用自定义风格工具快速创建CSS

表单 Form - 图15

  1. <form>
  2.     <ul class="form ratio80 ratio-s100 mystyle">
  3.         ...
  4.     </ul>
  5. </form>