DOM-->表单操作

表单

HTML <form> 元素 表示了文档中的一个区域,这个区域包含有交互控制元件,用来向web服务器提交信息。

name属性

表单当中的表单控件(input, select等)的name属性非常重要

我们可以通过name直接找到表单控件

<form action="" id="form">
    <input type="text" name="text1" value="内容">
</form>

<script>
var form = document.getElementById('form');
var alert(form.text1.value);//内容
</script>

对于多个radio,相同的name把他们划分到一组

使用name属性获取到的是多个radio的集合

<form action="" id="form">
    <input type="radio" name="sex" value="男" />男
    <input type="radio" name="sex" value="女"/>女
</form>

<script>
var form = document.getElementById('form');
for(var i=0; i<form.sex;i++){
    alert(form.sex[i].value);
}
</script>

对于多个checkbox,也是一样

onchange事件

表单控件都有onchange事件,当值发生改变的时候触发

type="text" : 当光标离开元素的时候再去判断值是否发生了变化,如果发生了变化则触发onchange事件

<form id="form">
    <input type="text" name="username" />
    <input type="radio" name="sex" value="男" />男
    <input type="radio" name="sex" value="女" checked />女
    
    <input type="checkbox" name="aihao" value="电影" />电影
    <input type="checkbox" name="aihao" value="音乐" />音乐
    <input type="checkbox" name="aihao" value="体育" />体育
    
    <select name="city" value="">
        <option>请选择一个城市</option>
        <option value="北京">北京</option>
        <option value="上海" selected>上海</option>
        <option value="广州">广州</option>
        <option value="深圳">深圳</option>
    </select>
</form>

checked

radio checkbox 有checked属性, 表示是否选中

selected

<select>标签的<option>有selected属性, 表示是否选中

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • form简介 是HTML中的一个元素,它表示文档中的一个区域,这个区域包含了交互控件,用于向web服务器提交信息。...
    七里之境阅读 1,354评论 0 1
  • HTML标签解释大全 一、HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 3,321评论 1 41
  • 表单 HTML 元素 表示了文档中的一个区域,这个区域包含有交互控制元件,用来向web服务器提交信息。 nam...
    風隨風去阅读 112评论 0 0
  • 获取input的checked值是否为true: 第一种: if($("input[name=item][valu...
    西门小妖阅读 1,573评论 0 5
  • 表单基础知识 在HTML中,表单是由 元素来表示的,而在JS中,表单对应的则是HTMLFormElement类型。...
    oWSQo阅读 920评论 0 1