一、HTML相關
1、input常用類型

text，password，radio，checkbox，button，reset，submit，file，hidden，number，tel

2、輸入框

<iput type="text" name="名稱" size="顯示寬度" maxlength="最大寬度" value="值" required autofocus/>

3、單選按鈕

<input type="radio" name="名稱" value="值" checked="checked"/>

4、列表框
A、菜單式

<select name="名稱" size="高度"><optgroup label="組名"><option value="值" selected="selected"></option><optgroup> </select>

B、列表式

<select name="名稱" size="高度" multiple="multiple">允許多選

一組列表式的列表框，必須命名為數組形式。
5、readonly和disabled的區別

readonly不可編輯，但可以選擇和復制，值可以傳遞到后臺； disabled不能編輯，不能復制，不能選擇，值不可以傳遞到后臺。

6、點擊文字，選中radio
除了js實現，我們也可以用lable標簽的for屬性來實現。

<form> <label for="male">Male</label><input type="radio" name="sex" id="male"><br /> <label for="female">Female</label><input type="radio" name="sex" id="female"> </form>

7、如何刪除input自動記憶的信息？

autocomplete = off

8、取消input在ios下，輸入的時候英文首字母的默認大寫

<input autocapitalize="off" autocorrect="off" />

9、用div模擬textarea

<div contenteditable=true>這是一個假文本域</div>

二、CSS相關

1、取消默認外觀

input, select, button, textarea{ -webkit-appearance:none; appearance: none; outline:none; }

2、禁用pc端表單輸入框默認清除按鈕

input[type="text"]::-ms-clear, input[type="tel"]::-ms-clear, input[type="number"]::-ms-clear { display:none; }

3、禁用select默認箭頭

select::-ms-expand { display:none; }

4、禁用radio和checkbox默認樣式

input[type="radio"]::-ms-check, input[type="checkbox"]::-ms-check { display:none; }

5、android上去掉語音輸入按鈕

input::-webkit-input-speech-button {display: none}

6、給輸入框的placeholder設置顏色

::-webkit-input-placeholder { /* WebKit browsers */color: #999; } :-moz-placeholder { /* Mozilla Firefox 4 to 18 */color: #999; } ::-moz-placeholder { /* Mozilla Firefox 19+ */color: #999; } :-ms-input-placeholder { /* Internet Explorer 10+ */color: #999; } input:focus::-webkit-input-placeholder{ color:#999; }

7、input[type="file"]樣式美化

opacity: 0; filter: alpha(opacity=0);

把文件控件的opacity設置為0，然后用div包裹，對div設置樣式即可。

8、input[type="search"]搜索框右側小圖標如何美化？

input[type="search"]::-webkit-search-cancel-button{ -webkit-appearance: none;height: 15px; width: 15px;border-radius: 8px;background:url("images/searchicon.png") no-repeat 0 0;background-size: 15px 15px; }

9、日期選擇組件美化

input[type="date"]::-webkit-calendar-picker-indicator {display: none; ?}

10、textarea禁止拖動

resize: none;

11、禁用number的箭頭

input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {-webkit-appearance: none; } input[type="number"]{-moz-appearance: textfield; }

三、JS相關
1、給input賦值的兩種方式

A、給input設置屬性 dom_input.value = 200; 你會在視圖界面看到文本框的值是200，但是審查元素時，發現input標簽的value值沒變化，不是想象中的200。 B、給input添加屬性 dom_input.setAttribute('value',304); 你會在視圖界面看到文本框的值沒變化，還是200，不是想象中的304，但是審查元素時，發現input標簽有value屬性了，值為304。 總之dom_input.value和dom_input.getAttribute('value')不是一回事兒，值也不相等。dom_input.value可以改變視圖界面文本框的值，dom_input.setAttribute('value',304)可以改變dom中的input標簽的value值。 console.dir(document.getElementById('kw'))查看元素，發現根目錄的value屬性值為200，attributes的子屬性value值為304。

2、選中checkbox

A、dom_ckb.checked = true; 可以直接在視圖上看到checkbox已經勾選，但是標簽屬性并沒有變化。 B、dom_ckb.setAttribute('checked',false); 可以看到標簽屬性有checked="false"，但視圖沒有任何變化。

綜上，dom_ckb.checked和dom_ckb.setAttribute('checked',false)沒有關系，也互不影響。

3、讓checkbox失效

A、dom_ckb.disabled = true; 可以直接在視圖上看到checkbox已經失效，但是標簽屬性并沒有變化。 B、dom_ckb.setAttribute('disabled',false); 可以看到標簽屬性有disabled="false"，但視圖沒有任何變化，checkbox依舊不可以點擊。

綜上，要用dom_ckb.disabled = true;來控制激活還是失效。

4、提交表單
用form寫表單，js里面寫form提交，如果關鍵字出現空格，請求的URL會出現加號；
用div寫表單，js里面寫按鈕提交或者鍵盤提交，如果關鍵字出現空格，請求的URL會把空格編碼%20；

轉載于:https://www.cnblogs.com/camille666/p/form.html

總結

以上是生活随笔為你收集整理的表单相关的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。