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该怎么写还是怎么写:
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-radio
class; - 行内显示时在容器上添加
.am-checkbox-inline
、.am-radio-inline
class。
下拉选框
<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"> <input