小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。
前文学习了 JavaScript 窗口对象的各个属性和方法, 本文来学习 JavaScript 的表单对象. 表单对象在实际工作中用的最多的, 基础但是也有些复杂的.
JavaScript 表单对象
JavaScript 表单通常用来搜集信息: 比如登录, 填报信息等.
JavaScript 表单对象和 HTML 中的 <form> 标签相对应, 通过 form对象可以获得表单中的各个信息, 可以通过提交或者重置来修改表单的内容.
HTML
元素表示文档中的一个区域,此区域包含交互控件,用于向 Web 服务器提交信息。
HTML 中的 form 表单
<form id="myForm" action="" method="get" class="form-example">
<div class="form-example">
<label for="name">请输入你的名字: </label>
<input type="text" name="name" id="name" required />
</div>
<div class="form-example">
<label for="email">请输入邮箱: </label>
<input type="email" name="email" id="email" required />
</div>
<div class="form-example">
<input type="submit" value="Subscribe!" />
</div>
</form>
上面的 HTML 代码创建了一个表单对象, 我们命名 id 为 myForm
然后在下面的 JavaScript 代码中通过 document.getElementById('myForm') 就可以获取到这个表单对象了. 然后使用 这个对象的 length 属性显示这个表单的长度信息.
这里表单包含 3 个 input 输入框, 用来搜集用户输入的信息, 用来和服务器交互
在 JavaScript 中获取表单中的这些信息
<script language="javascript">
document.write('表单中包含的子元素信息') document.write(document.getElementById('myForm').length)
</script>