a标签提交form表单_Day51 HTML表格表单标签、flask框架

最新推荐文章于 2021-02-19 12:20:08 发布

weixin_39617685

最新推荐文章于 2021-02-19 12:20:08 发布

阅读量304

点赞数

文章标签： a标签提交form表单 a标签获取input值 form表单action传参数 form表单默认提交方式 html select标签默认值 layui 表格内下拉框默认值

1、表格标签

<!DOCTYPE html>

2、表单标签

用于获取前端用户输入的数据(用户输入的、上传的、选择的)，基于网络发送给后端服务器。在该form标签内部书写的获取用户的数据都会被form标签提交

1、action标签

action：控制数据提交的后端路径-给哪个服务端提交数据
1、action为空：默认是朝当前页面所在的url提交数据
2、写全路径：https://www.luffycity.com/，朝路飞服务器提交
3、只写路径后缀：action='/index/'，会自动识别出当前页面所在的后端服务器的ip和port并拼接到前面，即host:port/index/-->

2、input标签

获取用户输入的标签，一般input标签要配合label标签一起使用，input不跟label关联也没问题。
第一种方式：将input标签写在label标签内：
<p>
<label for="d1"> 
username:<input type="text" id="d1" name="username">
</label>
</p>
第二种方式：通过input标签的id关联上label标签即可，无需嵌套
<p>
<label for="d2">password:</label>
<input type="password" id="d2" name="password">
</p>

input标签的类型：
text：普通文本
password：密文
date：日期 submit:提交按钮，用来触发form表单提交数据的动作，如果没有指定按钮的文本内容，不同的浏览器打开之后可能渲染的文本内容会不一致，需要指定value button：就是一个普通的按钮，本身没有任何的功能，但是它是最有用的，学完js之后可以给它自定义各种功能。
reset：重置内容
radio：单选
checked：默认选中，checked=“checked” ；当标签属性名和属性值一样时，简写成checked
checkbox：多选
file：获取文件
hidden：隐藏当前框，钓鱼网站就会用到
<p>你看不到我，隐藏了：
<input type="hidden">
</p>

针对用户输入的标签：
1、加上value="defaultvalue"，就是默认值，默认显示成defaultvalue，最终获取到的数据就是这里的defaultvalue。
2、加上disabled属性，就是只能看，不能改了，禁用。例如当我们修改密码的时候，用户名只能看不能改，需要修改的是密码。
3、readonly属性跟disabled差不多，也是只能看不能改。
<p>
<label for="da">
disable:<input type="text" id="da" name="disable" disabled value="disable">
</label>
</p>

3、select标签

默认是单选，加multiple可变成多选

4、textarea标签

用来获取大段文本：
<p>自我介绍：
<textarea name="" id="" cols="30" rows="10"></textarea>
</p>

3、form表单提交文件需要注意：

method必须是post
如果不写，默认是get，但是我们这里是要提交用户输入或选择的数据给服务器，所以需要指定为post方式
<form action="http://127.0.0.1:5000/index/" method="post" enctype="multipart/form-data">
enctype="multipart/form-data"
enctype类似于数据提交的编码格式，默认是urlencoded，只能够提交普通的文本数据，formdata就可以支持提交文件数据，这样上传的csv、Excel文件我们就能获取到了。

表单代码总结：