表单相关

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

总结

以上是生活随笔为你收集整理的表单相关的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。