Javascript |（九）操作表单

介绍

  HTML表单的输入控件主要有以下几种：

• 文本框，对应的<input type="text">，用于输入文本；

• 口令框，对应的<input type="password">，用于输入口令；

• 单选框，对应的<input type="radio">，用于选择一项；

• 复选框，对应的<input type="checkbox">，用于选择多项；

• 下拉框，对应的<select>，用于选择一项；

• 隐藏文本，对应的<input type="hidden">，用户不可见，但表单提交时会把隐藏文本发送到服务器。
    

获取值

  获取一个表单节点的引用之后，可以通过value或者checked获得值。

<input type="text" value="hello world">

const input = document.getElementsByTagName('input')[0];
input.value // hello world;

  

设置值

  和获取值一样，获得一个表单节点的引用之后，可以直接设置value和checked。

<input type="radio" >

const radio = document.getElementsByTagName('input')[0];
radio.checked = true;

  

HTML5控件

  HTML5新增了大量标准控件，常用的包括date、datetime、datetime-local、color等，它们都使用<input>标签 。

<input type="date" value="2019-08-26" ><br/>
<input type="datetime-local" value="2019-08-26T02:04:10"><br/>
<input type="color">

  

提交表单

  有两种方式可以提交表单。
  

sumbit()

  第一种方法是直接通过form元素的sumbit()方法来提交，这种方式的缺点是扰乱了浏览器对form的正常提交。

<form>
    <input type="text">
    <button type="button" onclick="submit()">提交</button>
</form>
<script>
function sumbit() {
  const form = document.getElementsByTagName('form');
  form.sumbit();
}
</script>

  

sumbit事件

  第二种方式是响<form>本身的onsubmit事件。浏览器默认点击<button type="submit">时提交表单，或者用户在最后一个输入框按回车键。
  注意要return true来告诉浏览器继续提交，如果return false，浏览器将不会继续提交form，这种情况通常对应用户输入有误，提示用户错误信息后终止提交form。

<form onsubmit="return sumbit()">
    <input type="text">
    <button type="sumbit" >提交</button>
</form>
<script>
function sumbit() {
  return true;
}
</script>