zoukankan      html  css  js  c++  java
  • form表单中的id 与name的区别

      以前经常写form表单时,不写id和name,总觉得没有什么用。后来一看后台套完的页面发现,他们都补上name,不知道所以然,就查了一下资料,吓我一跳,要是照我那样写根本不会有数据传到服务器。原来表单提交用户输入的数据,是根据表单元素的name值来控制表单控件的。那么表单控件里面的id是干嘛的?就是为了区别不同的表单控件,还有一个作用,就是点击表单控件提示信息时也能让表单控件获得焦点的效果,用label提高用户体验,这时的label属性中的for是跟表单控件的id一致的,我以前老是搞混,以为是跟控件的name值一样,因为看例子中总是name值跟id值一样。

      这也引出另一个问题就是label的用法:就是用for表示跟哪个表单元素绑定。所以它有两种关联方式,一个显示关联用for,一种是不用for的隐示关联。

         所谓的显示关联就是label跟表单元素是并列关系

    <label for='sex'>性别:</label>
    <input type='text' id='sex' name='gender'>

    这里看到id和name值不是必须一样

    隐示关联就是label跟表单元素是包含关系,这时候label里面不需要for,表单元素也不需要id

    <label>性别:<input type='text' name='gender'></label>

    这里看到没有id可以,但是name是必须要的,以后一定要记住啊!

    那我们再回到主题form表单中的id 与name的区别,前面说到的是一些html结构方面的区别,下面说一下他们的其他区别。

    如果写样式,只能用id获取他标示的表单元素

    如果用js给表单元素添加交互效果,name和id都可以选中标示表单元素,只是形式有不同,document.getElementById("sex").value,要是用name获取document.forms[0].gender.value

    参看资料:

    http://blog.csdn.net/chang_xing/article/details/7605993

  • 相关阅读:
    标准maven配置setting文件
    zxing生成和解析二维码工具类
    Postman上传文件
    sql server工具类
    springboot开启token校验一直报错No 'Access-Control-Allow-Origin' header is present on the requested resource
    Jpa分页查询
    Restful接口调用统一异常处理
    npm install --save 、--save-dev 、-D、-S 的区别与NODE_ENV的配置(转载)
    element-ui el-table 组件实现跨表格多选
    微信小程序设置页面背景色的方式(全局或单页面)
  • 原文地址:https://www.cnblogs.com/different/p/3158425.html
Copyright © 2011-2022 走看看