1.HTML 表单

最新推荐文章于 2023-01-08 15:56:31 发布

开局签到Python基础

最新推荐文章于 2023-01-08 15:56:31 发布

阅读量361

点赞数

风

本文链接：https://blog.csdn.net/qq_46137324/article/details/119375627

版权

1.表格标签

在网页中只要是展示数据一般都会使用表格标签。

<table>                    表格
	<thead>                表头->字段信息
		<tr>               一个tr 表示一行
			<th>name</th> th 加粗文本
			<td>name</td> td 普通文本
		</tr>
	</thead>        
    
	<tbody> </tbody>       表单->数据信息
</table>

例子：
kid 123 read
qz  456 sleep
qqq 789 eat

<!DOCTYPE html>
<meta charset="UTF-8">
<title>我是一个表格</title>

<body>
    <table>
        <thead>
          <tr>
              <th>username</th>
              <th>password</th>
              <th>hobby</th>
          </tr>
        </thead>
        
        <tbody>
            <tr>
                <td>kid</td>
                <td>123</td>
                <td>read</td>

            </tr>
            <tr>
                <td>qz</td>
                <td>456</td>
                <td>sleep</td>
            </tr>
            <tr>
                <td>qq</td>
                <td>789</td>
                <td>eat</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

1.1表格属性

border 外边框

border="1"  外边框  1为宽度。

<table border="1" >

cellspacing 内间距

cellspacing="5"   内边框到外边框的距离

<table border="1" cellpadding="5" cellspacing="5">

行标签属性

<td 属性>
rowspan="2"   垂直方向  
colspan="2"   水平方向 

占用其他行会将改行的数据想后挤。
占用其他行会将改行的数据想后挤，修改传入的数据写空一段就对齐了。

<td rowspan="2" >kid</td>
<td colspan="2" >kid</td>

2.表单

使用表单获取前端用户数据（输入 选择 上传···），再基于网络发给后端服务器。

2.1form创建表单

<form action="">  XXXX </form>
在form标签内部（例：XXXXX）写的获取用户数据都会被from标签提交到后端。
action ：控制数据提交的后端路径。

action三种提交方式：

  三种提交方式
  1.什么都不写，默认就是朝当前页面所在的url提提交数据。
  	url当前网页的地址栏，输入www.xxx.com那个。
  2.写全路径：https:www.xxx.com 指定服务端提交
  3.只写路径后缀：action='/index/' 自动识别出当前服务端的ip和post拼接到前面。
  	host:post/index/

2.2input获取输入信息####

<input type="text">           # 获取输入
username<input type="text"> 　# 提示信息写在便签前面 

内部设定的值：
text：    普通文本
password 以密文展示
date     时间设置，日历本

2.3label跳转到行数

在点击提示信息的时候，光标会跳到输入行内，input标签一般配合着label标签使用。
label 与 input 都是行内标签，使用br换行。

两种写法

写法1：直接将input框写在label内
写法2：通过id进行关联即可，不要嵌套。

<label for="d1">username: <input type="text" id="d1"></label>

<label for="d1"></label>
username: <input type="text" id="d1">

<!DOCTYPE html>
<meta charset="UTF-8">
<title>我是一个需要重点学习的</title>

<body>
    <h1>注册页面</h1>
        <form action="">
            <label for="d1">username: <input type="text" id="d1">
        </label></form>
</body>
</html>

disabled禁用框

 disabled禁用框属性禁用框，为不可选状态，用框不能使用。

username: <input type="text" id="d1"  disabled>

date 时间设置

<input type="date">  设置时间显示日历本进行选择。

<label for="d3"> birthday: <input type="date" id="d3"> </label>

password密文

<input type="password">  设置为密文,易实心圆点代替位数。

2.4按钮

<input type="submit">   # 触发form提交表单数据，刷新当前网页。
<input type="button">   # 空白的按钮，没有功能。通常用于占位，后续在写功能。
<input type="reset">    # 重置，清除写的数据。

在点击提交后，将数据打包，提交给后端，当前页面刷新。

名称设置

在没有指定按扭的问题内容，不同的浏览器打开之后不同的，会渲染出不同的效果。
在谷歌浏览器显示为提交，在edge浏览器显示提交。
value指定按钮的名称，名字设置为能描述实现的功能。
设置之后所有的浏览器渲染的效果将一致。

<input type="submit" value="注册">    # 提交
<input type="button" value="按钮">    # 空白的按钮
<input type="reset"  value="重置">    # 重置

2.5提交表单两种方式

能触发form提交表单数据的按钮：
1.<input type="submit">   # 触发form提交表单数据，刷新当前网页。
2.<input type="button">   # 触发form提交表单数据，刷新当前网页。
button 默认是一个空白的按钮

2.6radio单选框

<input type="radio"> xxx 
radio 单选框  后面跟名称，渲染时名字在前，选款在名字后面。
所有选项都可以选，选择后不能取消。

<p>
    <input type="radio">male
    <input type="radio">female
    <input type="radio">others
</p>

表单中的数据以键值对形式来，所有获取用户输入的标签都因该有name属性，
name属性 就类似于字典的key，输入的数据类似于字典的value。

<p>
    <input type="radio"  name="gender">male
    <input type="radio"  name="gender">female
    <input type="radio"  name="gender">others
</p>

通过设置name输出存储值，这是只能选择一个选项。

checked默认选中

checked = "checked" checked属性设置默认选中。

<input type="radio"  name="gender" checked = "checked">male
当标签值和属性值一样的时候，可以简写：                  
<input type="radio"  name="gender" checked>male

<p>
    <input type="radio"  name="gender" checked = "checked">male
    <input type="radio"  name="gender">female
    <input type="radio"  name="gender">others
</p>

chevkbox 多选框

chevkbox 多选框,可选择对个选项。

<p>hobby
    <input type="checkbox" checked> 吃
    <input type="checkbox" checked> 喝
    <input type="checkbox"> 玩
</p>

2.7select下拉框

下拉框选择，默认单选，
<p> province                      设置名称文本
<select name="" id="">            下拉框
<option value="">北京</option>     下拉框选项

<p>province
    <select name="" id="">
        <option value="">北京</option>
        <option value="">上海</option>
        <option value="">深圳</option>
    </select>
</p>

multiple下拉框多选

multiple 属性设置为多选。

<select name="" id="" multiple>

默认值

selected 设置默认选项
selected = "selected" 可以简写 selected

<p>province
    <select name="" id="">
        <option value="">北京</option>
        <option value="" selected>上海</option>
        <option value="">深圳</option>
    </select>
</p>

多级选项

  <optgroup label="北京">                # 分组
      <option value="">某某镇A</option>  # 组内
      <option value="">某某村A</option>

<p>province
	<select name="" id="">
        <optgroup label="北京">
        <option value="">某某镇A</option>
        <option value="">某某村A</option>
	</optgroup>
    <optgroup label="上海">
        <option value="">某某镇B</option>
        <option value="">某某村B</option>
    </optgroup>
    <optgroup label="深圳">
        <option value="">某某镇C</option>
        <option value="">某某村C</option>
	</optgroup>
</select>
</p>

2.8文件

上传文件到表单，点开选择上传单个文件进行。
multiple 属性，设置可选上传多个文件。

<p>文件：
	<input type="file">
</p>

<p>文件：
	<input type="file" multiple>
</p>

2.12textarea大段文本框

<p> xxx 文本框提示信息。
textarea 设置一个大的文本框，可拖到右下角，拖拉文本框的小大。

<p> 其他备注信息：
	<textarea name="" id="" cols="30" rows="10"></textarea>
</p>

3.提交表单数据

3.1开启服务端

1.先安装FLASK框架
pip3 install FLASK

from flask  import  Flask

app = Flask(__name__)

app.run()

ABAPhandlebars服务器没有任何数据，报404···


![image-20210803185824311](https://img-blog.csdnimg.cn/img_convert/71a8f22ea28198d46a5a4fc5223a5af1.png)

------

#### 3.2开放路径 ####

```python
from flask  import  Flask

app = Flask(__name__)
@app.route('/index/',methods=['GET', 'POST']) 
def index():
    return 'ok'    # 连通了服务单返回ok

app.run()

'/index/' 对外开发的路径

methods=['GET', 'POST'] 设置当前url即可以支持get请求也可以支持post请求，
默认不写就只能接受get请求。

# 设置html数据的提交地址
<form action="http://127.0.0.1:5000/index">

在注册界面输入注册信息，写完了点提交。

提交成功返回ok

3.3数据安全问题

form表单默认提交数据的方式是get请求，数据是直接放在url后面的。
属于以键值对的方式存放，需要设置键。 name="username"。

<form action="http://127.0.0.1:5000/index/">
    <label for="d1"> username: <input type="text" id="d1" name="username"> </label>
    <br>
    <label for="d2"> password: <input type="password" id="d2" name="password"> </label>
    <br>

get请求将帐户密码都显示在utl地址栏中。

可以通过method指定提交方式，post请求de数据不放在url后面,如果不写默认是get。

<form action="http://127.0.0.1:5000/index" method='post'>

可以通过request获取form表单提交的数据,只有构造了键值对的可以被拿到数据。

from flask import Flask, request

app = Flask(__name__)

@app.route('/index/', methods=['GET', 'POST'])
def index():
    print(request.form)  # 获取form表单提交过来的非文件数据
    return 'ok'

app.run()

ImmutableMultiDict([('username', 'kid'), ('password', '123'), ('birthday', '2021-08-03')])

针对选择的便签不要输入内容，需要提前给这些标签添加value值。

<p>hobby
    <input type="checkbox" name="hobby" value="吃" checked> 吃
    <input type="checkbox" name="hobby" value="喝" checked> 喝
    <input type="checkbox"name="hobby" value="玩" > 玩
</p>

ImmutableMultiDict([('username', 'kid'), ('password', '123'), ('birthday', '2021-08-03'),
('hobby', '吃'), ('hobby', '喝')])

3.3提交文件

from 表单提交文件需要以下两个条件：
1.method="post" 
2.enctype="multipart/form-data"
	enctype类似于数据提交的编码格式，默认是urlencoded 只能够提交普通的文本数据，
	from-date可以支持提交文件数据

<form action="http://127.0.0.1:5000/index/" method="post" enctype="multipart/form-data">

<p>文件：
	<input type="file" name="file.png">
</p>

from flask import Flask, request

app = Flask(__name__)


@app.route('/index/', methods=['GET', 'POST'])
def index():
    print(request.form)   # 获取form表单提交过来的非文件数据
    print(request.files)  # 获取文件数据
    file_obj = request.files.get('file.png')
    file_obj.save(file_obj.name)
    return 'ok'

app.run()

 HTML中python服务端中文件的名称要相同,不然会报错。
 name="file.png"
 file_obj = request.files.get('file.png')

4. 其他补充

disabed 禁用框
禁用框并设置默认值：用户输入的标签，如果加了value那么value就是默认值。

 <label for="d1"> 
     username: <input type="text" id="d1" name="username" disabed value="kid">
</label>

readonly 只读

 <label for="d1"> 
     username: <input type="text" id="d1" name="username" readonly value="kid"> 
</label>

hidden 隐藏框

 <label for="d1"> 
     username: <input type="text" id="d1" name="username" hidden> 
</label>

 HTML中python服务端中文件的名称要相同,不然会报错。
 name="file.png"
 file_obj = request.files.get('file.png')

4. 其他补充

disabed 禁用框
禁用框并设置默认值：用户输入的标签，如果加了value那么value就是默认值。

 <label for="d1"> 
     username: <input type="text" id="d1" name="username" disabed value="kid">
</label>

readonly 只读

 <label for="d1"> 
     username: <input type="text" id="d1" name="username" readonly value="kid"> 
</label>

hidden 隐藏框

 <label for="d1"> 
     username: <input type="text" id="d1" name="username" hidden> 
</label>

开局签到Python基础

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
1.HTML 表单

文章目录1.表格标签1.1表格属性border 外边框cellspacing 内间距行标签属性2.表单2.1form创建表单action三种提交方式：2.2input获取输入信息####2.3label跳转到行数两种写法disabled禁用框date 时间设置password密文2.4按钮名称设置2.5提交表单两种方式2.6radio单选框checked默认选中chevkbox 多选框2.7select下拉框multiple下拉框多选默认值多级选项2.8文件2.12textarea大段文本框3.提交表单数据
复制链接

扫一扫