HTML表单内容学习

本文转载自Thoughtworks学习平台的训练营的学习任务，仅供个人笔记回忆之用

1. 表单包含的小组件

组件	代码
单行文本框	<input type='text'>
密码输入	<input type='password'>
多行文本框	<textarea>
单选按钮	<radio>
多选按钮	<checkbox>
下拉选择（单选）	<select>
下拉选择（多选）	<select multiple>
文件选择	<input type='file'>
时间和日期	<input type="date"> <input type="datetime-local"> <input type="month"> <input type="week"> <input type="time">

2. HTML 表单中常用的属性

属性	功能
action	向服务器发送的请求地址
method	要发送的HTTP请求类型
name	表单的名称
target	用于发送请求和接收响应的窗口名称
value	某一个具体的表单项所对应的值
placeholder	输入框的占位符，当输入框中为空时占位符会显示
checked	针对多选框/单选框，默认的状态时选中状态

3. 表单设计的几个原则：

• 尽量帮助用户不出差错
• 尽早提示用户填写错误
• 尽可能的扩大选择/点击区域
• 当表单中控件较多是要分组
• 在设计表单时要分清主要动作和次要动作

4. 如何获取form表单的引用？

<form id="form" name="form1"></form>
我现在想取到上面的form表单的引用，一共有以下方式可以获取到上面 的form表单引用；

• 通过获取form表单的id，来获取form表单的引用；如下代码：
  var formId = document.getElementById("form");console.log(formId);
• 通过document.forms 取得页面中的所有表单元素，然后通过索引来取到对应的form元素，如下代码所示：取得页面第一个form元素；
  console.log(document.forms[0]);
• 通过from表单中的name属性来获取，代码如下：
  console.log(document.forms['form1']);

5. 如何提交表单?

用户单击提交按钮或图像按钮时，就会提交表单，使用input或者button都可以提交表单，只需将type设置为submit或者image即可，如下三种方式都可以；

• 第一种：

<form id="form" name="form1" action="http://www.baidu.com">
    <!-- 存放一个input放在这，为了获取焦点，然后我们可以按enter键提交 -->
    <input type="text">
    <input type="submit" value="submit">
</form>

• 第二种：

<form id="form" name="form1" action="http://www.baidu.com">
    <!-- 存放一个input放在这，为了获取焦点，然后我们可以按enter键提交 -->
    <input type="text">
    <button type="submit">submit</button>
</form>

• 第三种：

<form id="form" name="form1" action="http://www.baidu.com">
    <!-- 存放一个input放在这，为了获取焦点，然后我们可以按enter键提交 -->
    <input type="text">
    <input type="image" src="aa.jpg">
</form>

6. 何重置表单?

如果我们使用按钮重置表单的话，有下面2种方式：

• 第一种代码如下：

<form id="form" name="form1" action="http://www.baidu.com">
    <input type="text">
    <input type="reset" value="reset">
</form>

• 第二种代码如下：

<form id="form" name="form1" action="http://www.baidu.com">
    <input type="text">
    <button type="reset">reset</button>
</form>