HTML——form标签
Form标签:
- HTML 表单用于收集用户输入,form定义 HTML 表单。
- 表单能够包含 input 元素,比如文本字段、复选框、单选框、提交按钮等等。
用form表单提交数据注意的问题:
- action属性和mothod属性需要更改。
- 所有input框要有name属性。
- 有一个input框的type属性时submit或者有一个button按钮。
子标签:
- input标签,用于对复选框、单选按钮、提交按钮等等。
属性:text(文本可见),password(密码不可见),radio(单选框),submit(提交按钮)value(返回给服务端的key和默认显示内容)placeholder(预内容填写)
- select标签,用于下拉框,下拉单选或多选
<select name="cla_name" multiple> #multiple为多选,默认为单选
{% for i in cla_all %}
<option value="{{ i.pk }}">{{ i.cla_name }}</option>
{% endfor %}
</select>
属性字段:
- class属性:
- name属性:如果要正确地被提交,每个输入字段必须设置一个 name 属性。
- action属性:提交表单时执行的动作。如不定义,则设置为当前页面因为页面地址栏中是可见。如果为空,那么就提交给当前的链接地址。
-
method属性:提交表单时所用的 HTTP 方法(GET 或 POST)
-
- get:默认方法,如果表单提交是被动的(比如搜索引擎查询),并且没有敏感信息。最适合少量数据的提交。
- post:POST 的安全性更好,因为在页面地址栏中被提交的数据是不可见的。
- selected属性:标记为选中状态
#First name:
< input type = "text" name = "firstname" >
< input type = "password" name = "password" >
#请注意表单本身是不可见的。
#同时请注意文本字段的默认宽度是 20 个字符。
< input type = "radio" name = "sex" value = "male" checked>Male
< input type = "radio" name = "sex" value = "female" >Female
#请注意如果需要只选其一,那么name一样即可。
< input type = "submit" value = "Submit" > < / form>
-
value默认显示输入框内信息
- target属性:提交表单后在何处显示响应,默认为当前窗口打开
_blank 响应显示在新窗口或选项卡中。
_self 响应显示在当前窗口中。
_parent 响应显示在父框架中。
_top 响应显示在窗口的整个 body 中。
framename 响应显示在命名的 iframe 中。
上传文件:
#HTML写
<form action="" method="post" enctype="multipart/form-data">
<input type="file" name="post_file">
<button>上传</button>
</form>
#后端写
def file_handle(request):
if request.method == "POST":
file_info = request.FILES.get('post_file') #获取上传文件的信息
with open(file_info.name,'wb') as f: #打开文件,没有见创建
for i in file_info.chunks(): #读取内存文件
f.write(i)
其他属性:
属性 | 值 | 描述 |
---|---|---|
accept | MIME_type | HTML 5 中不支持。 |
accept-charset | charset_list | 规定服务器可处理的表单数据字符集。 |
action | URL | 规定当提交表单时向何处发送表单数据。 |
autocomplete |
|
规定是否启用表单的自动完成功能。 |
enctype | 见说明 |
规定在发送表单数据之前如何对其进行编码。 使用文件上传时时,必须使用multipart/form-data
|
method |
|
规定用于发送 form-data 的 HTTP 方法。 |
name | form_name | 规定表单的名称。 |
novalidate | novalidate | 如果使用该属性,则提交表单时不进行验证。 |
rel |
|
规定链接资源和当前文档之间的关系。 |
target |
|
规定在何处打开 action URL。 |
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」
2017-08-31 Python——列表
2017-08-31 Python——字典