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. 【Uva 10934】Dropping water balloons

    [Link]: [Description] 等价题意: 某人在1..n内选一个数x; 然后让你去猜; 你可以问他是不是在哪个范围里; 每次会告诉你YES或者NO; 问你在最坏的情况下猜出答案需要猜多少 ...

  2. CodeForcesGym 100502E Opening Ceremony

    Opening Ceremony Time Limit: 5000ms Memory Limit: 524288KB This problem will be judged on CodeForces ...

  3. java对象和json数据转换实现方式1-使用json-lib实现

    測试代码: package com.yanek.util.json; import java.util.ArrayList; import java.util.List; import net.sf. ...

  4. 新手学，java使用分水岭算法进行图像切割（一）

    近期被图像切割整的天昏地暗的,在此感谢老朋友周洋给我关于分水岭算法的指点!本来打算等彩色图像切割有个完满的结果再写这篇文章,可是考虑到到了这一步也算是一个阶段,所以打算对图像切割做一个系列的博文,于是 ...

  5. C++反射机制：可变参数模板实现C++反射（使用C++11的新特性--可变模版参数，只根据类的名字（字符串）创建类的实例。在Nebula高性能网络框架中大量应用）

    1. 概要   本文描述一个通过C++可变参数模板实现C++反射机制的方法.该方法非常实用,在Nebula高性能网络框架中大量应用,实现了非常强大的动态加载动态创建功能.Nebula框架在码云的仓库地 ...

  6. RISC-V指令集的诞生，"V"也表示变化(variation)和向量(vectors)

    RISC-V登场,Intel和ARM会怕吗? 张竞扬 摩尔精英 摩尔精英.创始人兼CEO 82 人赞了该文章 在2015年12月的Nature网站上,由U.C. Berkeley等几个大学的研究人员主 ...

  7. js---08函数 定时器

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

  8. Android学习笔记之图像颜色处理（ColorMatrix）

    对图像进行颜色方面的处理,通过使用颜色矩阵(ColorMatrix)来实现.从而可以达到很多特效如黑白老照片.泛黄旧照片等等. 1.颜色矩阵(ColorMatrix) 这里有详细的介绍:http:// ...

  9. kali之EtterCap学习

    EtterCap是一个基于ARP地址欺骗方式的网络嗅探工具,主要适用于交换局域网络.借助于EtterCap嗅探软件,渗透测试人员可以检测网络内明文数据通讯的安全性,及时采取措施,避免敏感的用户名/密码 ...

  10. mapper提示Could not autowire. No beans of … type found？

    工具及背景: IntelliJ IDEA 2016.1.3 Ultimate.spring boot, maven项目,利用mybatis 注解的方式查询mysql 在自动生成工具生成代码后,serv ...