amazeui学习笔记--css（HTML元素3）--表单Form

一、总结

1、form样式使用：在容器上添加 .am-form class，容器里的子元素才会应用 Amaze UI 定义的样式。 am-form.     <form class="am-form">

2、单选复选框：可以做成块级和行内元素：

  • 块级显示时在容器上添加 .am-checkbox、.am-radio class；
  • 行内显示时在容器上添加 .am-checkbox-inline、.am-radio-inline class。

3、form组：记住后面这两个类就好：form-group：<div class="am-form-group am-form-file"> am是命名空间 form是模块，file是具体标签

4、表单每种标签都有对应样式：用法是在外层div+class给样式，里层input该怎么写还是怎么写：

     <div class="am-radio">

       <label>

         <input type="radio" name="doc-radio-1" value="option2">

         单选框 - 选项2

       </label>

     </div>

5、圆角或者椭圆形表单：加am-radius或者am-round即可，<p><input type="text" class="am-form-field am-radius" placeholder="圆角表单域" /></p>

6、禁用区域元素：<fieldset disabled>。。。。。</fieldset>

7、禁用元素支持两种方式：am-disabled 和 disabled属性

8、表单水平排列：在 <form> 添加 .am-form-horizontal class 并结合网格系统使用。

 <form class="am-form am-form-horizontal">

   <div class="am-form-group">

     <label for="doc-ipt-3" class="am-u-sm-2 am-form-label">电子邮件</label>

     <div class="am-u-sm-10">

       <input type="email" id="doc-ipt-3" placeholder="输入你的电子邮件">

     </div>

   </div>

 </form>

9、表单域icon：div中加上am-form-icon，里面就可以用i标签弄icon了

 <form action="" class="am-form am-form-inline">

   <div class="am-form-group am-form-icon">

     <i class="am-icon-calendar"></i>

     <input type="text" class="am-form-field" placeholder="日期">

   </div>

 </form>

10、表单标签上下的文本：<label class="am-form-label" for="doc-ipt-success">验证成功</label>

11、 其它内容例如：带图标的验证、表单域大小后面再看

二、Form 表单元素

<form> 元素样式。

基本使用

单选、复选框

checkbox、radio 类型的 <input> 与其他元素稍有区别：

  • 块级显示时在容器上添加 .am-checkbox、.am-radio class；
  • 行内显示时在容器上添加 .am-checkbox-inline、.am-radio-inline class。

下拉选框

<select> 是一个比较奇葩的元素，长得丑还不让人给它打扮。

单使用 CSS， 很难给 select 定义跨浏览器兼容的样式，保留浏览器默认样式可能是它最好的归宿（Pure CSS 就是这么干的)。Amaze UI 中针对 Webkit 浏览器写了一点样式替换了默认的下上三角形。

文件选择域

<input type="file"> 也是 CSS 啃不动的一块骨头，如果实在看不惯原生的样式，一般的做法是把文件选择域设为透明那个，覆盖在其他元素。

 Copy
 选择要上传的文件
 选择要上传的文件
<div class="am-form-group am-form-file">

  <button type="button" class="am-btn am-btn-default am-btn-sm">

    <i class="am-icon-cloud-upload"></i> 选择要上传的文件</button>

  <input type="file" multiple>

</div>

<hr/>

<div class="am-form-group am-form-file">

  <i class="am-icon-cloud-upload"></i> 选择要上传的文件

  <input type="file" multiple>

</div>

存在的问题是不会显示已经选择的文件，对用户不够友好，需要配合 JS 使用：

 Copy
 选择要上传的文件
 
<div class="am-form-group am-form-file">

  <button type="button" class="am-btn am-btn-danger am-btn-sm">

    <i class="am-icon-cloud-upload"></i> 选择要上传的文件</button>

  <input id="doc-form-file" type="file" multiple>

</div>

<div id="file-list"></div>

<script>

  $(function() {

    $('#doc-form-file').on('change', function() {

      var fileNames = '';

      $.each(this.files, function() {

        fileNames += '<span class="am-badge">' + this.name + '</span> ';

      });

      $('#file-list').html(fileNames);

    });

  });

</script>

基本演示

在容器上添加 .am-form class，容器里的子元素才会应用 Amaze UI 定义的样式。

 Copy
表单标题

邮件
密码
原生文件上传域

请选择要上传的文件...

Amaze UI 文件上传域

 选择要上传的文件
复选框，选我选我选我
单选框 - 选项1
单选框 - 选项2
选我同时可以选我还可以选我
每一分每一秒多好
下拉多选框
选项一...
选项二.....
选项三........
多选框
1
2
3
4
5
文本域

提交

<form class="am-form">

  <fieldset>

    <legend>表单标题</legend>

    <div class="am-form-group">

      <label for="doc-ipt-email-1">邮件</label>

      <input type="email" class="" id="doc-ipt-email-1" placeholder="输入电子邮件">

    </div>

    <div class="am-form-group">

      <label for="doc-ipt-pwd-1">密码</label>

      <input type="password" class="" id="doc-ipt-pwd-1" placeholder="设置个密码吧">

    </div>

    <div class="am-form-group">

      <label for="doc-ipt-file-1">原生文件上传域</label>

      <input type="file" id="doc-ipt-file-1">

      <p class="am-form-help">请选择要上传的文件...</p>

    </div>

    <div class="am-form-group am-form-file">

      <label for="doc-ipt-file-2">Amaze UI 文件上传域</label>

      <div>

        <button type="button" class="am-btn am-btn-default am-btn-sm">

          <i class="am-icon-cloud-upload"></i> 选择要上传的文件</button>

      </div>

      <input type="file" id="doc-ipt-file-2">

    </div>

    <div class="am-checkbox">

      <label>

        <input type="checkbox"> 复选框，选我选我选我

      </label>

    </div>

    <div class="am-radio">

      <label>

        <input type="radio" name="doc-radio-1" value="option1" checked>

        单选框 - 选项1

      </label>

    </div>

    <div class="am-radio">

      <label>

        <input type="radio" name="doc-radio-1" value="option2">

        单选框 - 选项2

      </label>

    </div>

    <div class="am-form-group">

      <label class="am-checkbox-inline">

        <input type="checkbox" value="option1"> 选我

      </label>

      <label class="am-checkbox-inline">

        <input type="checkbox" value="option2"> 同时可以选我

      </label>

      <label class="am-checkbox-inline">

        <input type="checkbox" value="option3"> 还可以选我

      </label>

    </div>

    <div class="am-form-group">

      <label class="am-radio-inline">

        <input type="radio"  value="" name="docInlineRadio"> 每一分

      </label>

      <label class="am-radio-inline">

        <input type="radio" name="docInlineRadio"> 每一秒

      </label>

      <label class="am-radio-inline">

        <input type="radio" name="docInlineRadio"> 多好

      </label>

    </div>

    <div class="am-form-group">

      <label for="doc-select-1">下拉多选框</label>

      <select id="doc-select-1">

        <option value="option1">选项一...</option>

        <option value="option2">选项二.....</option>

        <option value="option3">选项三........</option>

      </select>

      <span class="am-form-caret"></span>

    </div>

    <div class="am-form-group">

      <label for="doc-select-2">多选框</label>

      <select multiple class="" id="doc-select-2">

        <option>1</option>

        <option>2</option>

        <option>3</option>

        <option>4</option>

        <option>5</option>

      </select>

    </div>

    <div class="am-form-group">

      <label for="doc-ta-1">文本域</label>

      <textarea class="" rows="5" id="doc-ta-1"></textarea>

    </div>

    <p><button type="submit" class="am-btn am-btn-default">提交</button></p>

  </fieldset>

</form>

表单形状

 Copy
<p><input type="text" class="am-form-field am-radius" placeholder="圆角表单域" /></p>

<p><input type="text" class="am-form-field am-round" placeholder="椭圆表单域"/></p>

表单域状态

设置表单元素的不同状态。

禁用单个元素

给 <input> 添加 disabled 属性以禁用表单元素。

 Copy
<form class="am-form">

  <input class="am-form-field" type="text" placeholder="禁止输入的表单..." disabled>

</form>

给 <fieldset> 元素增加 disabled 属性，禁用所有的子元素。

禁用域内的元素

 Copy
禁用的文本框
禁用的下拉选框
禁止选择我
无法选中的复选框

Submit

<form class="am-form">

  <fieldset disabled>

    <div class="am-form-group">

      <label for="doc-ds-ipt-1">禁用的文本框</label>

      <input type="text" id="doc-ds-ipt-1" class="am-form-field" placeholder="禁止输入">

    </div>

    <div class="am-form-group">

      <label for="oc-ds-select-1">禁用的下拉选框</label>

      <select id="oc-ds-select-1" class="am-form-field">

        <option>禁止选择我</option>

      </select>

    </div>

    <div class="am-checkbox">

      <label>

        <input type="checkbox"> 无法选中的复选框

      </label>

    </div>

    <button type="submit" class="am-btn am-btn-primary">Submit</button>

  </fieldset>

</form>

禁用链接

<a> 元素设置禁用状态需要加上 .am-disabled class。

 Copy
<a class="am-btn am-btn-primary am-disabled">禁止提交</a>

表单排列

水平排列

在 <form> 添加 .am-form-horizontal class 并结合网格系统使用。

 Copy
电子邮件

密码

 记住十万年
提交登入
<form class="am-form am-form-horizontal">

  <div class="am-form-group">

    <label for="doc-ipt-3" class="am-u-sm-2 am-form-label">电子邮件</label>

    <div class="am-u-sm-10">

      <input type="email" id="doc-ipt-3" placeholder="输入你的电子邮件">

    </div>

  </div>

  <div class="am-form-group">

    <label for="doc-ipt-pwd-2" class="am-u-sm-2 am-form-label">密码</label>

    <div class="am-u-sm-10">

      <input type="password" id="doc-ipt-pwd-2" placeholder="设置一个密码吧">

    </div>

  </div>

  <div class="am-form-group">

    <div class="am-u-sm-offset-2 am-u-sm-10">

      <div class="checkbox">

        <label>

          <input type="checkbox"> 记住十万年

        </label>

      </div>

    </div>

  </div>

  <div class="am-form-group">

    <div class="am-u-sm-10 am-u-sm-offset-2">

      <button type="submit" class="am-btn am-btn-default">提交登入</button>

    </div>

  </div>

</form>

行内排列

在外围容器上添加 .am-form-inline。 注意： 行内排列的元素并没有设置右边距，默认使用 inline-block 元素的间距，压缩 HTML 后行内表单元素的右边距会消失，需要自行处理。

 Copy
 记住我

登录

<form class="am-form-inline" role="form">

  <div class="am-form-group">

    <input type="email" class="am-form-field" placeholder="电子邮件">

  </div>

  <div class="am-form-group">

    <input type="password" class="am-form-field" placeholder="密码">

  </div>

  <div class="am-checkbox">

    <label>

      <input type="checkbox"> 记住我

    </label>

  </div>

  <button type="submit" class="am-btn am-btn-default">登录</button>

</form>

表单域 Icon

表单 group 元素上添加 .am-form-icon，依赖 icon 组件。

 Copy
<form action="" class="am-form am-form-inline">

  <div class="am-form-group am-form-icon">

    <i class="am-icon-calendar"></i>

    <input type="text" class="am-form-field" placeholder="日期">

  </div>

  <div class="am-form-group am-form-icon">

    <i class="am-icon-clock-o"></i>

    <input type="text" class="am-form-field" placeholder="时间">

  </div>

</form>

验证状态

演示

 Copy
验证成功
验证警告
验证失败
<form action="" class="am-form">

  <div class="am-form-group am-form-success am-form-icon am-form-feedback">

    <label class="am-form-label" for="doc-ipt-success">验证成功</label>

    <input type="text" id="doc-ipt-success" class="am-form-field">

    <span class="am-icon-check"></span>

  </div>

  <div class="am-form-group am-form-warning">

    <label class="am-form-label" for="doc-ipt-warning">验证警告</label>

    <input type="text" id="doc-ipt-warning" class="am-form-field">

  </div>

  <div class="am-form-group am-form-error">

    <label class="am-form-label" for="doc-ipt-error">验证失败</label>

    <input type="text" id="doc-ipt-error" class="am-form-field">

  </div>

</form>

带图标的验证

添加 .am-form-icon 和 .am-form-feedback。

注意：Icon 的样式针对 .am-form-group 单行排列编写，多行的时候会出现位置不对的情况。

v2.3.1 中调整样式，支持带有 label 的情形。

 Copy
<form class="am-form">

  <div class="am-form-group am-form-success am-form-icon am-form-feedback">

    <input type="text" class="am-form-field" placeholder="验证成功">

    <span class="am-icon-check"></span>

  </div>

  <div class="am-form-group am-form-warning am-form-icon am-form-feedback">

    <input type="text" class="am-form-field" placeholder="验证警告">

    <span class="am-icon-warning"></span>

  </div>

  <div class="am-form-group am-form-error am-form-icon am-form-feedback">

    <input type="text" class="am-form-field" placeholder="验证失败">

    <span class="am-icon-times"></span>

  </div>

</form>

水平排列：

 Copy
电子邮件

<form class="am-form am-form-horizontal">

  <div class="am-form-group am-form-success am-form-icon am-form-feedback">

    <label for="doc-ipt-3-a" class="am-u-sm-2 am-form-label">电子邮件</label>

    <div class="am-u-sm-10">

      <input type="email" id="doc-ipt-3-a" class="am-form-field" placeholder="输入你的电子邮件">

      <span class="am-icon-warning"></span>

    </div>

  </div>

</form>

表单域大小

单个域的大小

在表单元素上添加以下类名：

  • am-input-lg
  • am-input-sm

适用于没有 <label> 的表单，如果表单包含 <label> 且需要调整大小的，请往后看。

 Copy
添加了 .am-input-lg

select 默认大小

添加了 .am-input-sm

<form class="am-form">

  <input class="am-form-field am-input-lg" type="text" placeholder="添加了 .am-input-lg">

  <br/>

  <input class="am-form-field" type="text" placeholder="默认的 input">

  <br/>

  <input class="am-form-field am-input-sm" type="text" placeholder="添加了 .am-input-sm">

  <br/>

  <div class="am-form-group am-form-select">

    <select class=" am-input-lg">

      <option value="">添加了 .am-input-lg</option>

    </select>

  </div>

  <div class="am-form-group am-form-select">

    <select class="">

      <option value="">select 默认大小</option>

    </select>

  </div>

  <div class="am-form-group am-form-select">

    <select class=" am-input-sm">

      <option value="">添加了 .am-input-sm</option>

    </select>

  </div>

</form>

组大小

在 .am-form-group 的基础上添加以下 class，也可以实现对表单大小的设置：

  • .am-form-group-sm
  • .am-form-group-lg

注意可输入类型的 input 元素上需要添加 .am-form-field，不需要再添加 .am-input-sm 此类的 class。

 Copy
电邮

密码

记住十万年
提交登入
<form class="am-form am-form-horizontal">

  <!-- am-form-group 的基础上添加了 am-form-group-sm -->

  <div class="am-form-group am-form-group-sm">

    <label for="doc-ipt-3-1" class="am-u-sm-2 am-form-label">电邮</label>

    <div class="am-u-sm-10">

      <input type="email" id="doc-ipt-3-1" class="am-form-field" placeholder="输入你的电子邮件">

    </div>

  </div>

  <!-- am-form-group 的基础上添加了 am-form-group-lg -->

  <div class="am-form-group am-form-group-lg">

    <label for="doc-ipt-pwd-21" class="am-u-sm-2 am-form-label">密码</label>

    <div class="am-u-sm-10">

      <input type="password" id="doc-ipt-pwd-21" class="am-form-field" placeholder="设置一个密码吧">

    </div>

  </div>

  <div class="am-form-group am-form-group-sm">

    <div class="am-u-sm-offset-2 am-u-sm-10">

      <div class="am-checkbox">

        <label>

          <input type="checkbox"> 记住十万年

        </label>

      </div>

    </div>

  </div>

  <div class="am-form-group">

    <div class="am-u-sm-10 am-u-sm-offset-2">

      <button type="submit" class="am-btn am-btn-default">提交登入</button>

    </div>

  </div>

</form>

输入框组

使用 .am-form-set 嵌套一系列 <input> 元素。

 Copy
注册个账号
<div class="am-g">

  <div class="am-u-md-8 am-u-sm-centered">

    <form class="am-form">

      <fieldset class="am-form-set">

        <input type="text" placeholder="取个名字">

        <input type="text" placeholder="设个密码">

        <input type="email" placeholder="填下邮箱">

      </fieldset>

      <button type="submit" class="am-btn am-btn-primary am-btn-block">注册个账号</button>

    </form>

  </div>

</div>

参考链接

amazeui学习笔记--css（HTML元素3）--表单Form的更多相关文章

  1. amazeui学习笔记--css（HTML元素5）--表格Table

    amazeui学习笔记--css(HTML元素5)--表格Table 一.总结 1.基本样式:am-table:直接模块名  <table class="am-table"& ...

  2. amazeui学习笔记--css（HTML元素4）--图片image

    amazeui学习笔记--css(HTML元素4)--图片image 一.总结 1.响应式图片:随着页面宽度而变化 .am-img-responsive class. <img src=&quo ...

  3. amazeui学习笔记--css（HTML元素2）--代码Code

    amazeui学习笔记--css(HTML元素2)--代码Code 一.总结 1.行内代码:code标签<code> 2.代码片段:pre标签<pre> 3.限制代码块高度:添 ...

  4. amazeui学习笔记--css（HTML元素1）--按钮Button

    amazeui学习笔记--css(HTML元素1)--按钮Button 一.总结 1.button的基本使用:a.am-btn 在要应用按钮样式的元素上添加 .am-btn,b.颜色 再设置相应的颜色 ...

  5. amazeui学习笔记--css（基本样式3）--文字排版Typography

    amazeui学习笔记--css(基本样式3)--文字排版Typography 一.总结 1.字体:amaze默认非 衬线字体(sans-serif) 2.引用块blockquote和定义列表:引用块 ...

  6. amazeui学习笔记--css（布局相关1）--网格Grid

    amazeui学习笔记--css(布局相关1)--网格Grid 一.总结 基本使用 1.div+class布局:amaze里面采取的就是div+class的布局方式  <div class=&q ...

  7. amazeui学习笔记--css（基本样式2）--基础设置Base

    amazeui学习笔记--css(基本样式2)--基础设置Base 一.总结 1.盒子模型:外margin,内padding,这里的内外指的边框 2.border-box:Amaze UI 将所有元素 ...

  8. amazeui学习笔记--css（基本样式）--样式统一Normalize

    amazeui学习笔记--css(基本样式)--样式统一Normalize 一.总结 1.统一浏览器默认样式: Amaze UI 也使用了 normalize.css,就是让不同浏览器显示相同的样式 ...

  9. amazeui学习笔记--css（常用组件6）--图标Icon

    amazeui学习笔记--css(常用组件6)--图标Icon 一.总结 1.关注用法即可:在 HTML 上添加添加 am-icon-{图标名称} class. <span class=&quo ...

随机推荐

  1. Android学习总结（2）——App客户端与服务器交互中的token

    学习Token Token是什么? Token是服务端生成的一串字符串,以作客户端进行请求的一个令牌,当第一次登录后,服务器生成一个Token便将此Token返回给客户端,以后客户端只需带上这个Tok ...

  2. BZOJ——T 1113: [Poi2008]海报PLA

    http://www.lydsy.com/JudgeOnline/problem.php?id=1113 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: ...

  3. Eclipse+PyDev解决中文输入和注释问题

    Eclipse的设置 window->preferences->general->editors->text editors->spelling->encoding ...

  4. 使用bitmap处理海量数据

    bitmap是一个十分实用的结构.所谓的Bit-map就是用一个bit位来标记某个元素相应的Value, 而Key即是该元素.因为採用了Bit为单位来存储数据,因此在存储空间方面,能够大大节省.  适 ...

  5. ESP8266学习笔记4：ESP8266的SmartConfig

    今天花了将近一天的时间来研究ESP8266的SmartConfig功能,这个应该算是wifi云产品的标配.这篇文章先把SmartConfig操作一遍,我还写了还有一篇文章梳理了物理层的详细协议,点击这 ...

  6. C#变量引用与全局变量

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  7. POJ 2138 最长路

    思路: 如果j能由i得到 则i向j连一条边 答案就是最长路的末节点所代表的string //By SiriusRen #include <cstdio> #include <cstr ...

  8. 针对CDP协议攻击分析及安全防护

    针对CDP协议攻击分析及安全防护 熟悉Cisco的朋友都知道CDP协议是思科公司独特的发现协议,在思科公司出产的所有路由器和交换机里面都能运行此协议,一台运行C D P的路由器或交换机能够得知与它直接 ...

  9. HDU 2689 Tree

    Tree Time Limit: 6000/2000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submis ...

  10. spring webSocket The HTTP response from the server [200] did not permit the HTTP upgrade to WebSocket

    在springboot 1.5.9版本 WebSocketConfig配置 registry.addEndpoint("/webSocket").withSockJS();在加了. ...