前端基础之HTML进阶

合集 - 前端炒米粉(25)
1.前端基础之前端知识引入2.前端基础之HTTP协议介绍3.前端基础之HTML基础
4.前端基础之HTML进阶
5.前端基础之CSS基础6.前端基础之CSS选择器7.前端基础之CSS基本属性8.前端基础之CSS浮动和定位方式9.CSS小练习10.前端基础之JavaScript引入11.前端基础之JavaScript的数据类型12.前端基础之JavaScript数组13.前端基础之JavaScript运算符14.前端基础之JavaScript流程控制15.前端基础之JavaScript函数16.前端基础之JavaScript对象17.前端基础之JavaScriptDOM和BOM18.前端基础之原生js事件绑定案例19.前端基础之jQuery引入20.前端基础之jQuery基础21.前端基础之jQuery进阶22.前端基础之jQuery事件23.前端基础之jQuery重要补充24.前端框架之Bootstrap25.前端补充：url编码
收起

表格标签

  • 只要是展示数据，一般都可以使用表格标签
<body>
    <table border="1" cellpadding="5" cellspacing="5>
      # border：为表格添加外边框 
      # cellpadding： 调整字体离边框距离 
      # cellspacing ： 调整内边框离外边框的距离
        <thead> 表头(字段信息)
            <tr>  一个tr就表示一行
                <th>username</th>  带加粗的正常文本
                <td>username</td>  正常文本
            </tr>
        </thead> 
        <tbody> 表单(数据信息)
            <tr>
                <td colspan="2">xiao</td>
                 # colspan ：水平占两行
                <td rowspan="2">123</td>
               	 # rowspan : 竖直方向占多行
                <td>read</td>
            </tr>
        </tbody> 
    </table>
</body>

原生的表格标签很丑，但是后续我们一般都是使用框架封装好的，比如bootstrap

form表单（重要）

一、form表单是什么

表单在网页中主要负责数据采集功能。HTML中的标签，就是用于采集用户输入的信息，并且通过标签的提交操作，把采集到的信息提交到服务器端进行处理。

一个完整的表单应该由3部分组成：表单标签、表单域（输入框）、提交按钮。

<form>表单标签  
    <input type="text">表单域    
    <button type="submit">提交按钮</button >
</form>

二、form表单的属性

属性 描述
accept-charset 规定在被提交表单中使用的字符集（默认：页面字符集）。IE只能识别_charset属性，其他浏览器只能识别accept-charset属性。
action 规定向何处提交表单的地址（URL）（提交页面）。它可以是一个URL地址(提交给程式)或一个电子邮件地址。
autocomplete 规定浏览器应该自动完成表单（默认：开启）。
enctype 规定被提交数据的编码（默认：url-encoded）。指明用来把表单提交给服务器时(当method值为”post”)的互联网媒体形式.这个特性的缺省值/默认值是”application/x-www-form-urlencoded”
method 规定在提交表单时所用的 HTTP 方法有post和get两种（默认：GET）。
name 规定识别表单的名称（对于 DOM 使用：document.forms.name）。
novalidate 规定浏览器不验证表单。
target 规定 action 属性中地址的目标（默认：_self）。指定提交的结果文档显示的位置

action属性补充：

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

对于method属性有以下几点补充：

## 在form表单环境下get和post的区别:
1. get是从服务器上获取数据，post是向服务器传送数据。
2. get是把参数数据队列加到提交表单的action属性所指的URL中，值和表单内各个字段一一对应，在URL中可以看到。post是通过HTTP post机制，将表单内各个字段与其内容放置在请求体内一起传送到action属性所指的URL地址。用户看不到这个过程。
3. 对于get方式，服务器端用request.GET获取变量的值，对于post方式，服务器端用request.POST获取提交的数据。
4. get传送的数据量较小，不能大于2KB。post传送的数据量较大，一般被默认为不受限制。但理论上，IIS4中最大量为80KB，IIS5中为100KB。
5. get安全性非常低，post安全性较高。但是执行效率却比Post方法好。

三、input标签

（1）input中的各种Type属性值

type属性值 描述
button 就是一个普普通通的按钮，本身没有任何的功能，但是它是最有用的，结合JavaScript之后可以给它自定义各种功能
checkbox 定义复选框。复选框常用于多项选择，如选择兴趣、爱好等，可对其应用 checked属性，指定默认选中项。
color 定义拾色器。color类型用于提供设置颜色的文本框，用于实现一个RGB颜色输入。其基本形式是# RRGGBB，默认值为#000000，通过value属性值可以更改默认颜色。单击clor类型文本框，可以快速打开拾色器面板，方便用户可视化选取一种颜色。
date 定义 date 控件（包括年、月、日，不包括时间）。
datetime 定义 date 和 time 控件（包括年、月、日、时、分、秒、几分之一秒，基于 UTC 时区）。
datetime-local 定义 date 和 time 控件（包括年、月、日、时、分、秒、几分之一秒，不带时区）。
email emai类型的标记是一种专门用于输入E-mai地址的文本输入框，用来验证emai输入框的内容是否符合E-mai地址格式;如果不符合，将提示相应的错误信息。
file 获取文件，也可以一次性获取多个，加上multiple就可以获取多个文件
hidden 定义隐藏输入字段。隐藏域对于用户是不可见的，通常用于后台的程序，初学者了解即可。
image 定义图像作为提交按钮。图像形式的提交按钮与普通的提交按钮在功能上基本相同，只是它用图像替代了默认的按钮，外观上更加美观。需要注意的是，必须为其定义src属性指定图像的url地址。
month 定义 month 和 year 控件（不带时区）。
number number类型的 <input/标记用于提供输入数值的文本框。在提交表单时，会自动检查该输入框中的内容是否为数字。如果输入的内容不是数字或者数字不在限定范围内则会出现错误提示。
password 密码输入框用来输入密码，其内容将以圆点或者" * "号的形式显示
radio 单选按钮用于单项选择按钮，如选择性别、是否操作等。需要注意的是，在定义单选按钮时，必须为同一组中的选项指定相同的name值，这样“单选”才会生效。此外，可以对单选按钮应用 checked属性，默认选中要加 checked="checked" 当标签的属性名和属性值一样的时候可以简写，直接写checked即可
range 定义用于精确值不重要的输入数字的控件（比如 slider 控件）。range类型的<inpu标记用于提供一定范围内数值的输入范围，在网页中显示为滑动条。它的常用属性与 number类型一样，通过min属性和max属性，可以设置最小值与最大值，通过step属性指定每次滑动的步幅。如果想改变mnge的vale值，可以通过直接拖动滑动块或者单击滑动条来改变。
reset 定义重置按钮，当用户输入的信息有误时，可单击重置按钮取消已输入的所有表单信息。可以对其应用 value属性，改变重置按钮上的默认文本。（重置所有的表单内容为默认值）。
search search类型是一种专门用于输入搜索关键词的文本框，它能自动记录一些字符，如站点搜索或者Google搜索。在用户输入内容后，其右侧会附带一个删除图标，单击这个图标按钮可以快速清除内容。
submit 定义提交按钮。提交按钮是表单中的核心控件，用户完成信息的输入后一般都需要单击提交按钮才能完成表单数据的提交。可以对其应用 value属性，改变提交按钮上的默认文本。
tel tel类型用于提供输入电话号码的文本框，由于电话号码的格式千差万别，很难实现一个通用的格式。因此，tel类型通常会和 pattern属性配合使用。
text 默认 定义一个单行的文本字段（默认宽度为 20 个字符）。单行文本输入框常用来输入简短的信息，如用户名、账号等，常用的属性有name、value、 maxlength
time 定义用于输入时间的控件（不带时区）。
url Url类型的< input />标记是一种用于输入URL地址的文本框，跟email属性值类似。如果所输入的内容是URL地址格式的文本，则会提交数据到服务器;如果输入的值不符合URL地址格式，则不允许提交，并且会有提示信息。
week 定义 week 和 year 控件（不带时区）。
Date pickers类型 Date picker类型是指时间日期类型。HML中提供了多个可供选取日期和时间的输入类型，用于验证输入的日期

详情请查询：https://blog.csdn.net/weixin_64471900/article/details/128347842

效果展示图：

image

（2）input标签的其它参数

  • name: 指定输入框的名称，在表单提交时，会将输入框的值与名称一起发送到服务器。
  • value: 指定输入框的初始值。
  • placeholder: 在输入框为空时显示的提示文本。
  • required: 设置为 true 时，表示输入框必须填写内容才能提交表单。
  • readonly: 设置为 true 时，表示输入框只读，用户无法编辑。
  • disabled: 设置为 true 时，表示输入框被禁用，用户无法编辑且不会被提交。
  • size: 指定输入框的可见宽度，单位为字符数。
  • maxlength: 指定输入框中可以输入的最大字符数。
  • autocomplete: 控制浏览器是否自动填充输入框。常见的值有 on（开启自动填充）和 off（关闭自动填充）。

四、label标签

<label> 标签为 input 元素定义标签（label）。

label 元素不会向用户呈现任何特殊的样式。不过，它为鼠标用户改善了可用性，因为如果用户点击 label 元素内的文本，则会切换到控件本身。

<label> 标签的 for 属性应该等于相关元素的 id 元素，以便将它们捆绑起来。

  1. 第一种：在html中，<label>标签通常和<input>标签一起使用，直接将 input框写在label内
<label>用户名:
  <input type="text">
</label>
  1. 第二种：通过id链接即可，无需嵌套：
<label for="d1">用户名:</label>
<input type="text" id="d1">

注意：label 和 input 都是行内标签

五、select标签

  • 默认是单选，可以加multiple参数变成多选，默认选中加selected，optgroup是二级标题
<p>市区：
  <select name="" id="" multiple>
      <optgroup label="上海">
          <option value="" selected>浦东</option>
          <option value="">黄埔</option>
          <option value="">青浦</option>
      </optgroup>
  </select>
</p>

六、textarea标签

<p>
	<textarea name="" id="" cols="30" rows="10" maxlength=""></textarea>
</p>
  • cols：列的值
  • rows：行的值
  • maxlength：限制最多字数

七、非常重要，一定要记住的两件事

（1）能够触发form表单提交数据功能的按钮有哪些

1.<input type="submit" value="注册">
 
2.<button>点我</button>

（2）所有获取用户输入的标签，都应该具有name属性

  • name就类似于字典的key
  • 用户的数据就类似于字典value
<p>gender:
    <input type="radio" name="gender" checked>男
    <input type="radio" name="gender">女
    <input type="radio" name="gender">其他
</p>

八、验证form表单提交数据

（1）form表单的默认请求方式

  • form表单默认提交数据的请求是 GET 请求
    • 数据拼接在 url 后面
http://127.0.0.1:5000/index/?username=xiao&gender=on
你可以通过method指定提交方式
<form action="http://127.0.0.1:5000/index/" method="post" enctype="multipart/form-data">

（2）form 表单的注意事项

  • method 必须是 post/get ...
  • enctype="multipart/form-data" 才能接收到二进制数据
    • enctype类似于数据提交的编码格式，默认是urlencoded，只能提交普通的文本数据，而formdata就可以支持提交文件数据

（3）验证

  • 前端：
针对用户选择的标签，用户不需要输入内容，但是你需要提前给这些标签添加内容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="read">读书
    <input type="checkbox" checked name="hobby" value="basketball">篮球
    <input type="checkbox" checked name="hobby" value="soccer">足球
    <input type="checkbox" name="hobby" value="run">跑步
</p>
<p>province:
    <select name="province" id="">
        <option value="beijing">北京</option>
        <option value="shanghai" selected>上海</option>
        <option value="guangdog">广东</option>
        <option value="shenzhen">深圳</option>
    </select>
</p>
  • 针对用户输入的标签，如果你加了value，那就是默认值
<label for="d1">username:<input type="text" id="d1" name="username" value="默认值"></label>
    
- disable 表示禁用
- readonly 表示只读
- hidden 隐藏属性框
  • 后端
pip install Flask
from flask import Flask, request
 
app = Flask(__name__)
 
 
# methods=['GET', 'POST'] : 当前URL 支持 get请求和post请求，不写默认是get请求
@app.route('/index/', methods=['GET', 'POST'])
def index():
    # 从 form 表单获取数据
    print(request.form)
 
    # 保存传过来的二进制数据
    file_data = request.files.get("file_input")
    print(file_data.name)
    file_data.save(file_data.name)
 
    return 'OK'
 
app.run()
posted @   Xiao0101  阅读(19)  评论(0)  编辑  收藏  举报
相关博文：
· 前端基础之HTML基础
· Django框架之form组件
· HTML-form表单
· 【4.0】HTML进阶
· 前端HTML基础之form表单
阅读排行：
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单，K8s 太复杂？w7panel 让容器管理更轻松！
点击右上角即可分享
微信分享提示

目录