HTML学习笔记（二）表单标签与表格标签

最新推荐文章于 2022-07-08 21:25:46 发布

团子的守护

最新推荐文章于 2022-07-08 21:25:46 发布

阅读量753

点赞数 1

文章标签： html 前端

本文链接：https://blog.csdn.net/m0_51734025/article/details/122072519

版权

只要不放弃自己，在哪都能放光！！！！！每天鼓励自己的一句话

下面是看了林海峰老师的视频总结与大家分享

一、表格标签

首先为大家列举它的属性

border: 表格边框.
cellpadding: 内边距
cellspacing: 外边距.
width: 像素百分比.（最好通过css来设置长宽）
rowspan: 单元格竖跨多少行
colspan: 单元格横跨多少列（即合并单元格）

下面用一个小案例为大家介绍table标签即展示它的效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--border加外边框-->
<table border="1" cellpadding="5" cellspacing="5">
<!--thread表头（字段信息）-->
    <thread>
<!--一个tr表示一行-->
        <tr>
<!--th加粗文本-->
            <th>username</th>
            <th>passwprd</th>
            <th>hobby</th>
        </tr>
    </thread>
<!--tbody表单（数据信息）-->
    <tbody>
    <!--td正常文本-->
    <tr>
            <td>jason</td>
            <td>123</td>
            <td>read</td>
    </tr>
    <tr>

            <td>egon</td>
            <td>123</td>
            <td>drink tea</td>
    </tr>
    <tr>
            <td>tank</td>
            <td>123</td>
            <td>running</td>
    </tr>
    </tbody>
</table>
</body>
</html>

结果演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>rowspan效果演示</title>
</head>
<body>
<!--border加外边框-->
<table border="1" cellpadding="5" cellspacing="5">
<!--thread表头（字段信息）-->
    <thread>
<!--一个tr表示一行-->
        <tr>
<!--th加粗文本-->
            <th>username</th>
            <th>passwprd</th>
            <th>hobby</th>
        </tr>
    </thread>
<!--tbody表单（数据信息）-->
    <tbody>
    <!--td正常文本-->
    <tr>
            <td>jason</td>
            <td>123</td>
            <td>read</td>
    </tr>
    <tr>
<!--rowspan="2"竖直方向一次占两行-->
            <td rowspan="2">egon</td>
            <td>123</td>
            <td>drink tea</td>
    </tr>
    <tr>
<!--            <td>tank</td>-->
            <td>123</td>
            <td>running</td>
    </tr>
    </tbody>
</table>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>colspan效果演示</title>
</head>
<body>
<!--border加外边框-->
<table border="1" cellpadding="5" cellspacing="5">
<!--thread表头（字段信息）-->
    <thread>
<!--一个tr表示一行-->
        <tr>
<!--th加粗文本-->
            <th>username</th>
            <th>passwprd</th>
            <th>hobby</th>
        </tr>
    </thread>
<!--tbody表单（数据信息）-->
    <tbody>
    <!--td正常文本-->
    <tr>
            <td>jason</td>
            <td>123</td>
            <td>read</td>
    </tr>
    <tr>

<!--colspan="2"水平放向一次占两列-->
            <td colspan="2">egon</td>
<!--            <td>123</td>-->
            <td>drink tea</td>
    </tr>
    <tr>
            <td>tank</td>
            <td>123</td>
            <td>running</td>
    </tr>
    </tbody>
</table>
</body>
</html>

二、表单标签

首先大家应该知道的是：
在该form标签内部书写的获取用户的数据都会被form标签提交到后端
form表单默认提交数据的方式是get请求，数据是直接放在url后面的
action:控制数据提交的后端路径（给哪个服务端提交数据）
1、什么都不写 默认就是朝当前页面所在的url提交数据
2、写全路径 如：http://www.baidu.com 朝百度服务端提交
3、只写路径后缀 如：action='/index/'自动识别出当前服务端的ip和port拼接到前面  host:port/index/

select标签 默认是单选 可以加mutiple参数变多选，默认选中是selected 一个个下拉框选项是一个个option标签

textarea标签：获取大段文本

能够触发form表单提交数据的按钮：（一定要记住）
1、<input type="submit" value="登录">
2、<button>登录</button>

所有获取用户输入的标签，都应该有name属性
name属性就类似于字典的key
用户输入的数据就类似于字典的value
针对用户输入的标签，如果你加了value 那就是默认值
disable 禁用
readonly 只读

下面是input的type属性值介绍

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

接下来为大家上一组简单的综合运用的案例即效果演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
</head>
<body>
<h1>注册页面</h1>
<form action="">
<!--    第一种直接将input框写到label内-->
    <p>
        <label for="d1">
        username:<input type="text" id="d1" disabled value="默认值">
    </label>
    </p>

<!--    第二种通过id链接即可，无需嵌套-->
    <p>
          <label for="d2">password:</label>
    <input type="password" id="d2" readonly>
    </p>
    <p>
       birthday<input type="date">
    </p>
    <p>
        gender:
        <input type="radio" name="gender" checked>male
        <input type="radio" name="gender">female
    </p>
    <p>
        hobby:
        <input type="checkbox">read
        <input type="checkbox" checked>learn
        <input type="checkbox" checked>running
        <input type="checkbox">swimming
    </p>
    <p>
        you can not see
        <input type="hidden">
    </p>
    <p>
        province:
        <select name="" id="">
            <option value="">上海</option>
            <option value="">北京</option>
            <option value="" selected="selected">深圳</option>
            <option value="" selected>杭州</option>
        </select>
    </p>
    <p>
        class:
        <select name="" id="" multiple>
            <option value="" selected>Chinese</option>
            <option value="" selected>Math</option>
            <option value="">English</option>
            <option value="">Science</option>
        </select>
    </p>
    <p>
        province1:
        <select name="" id="">
            <optgroup label="上海">
                <option value="">浦东</option>
                <option value="">黄埔</option>
            </optgroup>
            <optgroup label="北京"></optgroup>
            <option value="">朝阳</option>
            <option value="">昌平</option>
            <optgroup label="深圳"></optgroup>
            <option value="">xxxx</option>
            <option value="">yyyy</option>
            <optgroup label="杭州"></optgroup>
        </select>
    </p>
    <p>
        file:
        <input type="file" multiple>
    </p>
    <p>
        self-introduction:
        <textarea name="" id="" cols="30" rows="10" maxlength="20"></textarea>
    </p>
    <input type="submit" value="登录">
<!--    当你没有指定按钮的文本内容，不同的浏览器打开之后可能渲染出来的文本不一致-->
    <input type="button" value="按钮">
    <input type="reset" value="重置">
<!--    ps:input不跟label关联也可以，跟label关联后鼠标点击input旁边的文字(username)也能跳到input框内-->
<!--    label和input都是行内标签-->

</form>
</body>
</html>

下面我们稍微用下flask框架为大家简单演示下表单提交数据给flask框架接收

ps：以后会慢慢为大家总结框架的学习内容，希望大家多多支持

我们还是用那个注册案例的表单作为例子，稍微改动下，也是为了更好的补充form表单的知识内容

form表单默认提交数据的方式是get请求，数据是直接放在url后面的（只显示input后面有name属性的标签）<br>
如：username后面输入dadadada,gender默认
get请求方式会将数据都放入url后面
http://127.0.0.1:5000/index/?username=dadadada&gender=on<br>
post请求不会放入url后面
http://127.0.0.1:5000/index/
你可以通过method指定提交方式
针对用户选择的标签，用户不需要输入内容，但是你需要提前给这些标签添加内容values值
form表单提交文件需要注意：
    1、method必须是post
    2、enctype="multipart/form-data"
        enctype类似于数据提交的编码格式，默认是urlencoded 只能够提交普通的文本数据，formdata 就可以支持提交文本数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<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">
    </label>
    </p>


    <p>
          <label for="d2">password:</label>
    <input type="password" id="d2" name="password">
    </p>
    <p>
       birthday<input type="date">
    </p>
    <p>
        gender:
        <input type="radio" name="gender" checked value="male">male
        <input type="radio" name="gender" value="female">female
    </p>
    <p>
        hobby:
        <input type="checkbox" name="hobby" value="read">read
        <input type="checkbox" checked name="hobby" value="learn">learn
        <input type="checkbox" checked name="hobby" value="running">running
        <input type="checkbox" name="hobby" value="swimming">swimming
    </p>
    <p>
        province:
        <select name="province" id="">
            <option value="上海">上海</option>
            <option value="北京">北京</option>
            <option value="深圳" selected="selected">深圳</option>
            <option value="杭州" selected>杭州</option>
        </select>
    </p>
    <p>
        class:
        <select name="class" id="" multiple>
            <option value="Chinese" selected>Chinese</option>
            <option value="Math" selected>Math</option>
            <option value="English">English</option>
            <option value="Science">Science</option>
        </select>
    </p>
    <p>
        province1:
        <select name="province1" id="">
            <optgroup label="上海">
                <option value="浦东">浦东</option>
                <option value="黄埔">黄埔</option>
            </optgroup>
            <optgroup label="北京"></optgroup>
            <option value="朝阳">朝阳</option>
            <option value="昌平">昌平</option>
            <optgroup label="深圳"></optgroup>
            <option value="xxxx">xxxx</option>
            <option value="yyyy">yyyy</option>
            <optgroup label="杭州"></optgroup>
        </select>
    </p>
    <p>
        file:
        <input type="file" multiple name="myfile">
    </p>
    <p>
        self-introduction:
        <textarea name="info" id="" cols="30" rows="10" maxlength="20"></textarea>
    </p>
    <input type="submit" value="登录">

    <input type="button" value="按钮">
    <input type="reset" value="重置">
</body>
</html>

flask.py代码

from flask import Flask,request

app=Flask(__name__)

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

app.run()

首先运行flask的代码

运行结果如下图显示

上面的5000为flask的端口号

用浏览器打开上面的注测页面填完数据后点提交

点击登录后会跳转到http://127.0.0.1:5000/index/ 页面

观察flask.py页面结果会发现前端提交的数据都被接收到了

并且前端选中的文件数据会保存在当前路径中，更改该文件的后缀为原文件的后缀即可，因为这里我提交的是图片文件，所以改为.jpg后缀就可以啦~

团子的守护

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML学习笔记（二）表单标签与表格标签

只要不放弃自己，在哪都能放光！！！！！每天鼓励自己的一句话下面是看了林海峰老师的视频总结与大家分享一、表格标签首先为大家列举它的属性border: 表格边框. cellpadding: 内边距 cellspacing: 外边距. width: 像素百分比.（最好通过css来设置长宽） rowspan: 单元格竖跨多少行 colspan: 单元格横跨多少列（即合并单元格）下面用一个小案例为大家介绍table标签即展示它的效果<!DOCTYPE html>&.
复制链接

扫一扫