当前位置：首页 > news >正文

form表单和表单控件

news 2026/6/15 6:29:14

一、form表单

form标签有没有必要使用

二、表单控件

表单控件元素不要设置高度，或者以em作为高度的单位。文字和边框的距离可以使用padding来实现。

2.1、input控件

使用 input type='number' 表单有缺陷：这个表单只能输入数字，但是字母 e、字符+、- 确是可以输入。而表单中有e、+、-符号输入，js获取的值确是一个空字符串。如图
　　　　

　　如果要实现只能输入数字，需要通过事件辅助处理。这种情况使用 text表单，也可以模拟出数字表单控件。
```
<input type="text" oninput="this.value=this.value.replace(/\D/g,'')">
```
　　如果是是在移动端要调用出数字键盘的话，只能使用 number 控件，再通过事件辅助处理。
```
<input type="number" oninput="this.value=this.value.replace(/\D/g,'')">
```

数字输入框常用的控制【只能输入数字和小数点】：https://blog.csdn.net/weixin_42171955/article/details/98734640

只允许输入数字(整数：小数点不能输入)

<input type="text" onkeyup="value=value.replace(/[^\d]/g,'')" >

允许输入小数(两位小数)

<input type="text" onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')" >

允许输入小数(一位小数)

<input type="text" onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,1})?).*$/g, '$1')" >

开头不能为0，且不能输入小数

<input type="text" onkeyup="value=value.replace(/[^\d]/g,'').replace(/^0{1,}/g,'')" >

只能输入数字或小数且第一位不能是0和点且只能有一个点

<input type="text" onkeyup="value=value.replace(/[^1-9]{0,1}(\d*(?:\.\d{0,2})?).*$/g, '$1')" >

2.2、单选框和复选框

单选框和复选框是否选中判断

1、复选框（value值是提交给后台的值，不管有没有选中都是不变的）

　　只要复选框标签上有 checked 这个属性，不管这个属性有没有值或是false还是true，都是表示选中，在js中获取的 checked 属性值就是true；

　　当复选框标签上没有 checked 这个属性，则在js中获取的 checked 属性值就是false；

　　当选中这个复选框的时候，在js中获取的 checked 属性值就是true

总结：不管有没有设置checkbox 这个属性，反正只要选中这个复选框，在js中获取到他的 checkbox属性都是true；反之没有选中， js获取的值就是false。

注意：jQuery中Atrr获取checkbox 的值永远都是 undefined 。修补方法是用prop方法来解决。参考： http://www.jb51.net/article/51136.htm

2、单选框（同复选框）

3、disabled 属性（凡是按钮功能首选button标签，不要使用div）

disabled 属性规定，应该禁用 input 元素（包括button标签，但是div等其他标签没有想过）。被禁用的 input 元素既不可用，也不可点击。

4、自定义复选框checkbox样式

　　　　参考：https://blog.csdn.net/u014291497/article/details/52081774 或 http://www.xiumu.org/technology/style-checkboxes-with-css.shtml

　　　根据实际label有他的作用，所以改造了下结构：
```
<label for="myCheck">
<input type="checkbox" id="myCheck" style="display: none">
<div></div><span>点我选中</span>
</label>
```
```
        #myCheck + div{background-color: white;border-radius: 5px;border:1px solid #d3d3d3;width:20px;height:20px;display: inline-block;text-align: center;vertical-align: middle;line-height: 20px;}#myCheck:checked + div{background-color: #eee;}#myCheck:checked + div::after{content:"\2714";     //   \2714就是√对应的编码color: red;}    
```