JavaScript 小知识-常用到的表单对象基础(一)

237 阅读1分钟

小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。

前文学习了 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>