参考：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>
输出结果：
注释：表单本身并不可见。还要注意文本字段的默认宽度是 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 115 ????????????<input type="text" name="textinput1" value="Mickey"></input> ???<!--value为显示默认值-->16 ????????????<br />17 ????????????Text input 218 ????????????<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 elements5 ?.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 属性来定义预定义选项。
输出结果：
Web开发——HTML基础（HTML表单）
原文地址：https://www.cnblogs.com/zyjhandsome/p/9785718.html