其余web文章参考：web学习目录
表单
从web1.0网页主要像用户展示信息，到web2.0需要用户向服务器提交数据
本节主要介绍html页面常用的代码，后续用到来这里检索即可
表单的应用场景
先上传源代码，一般建议复制到vscode里面看
<html>
<head>
<title>提交表单</title>
<meta charset="utf-8" />
</head>
<body>
<h1>用户注册</h1>
<!--
enctype定义数据类型，我是谁，这个地方写错了在上传图片的时候可能光传一个图片名字，不传内容
method如果用get，图片很大，十几K，URL放不下
action是把数据提交到哪个文件，#代表自己
target跳转到新的界面
<br/>是换行标签
用户名后面输入的框框就叫表单元素，用input标签
input后面的type=text叫做单行文本框
type=password叫做密码框
type=submit提交
即type的类型决定了框框的类型
男、女那里指定value是因为传给服务器的都是on
textarea是文本域，因为有多行文本，文本域要顶格去写
clos是列，rows是高
-->
<form
enctype="multipart/form-data"
method="post"
action="#"
target="_blank"
>
<table border="2">
<tr>
<td style="text-align: right;width: ;">用户名：</td>
<td><input type="text" name="useradmin"/><br /></td>
</tr>
<tr>
<td style="text-align: right;width: ;">密码：</td>
<td><input type="password" name="pass1"/><br /></td>
</tr>
<tr>
<td style="text-align: right;width: ;">确定密码：</td>
<td><input type="password" name="pass2"/><br /></td>
</tr>
<tr>
<td style="text-align: right;width: ;">性别：</td>
<td><input name="sex" type="radio" value="male"/>男<input name="sex" type="radio" value="female"/>女<br /></td>
</tr>
<tr>
<td style="text-align: right;width: ;">爱好：</td>
<td><input type="checkbox" name="hobby1" value="eat"/>吃饭
<input type="checkbox" name="hobby2" value="sleep"/>睡觉
<input type="checkbox" name="hobby3" value="paly"/>打豆豆<br /></td>
</tr>
<tr>
<td style="text-align: right;width: ;">生日：</td>
<td><input name="year"/>年
<select name="month">
<option value="0">选择月份</option>
<option value="1">一月</option>
<option value="2">二月</option>
<option value="3">三月</option>
<option value="……">……</option>
</select>月
<input name="day"/>日<br /></td>
</tr>
<tr>
<td style="text-align: right;width: ;">注册协议：</td>
<td><textarea name="protocol" cols="80" rows="20">
欢迎注册，你同意了本协议
1.好好吃饭
2.好好睡觉
3.好好打豆豆
</textarea><br /></td>
</tr>
<tr>
<td style="text-align: right;width: ;">头像上传：</td>
<td><input type="file" name="img"><br /></td>
</tr>
</table>
<input type="submit" name="submit" value="注册" />
<input type="button" name="button" value="普通按钮" />
<input type="reset" name="reset" value="重置" />
</form>
</body>
</html>
分别对网页里面的关键字进行描述
| 属性 | 说明 |
|---|---|
| enctype | 提交数据的形式，application/x-www-form-urlencode一般用这个，multipart/form-data是上传文件时候使用的，不然只会上传文件的名字，不会上传文件的内容 |
| method | 提交方式； 默认是 GET 方法，参数在URL 中，显示（在URL 中可见）提交； URL 的长度是有限制的，不可能使用URL 上传大量数据； POST 方法，无长度限制，可以上传大文件（几M 的头像，附件等等）。 |
| action | 表单信息提交的页面； 默认情况下或者其值为 # ，代表提交信息到当前页，也就是本页面； 一般是一个URL 地址，这个URL 地址可以是本网站地址，也可以其他网站地址； 当提交表单的时候，实际上就是发起了一个HTTP 请求，就是浏览器直接访问action 属性所指向的页面。 |
| target | 是否在新的标签页打开目标地址； self ，默认值 ； _blank ，在新的标签页打开。 |
| input | 用户名后面输入的框框就叫表单元素，用input标签 |
| type="text" | input后面的:type=text叫做单行文本框 type=password叫做密码框 type = "radio"是单选框 type="checkbox"是复选框 type=submit提交……总之不同的type类型会显示不同的“框框”效果 |
| name | id | name 属性用于对提交到服务器后的表单数据进行标识 注意：只有设置了 name 属性的表单元素才能在提交表单时传递它们的值。 如果不设置name，最直观的感受就是在文本框输入用户名密码提交后，文本框会清空，数据也提交不上去 |
| value | 代表表单元素（控件）的（默认）值，如果没有此属性，需要从用户获得。 男、女那里指定value是因为选择男或者女传给服务器的都是on |
详细代码说明
下拉列表:
<select name="month">
<option value="0">选择月份</option>
<option value="1">一月</option>
<option value="2">二月</option>
<option value="3">三月</option>
<option value="……">……</option>
</select>月
文本域:
<td><textarea name="protocol" cols="80" rows="20">
欢迎注册，你同意了本协议
1.好好吃饭
2.好好睡觉
3.好好打豆豆
</textarea><br /></td>
</tr>
<tr>
<td style="text-align: right;width: ;">头像上传：</td>
<td><input type="file" name="img"><br /></td>
</tr>
<!-- 因为有多行文本，文本域要顶格去写 -->
<!-- cols:文本区域的列数，变相的设置宽度
rows:文本区域的行数，变相的设置高度
-->
按钮：
<input type = "button" value = "普通按钮">
<input type = "reset" value = "重置按钮"><br />
<input type = "submit" value = "提交按钮">