Form表单

1 在html中，通常把form标签称为表单
2 表单不会对页面样式产生任何影响，但它会影响页面的行为
3 它可以将表单中的数据，使用指定的请求方式（get或post），提交到指定的服务器地址

4 这里将涉及到form标签的8个重要内容：
4.1 提交时机
4.2 提交按钮
4.3 请求方式
4.4 请求地址
4.5 发送的数据
4.6 form表单的属性
4.7 input的属性
4.8 select的属性

提交时机

什么是表单提交？简单的说，就是将表单中的数据发送给服务器。详细的说，就是将form标签之间，用户填写的数据封装到消息体或url地址后，然后请求服务器。

而提交时机，就是指form表单什么时候提交。

通常，下面两种情况，都会导致form表单提交：

第一种:点击了表单中的提交按钮(数据会刷新)
第二种：用Ajax进行提交(异步提交，局部刷新)

提交按钮

当用户点击提交按钮的时候，会导致表单被提交！

<button>触发form表单提交按钮</button>

<input type="submit">触发form表单提交按钮

<input type="button">并不会触发form表单提交

说到这里，顺便说一句，一个页面可以出现多个form表单，但不允许在一个form表单里面出现另一个form表单，切记！

请求方式

所谓请求方式，就是提交时将使用什么类型的请求（get、post）发送给服务器

使用form标签的method属性，可以控制form表单的提交方式，该属性可以省略，若省略，默认的提交方式是get

当使用get方式提交表单时，浏览器会将表单中的数据添加到地址后面，作为地址参数

下面的form表单使用了get的方式提交请求：

<form action="" method="get">
    <p>账号：<input type="text" name="username"></p>
    <p>密码：<input type="password" name="password"></p>
    <p><input type="submit">提交</p>

</form>

当提交表单时，向服务器发送以下信息：

请求地址：当前url(action不写默认为当前url提交)?username=账号文本框内容&password=密码文本框内容

请求体：无

Post请求

<form action="" method="post">
    <p>账号：<input type="text" name="username"></p>
    <p>密码：<input type="password" name="password"></p>
    <p><input type="submit">提交</p>

</form>

当提交表单时，向服务器发送以下信息：

请求地址：当前url(action不写默认为当前url提交)

请求体：username=账号文本框内容&password=密码文本框内容

请求地址

表单中的请求地址是指，当提交form表单时，会将表单中的数据提交到服务的哪个地址去处理，就好比你去政府办事，你要把你的资料提交给哪个部门来处理

你可以使用form标签的action属性来设置其提交地址，该属性如果被省略，则默认为当前页面地址　　

后端通过request.GET/POST可以获取提交的信息

发送的数据

当表单被提交时，表单中的内容并不是全部都会提交，表单中的某个标签的数据，如果想要被提交到服务器，必须满足以下两个条件，缺一不可：

标签必须具有name属性值，没有name属性值的标签就无法组装键值对，它的值不会被提交
必须是input、select、textarea标签，其他标签的数据不会提交到服务器

在提交这些标签的数据时，键值对分别如下：

键：标签的name属性值
值：标签的value属性值

form表单的属性

1 action：要跳转的目标路径
2 accept-charset：规定服务器用哪种编码格式处理本表单所上传的数据编码格式；一般用“UTF-8”、“ISO-8859-1"、"gb2312"等
3 method：只有get、post两种方法；不指定时默认是get方法
3.1 get：提交数据量较小、安全性要求不是很高的数据
get请求会将表单的元素（就是实体类的属性）写入链接中
3.2 post：提交数据量大、安全性要求比较高的数据，上传文件只能用post
4 autocomplete：是否开启联想功能，默认是开启状态
5 enctype：媒体类型；发送到服务器之前应该如何对表单数据进行编码
5.1 application/x-www-form-urlencoded：默认编码，不涉及文件传输用这个就够了
5.2 multipart/form-data，这种编码类型不对字符编码，数据通过二进制的形式传送到服务器端，上传文件、MP3、MP4、视频、图片…
5.3 text/plain，将内容设置为纯文本的形式
6 target：与a标签相似，用的多的就是第一个
6.1 _blank：打开一个新页面浏览数据
6.2 _self：这个标签一般不用，忽略
6.3 _parent：这个标签也是很少用，忽略
6.4 _top：目标将会清除所有被包含的框架并将文档载入整个浏览器窗口
7 name：也是一个不经常用的属性
8 Novalidate：属性规定当提交表单时不对其进行验证

input的属性

1 input：输入框
1.1 type：类型默认为text
1.1.1 text：文本类型
1.1.2 password：密码类型
1.1.3 checkbox：复选框（多选）
1.1.4 radio：单选（有默认值）
1.1.5 submit：提交
1.1.6 reset：重置
1.1.7 file：文件
1.1.8 hidden：隐藏
1.1.9 image：图片
1.2.0 button：按钮
1.2 name：指定该input元素的名称，也可以指定其他元素
1.3 value：元素的初始值，type为radio时必须指定一个值
1.4 size：指定表单元素的初始宽度
当type=text、password时，表单元素的大小以字符为单位
其他类型时，以像素为单位
1.5 maxlength：type=text、password时输入的最大字符数
1.6 checked：type=radio、checkbox，指定按钮是否被选中
1.7 placeholder：文本框中的隐性提示（灰色字体的提示）
1.8 required：规定文本框内容不能为空

select的属性

<select name="city">
        <option value="HongKong">HongKong</option>
        <option value="Seoul">Seoul</option>
        <option value="Tokyo">Tokyo</option>
</select>

2 select：下拉框
2.1 name：下拉框元素名称
2.2 option：用单选标签定义下拉框选项，value发送到后台的值

table的属性

table代表单元格，tr、td不分大小写
<thead>表头
<tbody>表格
<tr>代表一行
<th>加粗
<td>正常代表一个单元格

<table>
        <thead>
            <tr>
                <th>name</th>
                <th>age</th>
            </tr>
            
        </thead>
        <tbody>
            <tr>
                <td>asjm</td>
                <td>18</td>
            </tr>
            
        </tbody>
    </table>

参考 https://zhuanlan.zhihu.com/p/58660974

参考 https://blog.csdn.net/qq_41767337/article/details/89287000

posted @ 2021-10-17 22:47 mofr 阅读(156) 评论(0) 收藏举报

刷新页面返回顶部

mofr