前端(三)

2023-12-19 00:37:36

1.表格标签

数据展示:
jason 123 read
egon	123 dbj
tank  123 hecha
...
<table> 
	<thead>
  		<tr>  一个tr就表示一行
        	<th>username</th>  加粗文本
            <td>username</td>  正常文本
        </tr>
  	</thead>  表头(字段信息)
  	<tbody>
        <tr>
          <td>jason</td>
          <td>123</td>
          <td>read</td>
        </tr>
        <tr>
          <td>egon</td>
          <td rowspan="2">egon</td>
         <!--        <td>123</td>-->
          <td>DBJ</td>
        </tr>
   	</tbody>	 表单(数据信息)
</table>


<table border="1">  加外边宽
<td colspan="2">egon</td>  水平方向占多行
<td rowspan="2">DBJ</td>   垂直方向占多行

# 原生的表格标签很丑 后续一般都是使用框架封装好的 很好看

2.表单标签

"""
能够获取前端用户数据(用户输入的、用户选择、用户上传...)基于网络发送给后端服务器
"""
# 写一个注册功能
<form action=""></form>  在该form标签内部书写的获取用户的数据都会被form标签提交到后端

action:控制数据提交的后端路径(给哪个服务端提交数据)
  	1.什么都不写  默认就是朝当前页面所在的url提交数据
    2.写全路径:https://www.baidu.com  朝百度服务端提交
    3.只写路径后缀action='/index/'  
    	自动识别出当前服务端的ip和port拼接到前面
      host:port/index/

<label for="d1">  第一种 直接讲input框写在label内
            username:<input type="text" id="d1">
</label>					第二种 通过id链接即可 无需嵌套
<label for="d2">password:</label>
<input type="text" id="d2">
ps:input不跟label关联也没有问题
  
"""
label 和 input都是行内标签
"""



input标签 就类似于前端的变形金刚  通过type属性变形
	text:普通文本
  password:密文
	date:日期	
  submit:用来触发form表单提交数据的动作
  button:就是一个普普通通的按钮 本身没有任何的功能 但是它是最有用的，学完js之后可以给它自定义各种功能
  reset:重置内容
  radio:单选
    	默认选中要加checked='checked'
      <input type="radio" name="gender" checked='checked'>男
      当标签的属性名和属性值一样的时候可以简写
      <input type="radio" name="gender" checked>女
	checkbox:多选
  		<input type="checkbox" checked>DBJ
  
  file:获取文件  也可以一次性获取多个
    	<input type="file" multiple>
  hidden:隐藏当前input框
    	钓鱼网站
      	
  


select标签 默认是单选 可以加mutiple参数变多选 默认选中selected
						<select name="" id="" multiple>
                <option value="" selected>新垣结衣</option>
                <option value="" selected>斯佳丽</option>
                <option value="">明老师</option>
            </select>

textarea标签  获取大段文本
	  <textarea name="" id="" cols="30" rows="10"></textarea>

# 能够触发form表单提交数据的按钮有哪些(一定要记住)
		1、<input type="submit" value="注册">
		2、<button>点我</button>
    
# 所有获取用户输入的标签 都应该有name属性
	name就类似于字典的key
  用户的数据就类似于字典的value
  <p>gender:
            <input type="radio" name="gender">男
            <input type="radio" name="gender">女
            <input type="radio" name="gender">其他
  </p>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <h1>注册页面</h1>
    <form action="http://127.0.0.1:5000/index/" method="post" enctype="multipart/form-data">
        <p>
            <label for="d1">username:<input type="text" id="d1" name="username" value="默认值" readonly></label>
        </p>
        <p>
            <label for="d2">password:<input type="password" id="d2" name="password"></label>
        </p>

            <input type="hidden" name="usernamename" value="骗子账户">

        <p>birthday:
            <input type="date">
        </p>
        <p>gender:
            <input type="radio" name="gender" value="male">男
            <input type="radio" name="gender" checked value="female">女
            <input type="radio" name="gender" value="others">其他
        </p>
        <p>hobby:
            <input type="checkbox" name="hobby" value="basketball">篮球
            <input type="checkbox" checked name="hobby" value="football">足球
            <input type="checkbox" checked name="hobby" value="doublecolorball">双色球
        </p>
        <p>province：
            <select name="province" id="">
                <option value="sh">上海</option>
                <option value="bj" selected>北京</option>
                <option value="sz">深圳</option>
            </select>
        </p>
<!--        <p>前女友:-->
<!--            <select name="" id="" multiple>-->
<!--                <option value="" selected>新垣结衣</option>-->
<!--                <option value="" selected>斯佳丽</option>-->
<!--                <option value="">明老师</option>-->
<!--            </select>-->
<!--        </p>-->
<!--        <p>province1:-->
<!--            <select name="" id="">-->
<!--                <optgroup label="上海">-->
<!--                    <option value="">浦东</option>-->
<!--                    <option value="">黄埔</option>-->
<!--                    <option value="">青浦</option>-->
<!--                </optgroup>-->
<!--                <optgroup label="北京">-->
<!--                    <option value="">朝阳</option>-->
<!--                    <option value="">昌平</option>-->
<!--                    <option value="">沙河</option>-->
<!--                </optgroup>-->
<!--                <optgroup label="深圳">-->
<!--                    <option value="">111</option>-->
<!--                    <option value="">222</option>-->
<!--                    <option value="">333</option>-->
<!--                </optgroup>-->
<!--            </select>-->
<!--        </p>-->
        <p>文件:
            <input type="file" multiple name="myfile">
        </p>
        <p>自我介绍:
            <textarea name="info" id="" cols="30" rows="10"></textarea>
        </p>
        <input type="submit" value="注册">
<!--        当你没有指定按钮的文本内容 不同的浏览器打开之后可能渲染的文本内容不一致-->
        <input type="button" value="按钮">
        <input type="reset" value="重置">
        <button>点我</button>
    </form>
</body>
</html>

2.1 验证form表单提交数据

# 接下来的框架代码无需掌握  看一下效果即可
pip3 install FLASK

form表单默认提交数据的方式 是get请求  数据是直接放在url后面的
	http://127.0.0.1:5000/index/?username=sdadasdsda&gender=on
你可以通过method指定提交方式
	<form action="http://127.0.0.1:5000/index/" method="post">
  
针对用户选择的标签 用户不需要输入内容 但是你需要提前给这些标签添加内容value值
<p>gender:
            <input type="radio" name="gender" value="male">男
            <input type="radio" name="gender" checked value="female">女
            <input type="radio" name="gender" value="others">其他
</p>
<p>hobby:
            <input type="checkbox" name="hobby" value="basketball">篮球
            <input type="checkbox" checked name="hobby" value="football">足球
            <input type="checkbox" checked name="hobby" value="doublecolorball">双色球
</p>
<p>province：
            <select name="province" id="">
                <option value="sh">上海</option>
                <option value="bj" selected>北京</option>
                <option value="sz">深圳</option>
            </select>
</p>



"""
form表单提交文件需要注意
	1.method必须是post
	2.enctype="multipart/form-data"
		enctype类似于数据提交的编码格式
			默认是urlencoded 只能够提交普通的文本数据
			formdata 就可以支持提交文件数据
"""
<form action="http://127.0.0.1:5000/index/" method="post" enctype="multipart/form-data">


"""下面的代码无需掌握 你只需要关心form表单即可"""
from flask import Flask, request


app = Flask(__name__)


# 当前url既可以支持get请求也可以支持post请求  如果不写默认只能支持get请求
@app.route('/index/',methods=['GET','POST'])
def index():
    print(request.form)  # 获取form表单提交过来的非文件数据
    # ImmutableMultiDict([('username', 'jason'), ('password', '123132131231233'), ('gender', 'on')])
    print(request.files)  # 获取文件数据
    file_obj = request.files.get('myfile.png')
    file_obj.save(file_obj.name)
    return 'OK'

app.run()


# 针对用户输入的标签。如果你加了value 那就是默认值
<label for="d1">username:<input type="text" id="d1" name="username" value="默认值"></label>
disable 禁用
readonly只读

文章来源:https://blog.csdn.net/m0_69402477/article/details/135063801
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。