HTML 表单
HTML 表单用于搜集不同类型的用户输入。
1.<form> 元素
HTML 表单用于收集用户输入。
<form> 元素定义 HTML 表单：
实例
<form> . form elements . </form>
Action 属性
action 属性定义在提交表单时执行的动作。
向服务器提交表单的通常做法是使用提交按钮。
通常，表单会被提交到 web 服务器上的网页。
在上面的例子中，指定了某个服务器脚本来处理被提交表单：
<form action="action_page.php">
如果省略 action 属性，则 action 会被设置为当前页面。
Method 属性
method 属性规定在提交表单时所用的 HTTP 方法（GET 或 POST）：
<form action="action_page.php" method="GET">
或：
<form action="action_page.php" method="POST">
Name 属性
如果要正确地被提交，每个输入字段必须设置一个 name 属性。
本例只会提交 "Last name" 输入字段：
实例
<form action="action_page.php"> First name:<br> <input type="text" value="Mickey"> <br> Last name:<br> <input type="text" name="lastname" value="Mouse"> <br><br> <input type="submit" value="Submit"> </form>
HTML 表单包含表单元素。
表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。
2.<input> 元素
<input> 元素是最重要的表单元素。
<input> 元素有很多形态，根据不同的 type 属性。
这是本章中使用的类型：
1. <input type="text"> 定义用于文本输入的单行输入字段
2.<input type="radio"> 定义单选按钮
3.<input type="submit"> 定义用于向表单处理程序（form-handler）提交表单的按钮
3.表单小实例
全部代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form>
<table>
<tr>
<td>用户名：<input type="text" name="username" placeholder="请输入用户名"></td>
</tr>
<tr>
<td>密码： <input type="password" name=" password" placeholder="请输入密码"></td>
</tr>
<tr>
<td>性别：<input type="radio" name="sex" value="m">男 <input type="radio" name="sex" value="w">女</td>
</tr>
<tr>
<td>班级：<input type="radio" name="like" value="1">信息161班 <input type="radio" name="like" value="2">信息162班 <input type="radio" name="like" value="3">信息163班</td>
</tr>
<tr>
<td>请选择你的爱好：<input type="checkbox" name="like" value="1">吃 <input type="checkbox" name="like" value="2">喝 <input type="checkbox" name="like" value="3">嫖 <input type="checkbox" name="like" value="4">赌</td>
</tr>
<tr>
<td>请选择你要上传的文件:<input type="file"></td>
</tr>
<tr>
<td><input type="reset" value="重置"></td>
</tr>
<tr>
<td><input type="submit" value="点击" id="btn"></td>
<script>
let oBtn = document.getElementById("btn");
oBtn.onclick=()=>{
alert(123);
}
</script>
</tr>
<tr>
<td><input type="submit" value="" style="background: url(images/1.gif); width:120px;height:120px;line-height:60px; overflow:hidden" ></td>
</tr>
</table>
</form>
</body>
</html>
普及小知识：
将图片作为提交按钮
<input type="submit" value="" style="background: url(images/1.gif); width:120px;height:120px;line-height:60px; overflow:hidden" >
将图片溢出的部分隐藏
overflow:hidden
在设计格式时， 可作为间隔符，保持界面的整齐和美观
