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. 紫书 习题 10-17 UVa 11105 (筛法）

    类似于素数筛的思想去做,不然暴力会超时而且还要判重 #include<cstdio> #include<cstring> #include<vector> #def ...

  2. PatentTips - Device virtualization and assignment of interconnect devices

    BACKGROUND Standard computer interconnects, particularly for personal computers or workstations, may ...

  3. 关于Java的10个谎言

    以下的这些都算是比較高级的问题了.面试中一般也非常少问到.由于它们可能会把面试者拒之门外.只是你能够自己找个时间来实践一下. System.exit(0)会跳过finally块的运行 System.s ...

  4. 改动UINavigationBar （导航栏）上NavigationBarItem 的字体大小和颜色的用法

    //创建一个左边button UIBarButtonItem *leftButton = [[UIBarButtonItem alloc] initWithTitle:@"<" ...

  5. 动态游标（比如表名作为參数）以及动态SQL分析

    表名作为參数的动态游标 DECLARE v_table_name VARCHAR2(30) := 'CUX_MES_WIP_BARCODE_MAP'; --l_rec SYS_REFCURSOR; T ...

  6. jquery17 DOM操作 : 添加 删除 获取 包装 DOM筛选

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  7. 基于Linux平台Softimage XSI 演示

     2009年底上映的<阿凡达>是电影特效的巅峰之作,就在本月初上映的变形金刚3每次观看之后看得眼花缭乱总能让我热血沸腾,要是自己能做出那样的特效该多好,Linux下研究Maya已经有一段日 ...

  8. Shiro + SSM（框架） + Freemarker（jsp）

    Shiro + SSM(框架) + Freemarker(jsp)讲解的权限控制Demo,还不赶快去下载? 我们知道Ajax不能做页面redirect和forward跳转,所以Ajax请求假如没登录, ...

  9. [C++11] 默认构造函数

    类通过一个特殊的构造函数来控制默认初始化过程.这个函数就是默认构造函数.默认构造函数无需不论什么实參. 我们能够显示的定义默认构造函数也能够让编译器为我们生成默认构造函数. 默认构造函数以例如以下规则 ...

  10. [Redux-Observable && Unit Testing] Use tests to verify updates to the Redux store (rxjs scheduler)

    In certain situations, you care more about the final state of the redux store than you do about the ...