参考：http://www.w3school.com.cn/html/html_forms.asp
HTML 表单用于搜集不同类型的用户输入。
1、<form> 元素
HTML 表单用于收集用户输入。
<form> 元素定义 HTML 表单：
1.1 <input> 元素
<input> 元素是最重要的表单元素。
<input> 元素有很多形态，根据不同的 type 属性。
这是本章中使用的类型：
| 类型 | 描述 |
|---|---|
| text | 定义常规文本输入。 |
| radio | 定义单选按钮输入（选择多个选择之一） |
| submit | 定义提交按钮（提交表单） |
1.2 文本输入
<input type="text"> 定义用于文本输入的单行输入字段：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <!--<meta charset="utf-8">--> 5 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 6 <meta http-equiv="Content-Language" content="zh-cn" /> 7 <title>My test page</title> 8 9 </head> 10 11 <body> 12 13 <form> 14 Text input 1:<br /> 15 <input type="text" name="textinput1"></input> 16 <br /> 17 Text input 2:<br /> 18 <input type="text" name="textinput2"></input> 19 </form> 20 21 <br /> 22 <form> 23 Text input 3: 24 <input type="text" name="textinput3"></input> 25 <br /> 26 Text input 4: 27 <input type="text" name="textinput4"></input> 28 </form> 29 30 </body> 31 </html>
输出结果：
Text input 1:
Text input 2:
Text input 3:
Text input 4:
注释：表单本身并不可见。还要注意文本字段的默认宽度是 20 个字符。
1.3 单选按钮输入
<input type="radio"> 定义单选按钮。
单选按钮允许用户在有限数量的选项中选择其中之一：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <!--<meta charset="utf-8">--> 5 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 6 <meta http-equiv="Content-Language" content="zh-cn" /> 7 <title>My test page</title> 8 9 </head> 10 11 <body> 12 13 <form> 14 <input type="radio" name="sex" value="male" checked>Male</input> 15 <br /> 16 <input type="radio" name="sex" value="female">Female</input> 17 </form> 18 19 </body> 20 </html>
输出结果：
Male
Female
1.4 提交按钮
<input type="submit"> 定义用于向表单处理程序（form-handler）提交表单的按钮。
表单处理程序通常是包含用来处理输入数据的脚本的服务器页面。
表单处理程序在表单的 action 属性中指定：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <!--<meta charset="utf-8">--> 5 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 6 <meta http-equiv="Content-Language" content="zh-cn" /> 7 <title>My test page</title> 8 9 </head> 10 11 <body> 12 13 <form action="action_page.php"> 14 Text input 1 15 <input type="text" name="textinput1" value="Mickey"></input> <!--value为显示默认值--> 16 <br /> 17 Text input 2 18 <input type="text" name="textinput2" value="Mouse"></input> <!--value为显示默认值--> 19 <br /><br /> 20 <input type="submit" value="Submit"></input> 21 </form> 22 23 </body> 24 </html>
输出结果：
Text input 1
Text input 2
2、HTML Form 属性
HTML <form> 元素，已设置所有可能的属性，是这样的：
实例：
1 <form action="action_page.php" method="GET" target="_blank" accept-charset="UTF-8" 2 ectype="application/x-www-form-urlencoded" autocomplete="off" novalidate> 3 . 4 form elements 5 . 6 </form>
下面是 <form> 属性的列表：
| 属性 | 描述 |
|---|---|
| accept-charset | 规定在被提交表单中使用的字符集（默认：页面字符集）。 |
| action | 规定向何处提交表单的地址（URL）（提交页面）。 |
| autocomplete | 规定浏览器应该自动完成表单（默认：开启）。 |
| enctype | 规定被提交数据的编码（默认：url-encoded）。 |
| method | 规定在提交表单时所用的 HTTP 方法（默认：GET）。 |
| name | 规定识别表单的名称（对于 DOM 使用：document.forms.name）。 |
| novalidate | 规定浏览器不验证表单。 |
| target | 规定 action 属性中地址的目标（默认：_self）。 |
3、<select> 元素（下拉列表）
<select> 元素定义下拉列表：
<option> 元素定义待选择的选项。
列表通常会把首个选项显示为被选选项。
您能够通过添加 selected 属性来定义预定义选项。
输出结果：
Volvo
Saab
Fiat
Audi
原文地址：https://www.cnblogs.com/zyjhandsome/p/9785718.html