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"> <input type="radio"