表单(form) 控件

一、form表单

form标签有没有必要使用

二、表单控件

表单元素的属性（自带的验证）

form：将控件联系到表单元素中。
表单控件通过这个属性，可以让form外面的控件和在form里面的控件一样，受form表单的处理（如，提交、重置、序列化）。

    <form id="login-form" action="/api/test">
         <textarea name="area" id="message"></textarea>
         <button type="submit">提交</button>
    </form>

    <!-- 控件在表单外，因为配置了form，等同在form里面的表单 -->
    <input name="num" id="email" form="login-form">

2.1、input控件

2.2、单选框和复选框

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

2.3、select控件

select 标签

2.4、input选择文件

自定义文件上传的控件样式

2.5、表单控件标注

为表单标签定义标注

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

2、使用 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,'')">

3、数字输入框常用的控制【只能输入数字和小数点】：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、

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

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;
        }

5、自定义文件上传的控件样式：（所有非输入型表单控件样式修改的原理都一样）

　　这里以点击图片上传文件，为例：http://www.imooc.com/wenda/detail/382095

　　方案1：用 label 标签事件的传递性，label 标签的事件会传递给 for 属性绑定 id 的 input 元素。

　　方案2：将 input[type="file"] 铺在图片上，并设置opacity：0使其隐藏，当点击图片的时候实际上是点击的input。

　　方案3：直接操作dom，可以通过 js 触发 input[type="file"] 的点击事件。（点击图片，图片的事件函数，直接去触发input的click事件）

1、select默认选中项颜色为灰色，选择后变为黑色（js实现）

参考：http://www.cnblogs.com/zywaf/p/7149929.html

2、js中怎么判断slect标签哪个被选中了

参考：https://blog.csdn.net/xiaoxiaoshuai__/article/details/72299446

　　　http://www.runoob.com/jsref/dom-obj-select.html

3、select 中类似占位符的属性是 selected ，如果这个占位符只是提示（如，“请选择”），不能选择的话，可以在这个option标签中在加一个disabled属性。

4、select去掉默认三角： https://www.cnblogs.com/demonswang/p/6230705.html

5、select 文字右对齐： https://www.cnblogs.com/flicat/p/4446784.html

6、select中的value是和option中的value对应的；当option中没有设置value属性的话，默认option中的value值就是标签中的文本。

7、select默认文字，不出现在下拉选项中：https://blog.csdn.net/github_35549695/article/details/53288569

各个表单控件在，在手机端表现

1、input[type="search"]，在软键盘上确认按钮变成搜索按钮

2、什么情况触发 from 的提交行为：from的提交行为，会引起页面刷新。

　　a、回车时：1、没有submit按钮，表单里只有一个 input输入框，那么点击键盘enter就会触发提交事件【两个输入框不会触发】；

　　　　　　　 2、只要有submit按钮，回车就会触发提交事件

　　b、submit 按钮【type=submit】：点击这个按钮就会触发from的提交事件

　　3、js控制提交：js的 submit()，方法可以提交。但是不会触发onsubmit事件

form标签有没有必要使用

1、如果不用 H5 自带的一些表单API，form用不用无所谓。但是要用到直接API则就必须要加上 form 标签才有效。

　比如，表单的 invalid（校验）事件，必须是触发了form的submit事件，才会触发控件的的 invalid 功能。https://www.jc2182.com/javascript/javascript-html-dom-oninvalid-event.html

<form>
  <input id="text" pattern="^1[3-9]\d{9}$" required />
  <button type="submit">提交</button>
</form>

　　注意：表单控件的验证 API，有没有 form标签都是有效的。 https://www.runoob.com/js/js-validation-api.html

<input id="id1" type="number" min="100" max="300" required>
<button onclick="myFunction()">验证</button>

function myFunction() {
    var inpObj = document.getElementById("id1");
    if (inpObj.checkValidity() == false) {
        document.getElementById("demo").innerHTML = inpObj.validationMessage;
    } else {
        document.getElementById("demo").innerHTML = "输入正确";
    }
}

　　总结：如果要用 form 对象提供的API，则需要用到form标签。（如：submit 事件、reset事件、elements[] 属性等。 https://www.runoob.com/jsref/dom-obj-form.html）

　　　　　但是默认的提交行为是会跳转页面【拼接上参数】，一般都不会使用。

2、禁止from的提交行为（from的提交事件会刷新页面，影响用户体验）：https://blog.csdn.net/wobuaizhi/article/details/93069017

3、form 里面如果只有一个 input 控件，焦点在input时。直接按回车就会触发form提交事件，刷新页面且url上拼接上查询字符串【?name=】。 http://blog.sina.com.cn/s/blog_13887bf130102x02k.html

　【亲测】这种情况很容易重现莫名其妙的bug。用 elementUI的<el-form> 时，就出现过上面标题填完，按了下回车直接跳转页面了；下面的富文本还没有输入呢。而其他地方因为里面有2个以上的input控件，所以按回车就没有这个bug。找了好久的bug。

　　 elementUI 中解决方法如下：参考 https://www.cnblogs.com/zhaoxiaoying/p/10209369.html

- 给<el-form>加上阻止默认事件的修饰符。
- 监听回车绑定在input上。

 <el-form :inline="true" :model="getForm" class="demo-form-inline" @submit.native.prevent>
    <el-form-item label="科目名称">
        <el-input v-model.trim="getForm.exam_name" @keyup.enter.native="search"></el-input> 
 　　</el-form-item> 
</el-form>

4、button 按钮的 type属性默认值是 submit ，
所以 from表单中的 button 没有指定type值，点击时会触发 from表单的提交事件。https://blog.csdn.net/jal517486222/article/details/81459395

　重点：from 中 button按钮一定要设置 type 属性【尤其是这个按钮不提交 form事件的】。

5、from 中不能有 type=submit 类型的按钮，但是需要填完表单，回车触发提交事件。只能给form 绑定回车事件，触发提交。element 就是这么处理的，内部封装了监听回车事件。

      <el-form @keyup.enter.native="onSubmit"> <!-- from 绑定 键盘回车事件 -->
        <el-form-item prop="phone">
          <el-input v-model="formPhone.phone" placeholder="请输入手机号"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button native-type="button" @click="onSubmit">登录</el-button> <!--  不能有 type="submit" 的按钮 -->
        </el-form-item>
      </el-form>

总结：使用form 要注意的地方

　　a、禁止 from 默认的提交行为，即 from 里面不能有 type=submit 类型的按钮。

　　b、from 里面的 button 按钮一定要设置 type="button"【button不是提交 from的按钮时】。

　　c、type=submit 的按钮本来就是为 from 设计的，但实际使用这个放在from又是有问题。所以现在开发基本不用 type=submit 的按钮。

表单元素的属性（有效输入有效性）：https://www.cnblogs.com/larrywang/p/10504421.html 或 https://www.cnblogs.com/cjt-cn/p/5972749.html

　说明：浏览器自带一个验证结果，弹出提示框（即 oninvalid 事件弹出框）。但是这个事件必须在form默认提交行为有效才会，触发这个 oninvalid。实际开发，基本会让form 的默认行为失效，所以自带的 验证弹出框 是没什么用。需要自己写

　表单有效性相关的API：

　　　　DOM 属性：https://www.runoob.com/tags/tag-input.html

　　　　　　　　a、autocomplete 属性。输入框会提示你曾输入的值【form、input标签都有这个属性】

　　　　　　　　b、autofocus：

　　　　　　　　c、list：结合 datalist 标签使用。

　　　　　　　　d、required：

　　　　　　　　e、pattern

　　　　　　　　f、novalidate：提交表单时不应该验证 form 或 input 域【form、input标签都有这个属性】

　　　　　　　 g、min、max：规定 <input> 元素的最小值或最大值。【针对某些数字类型的表单有效，如 number、range、date、datetime、datetime-local、month、time 和 week】

　　　　　　　　h、maxlength：规定 <input> 元素中允许的最大字符数

　　　　　　　　i、readonly：

　　　　　　　　j、size：规定以字符数计的 <input> 元素的可见宽度

　　　　　　　　k、step：【number数据，增加的梯度】

　　　　js中表单对象的属性方法： https://www.cnblogs.com/langli/archive/2013/11/27/3446641.html

　　　　　　　　a、validity 属性：返回一个 ValidityState对象。 https://www.cnblogs.com/founderswitch/p/7680190.html

　　　　　　　　b、checkValidity()：通过验证返回真，否则返回假。【form、input标签都有这个方法】

　　　　　　　　c、setCustomValidity()：自定义错误提示信息。【浏览器内置的提示弹出框，一般不用这个】

为表单标签定义标注：label

点击 <label> 文本会直接激活关联的控件（如输入框聚焦、复选框切换）。

基本语法与关联方式：

显式关联（推荐）
通过 for 属性与表单控件的 id 绑定：

<label for="username">用户名：</label>
<input type="text" id="username" name="username">

一个 input 可以与多个标签相关联。

<label for="username">关联1</label>
<label for="username">关联2</label>
<input type="text" id="username" name="username">

隐式关联
将表单控件包裹在 <label> 内（无需 for 和 id）：

<label>用户名：
  <input type="text" name="username">
</label>

label 核心属性：

for：关联控件的 id（显式关联必需）。
form：关联表单的 id（可将 <label> 放置在表单外部）。
所有表单控件都有这个属性，但是在label这里感觉没什么作用。
accesskey：定义快捷键（如 accesskey="u" 可用 Alt+U 聚焦控件）。

label标签form属性的作用：让 form表单外面的控件，属于form内的表单。提交时改表单的数据也能提交上去。

posted @ 2018-05-11 14:38 吴飞ff 阅读(359) 评论(0) 收藏举报

刷新页面返回顶部

实践出真知

不会总结的前端不是好前端

表单(form) 控件

一、form表单

二、表单控件

2.1、input控件

2.2、单选框和复选框

2.3、select控件

2.4、input选择文件

2.5、表单控件标注

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

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

2、单选框（同复选框）

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

4、自定义复选框checkbox样式

5、自定义文件上传的控件样式：（所有非输入型表单控件样式修改的原理都一样）

1、select默认选中项颜色为灰色，选择后变为黑色（js实现）

2、js中怎么判断slect标签哪个被选中了

各个表单控件在，在手机端表现

form标签有没有必要使用

表单元素的属性（有效输入有效性）：https://www.cnblogs.com/larrywang/p/10504421.html 或 https://www.cnblogs.com/cjt-cn/p/5972749.html

表单有效性相关的API：

为表单标签定义标注：label

公告

实践出真知

不会总结的前端不是好前端

表单(form) 控件

一、form表单

二、表单控件

2.1、input控件

2.2、单选框和复选框

2.3、select控件

2.4、input选择文件

2.5、表单控件标注

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

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

2、单选框（同复选框）

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

4、 自定义复选框checkbox样式

5、自定义 文件上传的控件样式：（所有非输入型表单控件样式修改的原理都一样）

1、select默认选中项颜色为灰色，选择后变为黑色（js实现）

2、js中怎么判断slect标签哪个被选中了

各个表单控件在，在手机端表现

form标签 有没有 必要使用

表单元素的属性（有效输入有效性）：https://www.cnblogs.com/larrywang/p/10504421.html 或 https://www.cnblogs.com/cjt-cn/p/5972749.html

表单有效性相关的API：

为表单标签定义标注：label

公告

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

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

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

4、自定义复选框checkbox样式

5、自定义文件上传的控件样式：（所有非输入型表单控件样式修改的原理都一样）

form标签有没有必要使用

　表单有效性相关的API：