2017.08.17

New

  • JavaScript 表单：

表单有两个基本组成部分：访问者在页面上可以看见并填写的控件、标签和按钮的集合；以及用于获取信息并将其转化为可以读取或计算的格式的处理脚本。

<form action="action_page.php"
      method="GET" target="_blank"
      accept-charset="UTF-8"
      ectype="application/x-www-form-urlencoded"
      autocomplete="off" novalidate>
  <!-- 表单元素内容 -->
</form>

<!-- 使用 button 来控制 提交 -->
<form action="https://www.baidu.com/s" id="myForm">
  <input type="text " name="word">
  <input type="button" value="提交" onclick="toSubmit()">
  <input type="button" value="重置" onclick="toReset()">
</form>
<script type="text/javascript">
function toSubmit() {
  document.getElementById('myForm').submit();
}
function toReset() {
  document.getElementById('myForm').reset();
}
</script>
  • 获取表单方法

在我们需要获取表单对象的时候，有三种方法可以使用。

  1. document.forms['yourFormName'] 根据form的name属性来获取。 示例：
    <title>根据form的name属性来获取表单</title>
<script type="text/javascript">
function onTestButtonClick() {
var form = document.forms['testForm'];
}
</script>
<form name="testForm">
<input type="button" value="Test" onclick="onTestButtonClick()">
</form>
  2. document.forms[0] 根据form在整个html文档中的form的数量位置下标来获取。 示例：
    <title>根据form在整个html文档中的form的数量位置下标来获取表单</title>
<script type="text/javascript">
function onTestButtonClick() {
var form = document.forms[0];
}
</script>
</head>
<body>
<form>
<input type="button" value="Test" onclick="onTestButtonClick()">
</form>
  3. document.getElementById('yourFormId') 根据form的id来获取。 示例：
    <title>根据form的id来获取表单</title>
<script type="text/javascript">
function onTestButtonClick() {
var form = document.getElementById('testFormId');
}
</script>
</head>
<body>
<form id="testFormId">
<input type="button" value="Test" onclick="onTestButtonClick()">
</form>

  • 获取表单元素的方法

    1. document.getElementById('yourElementId') 根据form中元素的id获取。 示例：
      <title>根据form中元素的id</title>
<script type="text/javascript">
function onTestButtonClick() {
var usernameText = document.getElementById('username')
}
</script>
</head>
<body>
<form id="testForm">
<input type="text" id="username">
<input type="button" value="Test" onclick="onTestButtonClick()">
</form>
    2. youForm.yourElementName 通过form中元素的name获取。 示例：
      <title>通过form中元素的name获取</title>
<script type="text/javascript">
function onTestButtonClick() {
var testForm = document.getElementById('testForm');
var usernameText = testForm.username;
}
</script>
</head>
<body>
<form id="testForm">
<input type="text" name="username">
<input type="button" value="Test" onclick="onTestButtonClick()">
</form>
      3, yourForm.elements[elementIndex] 通过form的elements属性和元素对应的在form中的位置下标来获取。 示例：
      <title>通过form的elements属性和元素对应的在form中的位置下标来获取</title>
<script type="text/javascript">
function onTestButtonClick() {
var testForm = document.getElementById('testForm');
var usernameText = testForm.elements[0];
}
</script>
<form id="testForm">
<input type="text">
<input type="button" value="Test" onclick="onTestButtonClick()">
</form>
    3. yourForm.elements['yourElementName'] 通过form的elements属性和元素名称获取。 示例:
      <title>通过form的elements属性和元素名称获取</title>
<script type="text/javascript">
function onTestButtonClick() {
var testForm = document.getElementById('testForm');
var usernameText = testForm.elements['username'];
}
</script>
<form id="testForm">
<input type="text" name="username">
<input type="button" value="Test" onclick="onTestButtonClick()">
</form>

results matching ""

    No results matching ""