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')" >

  4、

 

2.2、单选框和复选框

 

 

 

2.2、select控件

 

 

2.3、