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-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 表单元素

目录

• 基本使用
  • 单选、复选框
  • 下拉选框
  • 文件选择域
  • 基本演示
  • 表单形状
• 表单域状态
  • 禁用单个元素
  • 禁用域内的元素
  • 禁用链接
• 表单排列
  • 水平排列
  • 行内排列
• 表单域 Icon
• 验证状态
  • 演示
  • 带图标的验证
• 表单域大小
  • 单个域的大小
  • 组大小
• 输入框组
• 参考链接

<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

选我同时可以选我还可以选我

每一分每一秒多好

下拉多选框选项一...选项二.....选项三........

多选框12345

文本域

提交

<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 

转载于:https://www.cnblogs.com/Renyi-Fan/p/9009165.html