amazeui学习笔记--css（HTML元素3）--表单Form
amazeui学习笔记--css（HTML元素3）--表单Form
一、总结
1、form样式使用：在容器上添加 .am-form class，容器里的子元素才会应用 Amaze UI 定义的样式。 am-form. <form class="am-form">
2、单选复选框：可以做成块级和行内元素：
- 块级显示时在容器上添加
.am-checkbox、.am-radioclass； - 行内显示时在容器上添加
.am-checkbox-inline、.am-radio-inlineclass。
3、form组：记住后面这两个类就好：form-group：<div class="am-form-group am-form-file"> am是命名空间 form是模块，file是具体标签
4、表单每种标签都有对应样式：用法是在外层div+class给样式，里层input该怎么写还是怎么写：
1 <div class="am-radio"> 2 <label> 3 <input type="radio" name="doc-radio-1" value="option2"> 4 单选框 - 选项2 5 </label> 6 </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 并结合网格系统使用。
1 <form class="am-form am-form-horizontal"> 2 <div class="am-form-group"> 3 <label for="doc-ipt-3" class="am-u-sm-2 am-form-label">电子邮件</label> 4 <div class="am-u-sm-10"> 5 <input type="email" id="doc-ipt-3" placeholder="输入你的电子邮件"> 6 </div> 7 </div> 8 </form>
9、表单域icon：div中加上am-form-icon，里面就可以用i标签弄icon了
1 <form action="" class="am-form am-form-inline"> 2 <div class="am-form-group am-form-icon"> 3 <i class="am-icon-calendar"></i> 4 <input type="text" class="am-form-field" placeholder="日期"> 5 </div> 11 </form>
10、表单标签上下的文本：<label class="am-form-label" for="doc-ipt-success">验证成功</label>
11、 其它内容例如：带图标的验证、表单域大小后面再看
二、Form 表单元素
目录
<form> 元素样式。
基本使用
单选、复选框
checkbox、radio 类型的 <input> 与其他元素稍有区别：
- 块级显示时在容器上添加
.am-checkbox、.am-radioclass； - 行内显示时在容器上添加
.am-checkbox-inline、.am-radio-inlineclass。
下拉选框
<select> 是一个比较奇葩的元素，长得丑还不让人给它打扮。
单使用 CSS， 很难给 select 定义跨浏览器兼容的样式，保留浏览器默认样式可能是它最好的归宿（Pure CSS 就是这么干的)。Amaze UI 中针对 Webkit 浏览器写了一点样式替换了默认的下上三角形。
文件选择域
<input type="file"> 也是 CSS 啃不动的一块骨头，如果实在看不惯原生的样式，一般的做法是把文件选择域设为透明那个，覆盖在其他元素。
<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 使用：
<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 定义的样式。
<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">
<