目录
一、HTML表格
a.基础知识
b.案例
1.代码
2.运行
c.增加提交部分
1.代码
2.解析
3.关于post和get
一、HTML表格
a.基础知识
表单用于搜集不同类型的用户输入，表单由不同类型的标签组成。
相关标签及属性用法如下：
1、<form>标签 定义整体的表单区域（和表格里面的table作用一致）
- action属性 定义表单数据提交地址
- method属性 定义表单提交的方式，一般有“get”方式和“post”方式
2、<label>标签 为表单元素定义文字标注
3、<input>标签 定义通用的表单元素
- type属性
- type="text" 定义单行文本输入框
- type="password" 定义密码输入框
- type="radio" 定义单选框
- type="checkbox" 定义复选框
- type="file" 定义上传文件
- type="submit" 定义提交按钮
- type="reset" 定义重置按钮
- type="button" 定义一个普通按钮
- type="image" 定义图片作为提交按钮，用src属性定义图片地址
- type="hidden" 定义一个隐藏的表单域，用来存储值
- value属性 定义表单元素的值
- name属性 定义表单元素的名称，此名称是提交数据时的键名
4、<textarea>标签 定义多行文本输入框
5、<select>标签 定义下拉表单元素
6、<option>标签 与<select>标签配合，定义下拉表单元素中的选项
b.案例
1.代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单</title>
</head>
<body>
<h1>这个是一个注册的表单</h1>
<form>
<div>
<label>用户名:</label><!-- 定义文字标注 -->
<input type="text" name="" /><!-- 单行文本输入框 -->
</div>
<br><!-- 换行 -->
<div>
<label>密 码:</label>
<input type="password" name="" /><!-- 密码输入框 -->
</div>
<br>
<div>
<!-- 单选框 -->
<label>性 别:</label>
<input type="radio" name="gender"> 男
<input type="radio" name="gender"> 女<!-- 单选框name键设置一样 -->
</div>
<br>
<div>
<label>爱 好:</label><!-- 多选框 -->
<input type="checkbox" name="">学习
<input type="checkbox" name="">python
<input type="checkbox" name="">前端
<input type="checkbox" name="">美少女
</div>
<br>
<div>
<!-- 上传文件 -->
<label>头 像</label>
<input type="file" name="">
</div>
<br>
<div>
<label>个人介绍:</label>
<textarea></textarea><!-- 定义多行文本输入框 -->
</div>
<br>
<div>
<label>籍 贯:</label>
<select><!-- 定义下拉表格 -->
<option>北京</option>
<option>上海</option>
<option>南昌</option><!-- 定义下拉元素选项 -->
</select>
</div>
<br>
<div>
<input type="submit" name="" value="提交">
<input type="reset" name="" value="重置">
</div>
<br>
</form>
</body>
</html>
<!-- 表单的声明<form action=""></form> -->2.运行
c.增加提交部分
1.代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单</title>
</head>
<body>
<!-- 传入的方式默认为get方式在网址里面传，而post在http协议里面传 -->
<form action="" method="get">
<!-- action="接收信息网址" method="传输方式" post不行> -->
<div>
<!-- for 和Id搭配使其点击用户名就可以激活 -->
<label for="ues_name">用户名:</label>
<input type="text" name="use_name" id="use_name"/>
</div>
<br>
<div>
<label>密 码:</label>
<input type="password" name="passwd" />
</div>
<br>
<div>
<!-- 单选框 -->
<label>性 别:</label>
<input type="radio" name="gender" value="0"> 男
<input type="radio" name="gender" value="1"> 女
</div>
<br>
<div>
<label>爱 好:</label>
<input type="checkbox" name="like" value="学习">学习
<input type="checkbox" name="like" value="python">python
<input type="checkbox" name="like" value="前端">前端
<input type="checkbox" name="like" value="美少女A
">美少女
</div>
<br>
<div>
<!-- 上传文件 -->
<label>头 像</label>
<input type="file" name="">
</div>
<br>
<div>
<label>个人介绍:</label>
<textarea name="info"></textarea>
</div>
<br>
<div>
<label>籍 贯:</label>
<select name="籍贯">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value=南昌"">南昌</option>
</select>
</div>
<br>
<input type="hidden" name="hid" value="12"><!-- 在页面存一个值到时候一起提交 -->
<div>
<input type="submit" name="" value="提交">
<!--<input type="reset" name="" value="重置"> -->
<!-- <input type="image" src="./images/goods.jpg" name="" value="提交"> -->
<input type="reset" name="" value="重置">
</div>
<br>
</form>
</body>
</html>
<!-- 表单的声明<form action=""></form> -->2.解析
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
<h1>注册表单</h1>
<form action="" method="get">
<div>
<label for="username">用户名：</label>
<input type="text" name="username" id="username" />
</div>
</form>
</body>
</html>for 和Id搭配使其点击用户名就可以激活如下图
3.关于post和get
以上案例的方式为get方式进行提交，我们可以看到最后的结果是网页上方显示所提交的信息具体如下：
post方式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单</title>
</head>
<body>
<!-- 传入的方式默认为get方式在网址里面传，而post在http协议里面传 -->
<form action="127.0.0.1" method="POST">
<!-- action="接收信息网址" method="传输方式" post不行> -->
<div>
<!-- for 和Id搭配使其点击用户名就可以激活 -->
<label for="uesename">用户名:</label>
<input type="text" name="usename" id="usename"/>
</div>
<br>
<div>
<label>密 码:</label>
<input type="password" name="passwd" />
</div>
<br>
<div>
<!-- 单选框 -->
<label>性 别:</label>
<input type="radio" name="gender" value="0"> 男
<input type="radio" name="gender" value="1"> 女
</div>
<br>
<div>
<label>爱 好:</label>
<input type="checkbox" name="like" value="学习">学习
<input type="checkbox" name="like" value="python">python
<input type="checkbox" name="like" value="前端">前端
<input type="checkbox" name="like" value="美少女A
">美少女
</div>
<br>
<div>
<!-- 上传文件 -->
<label>头 像</label>
<input type="file" name="">
</div>
<br>
<div>
<label>个人介绍:</label>
<textarea name="info"></textarea>
</div>
<br>
<div>
<label>籍 贯:</label>
<select name="籍贯">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value=南昌"">南昌</option>
</select>
</div>
<br>
<input type="hidden" name="hid" value="12"><!-- 在页面存一个值到时候一起提交 -->
<div>
<input type="submit" name="" value="提交">
<!--<input type="reset" name="" value="重置"> -->
<!-- <input type="image" src="./images/goods.jpg" name="" value="提交"> -->
<input type="reset" name="" value="重置">
</div>
<br>
</form>
</body>
</html>
<!-- 表单的声明<form action=""></form> -->
报错，对于报错原因进行探究，我使用本机执行程序(以本机为服务器接收来自网页的Post请求)
import socket
def main():
# 创建套接字---买手机
tcp_server = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
# 绑定---插卡
ip = input("请输入本机ip")
port = int(input("请输入本机port"))
tcp_server.bind((ip, port))
# listen使套接字变为可以被动链接---可以响铃
tcp_server.listen(128)
while True:
print("监听中")
# accept等待新的客户端到来---等待别人打来
client_socket, client_address = tcp_server.accept()
print(client_address, "已到来") # ('192.168.0.103', 63426) 已到来
# print(client_socket) # <socket.socket fd=376, family=AddressFamily.AF_INET, type=SocketKind.SOCK_STREAM, proto=0, laddr=('192.168.0.103', 8080), raddr=('192.168.0.103', 63426)>
# print(client_address) # ('192.168.0.103', 63484)
while True:
# 接收数据
recv_data = client_socket.recv(1024)
if not recv_data:
print(client_address, "走了")
client_socket.close()
break
print("接收到数据", recv_data.decode("gbk")) # 接收到数据 b'1'
# 发送数据
msg = input("请输入要发送的数据")
client_socket.send(msg.encode("gbk"))
tcp_server.close()
if __name__ == "__main__":
main()请输入本机ip127.0.0.1
请输入本机port8848
监听中
('127.0.0.1', 51205) 已到来
接收到数据 POST /%E5%B0%B1%E4%B8%9A%E7%8F%AD-%E5%89%8D%E7%AB%AF/html/3.%E8%A1%A8%E5%8D%95/127.0.0.1:8976 HTTP/1.1
Host: 127.0.0.1:8848
Connection: keep-alive
Content-Length: 108
Cache-Control: max-age=0
sec-ch-ua: ".Not/A)Brand";v="99", "Google Chrome";v="103", "Chromium";v="103"
sec-ch-ua-mobile: ?0
sec-ch-ua-platform: "Windows"
Upgrade-Insecure-Requests: 1
Origin: http://127.0.0.1:8848
Content-Type: application/x-www-form-urlencoded
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9
Sec-Fetch-Site: same-origin
Sec-Fetch-Mode: navigate
Sec-Fetch-User: ?1
Sec-Fetch-Dest: document
Referer: http://127.0.0.1:8848/%E5%B0%B1%E4%B8%9A%E7%8F%AD-%E5%89%8D%E7%AB%AF/html/3.%E8%A1%A8%E5%8D%95/02%E8%A1%A8%E5%8D%95%E6%8F%90%E4%BA%A4.html
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0
请输入要发送的数据好
接收到数据 .9usename=zzh&passwd=123&gender=0&like=%E5%AD%A6%E4%B9%A0&info=12&%E7%B1%8D%E8%B4%AF=%E5%8C%97%E4%BA%AC&hid=12
请输入要发送的数据使用post进行接收并没有明文这使安全性大大提高。
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
