表单相关

一、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