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. 紫书 例题 9-4 UVa 116 ( 字典序递推顺序）

    这道题在递推方式和那个数字三角形有一点相像,很容易推出来 但是这道题要求的是字典序,这里就有一个递推顺序的问题 这里用逆推,顺推会很麻烦,为什么呢? 如果顺推的话,最后一行假设有种情况是最小值,那么你 ...

  2. 最近学习了一下DeepLearning，发现时NB。

    持续关注,有空放个算法到线上的推荐上.

  3. .netcore2.1开发部署及在centos7.x下的部署

    .netcore2.1的优势毋容置疑,具体的性能建议去实际test对比,相对于之前的.netfx不知道快了多少.选择C#作为后端开发语言,主要基于以下三点: 1)代码优雅 : 2)快速搭建一套小型企业 ...

  4. 洛谷—— P2387 魔法森林

    题目描述 为了得到书法大家的真传,小 E 同学下定决心去拜访住在魔法森林中的隐 士.魔法森林可以被看成一个包含 n 个节点 m 条边的无向图,节点标号为 1,2,3,…,n,边标号为 1,2,3,…, ...

  5. SQL Server 为代码减负之存储过程

        存储过程能够用来提高数据库的查询效率.由于它事先被编译过.被储存于内存中,每次执行前.不必被从新编译,所以效率非常高. 存储过程是一组sql增删改查的集合,假设程序中的一个功能涉及到对数据库的 ...

  6. RvmTranslator6.0

    RvmTranslator6.0 eryar@163.com 1. Introduction RvmTranslator can translate the RVM file exported by ...

  7. SSM（spring,springMVC,Mybatis）框架的整合

    这几天想做一个小项目,所以搭建了一个SSM框架. 1.基本概念 1.1.Spring   Spring是一个开源框架,Spring是于2003 年兴起的一个轻量级的Java 开发框架,由Rod Joh ...

  8. js---16原型链

    var p = {name:"sss"}; var c2 = Object.create(p,{age:32,salar:"eee"});//c2就继承了p的属 ...

  9. vue --- watch 高级用法

    假设有如下代码: <div> <p>FullName: {{fullName}}</p> <p>FirstName: <input type=&q ...

  10. [lougu1341]无序字母对

    Description: 给定n个各不相同的无序字母对(区分大小写,无序即字母对中的两个字母可以位置颠倒).请构造一个有n+1个字母的字符串使得每个字母对都在这个字符串中出现. Solution: 欧 ...