HTML表单
2022-01-20 21:54
1316 查看
[toc]
HTML表单
HTML表单是用户和web站点或应用程序之间交互的主要内容之一。它们允许用户将数据发送到web站点。大多数情况下,数据被发送到web服务器,但是web页面也可以自己拦截它并使用它;
HTML表单是由一个或多个小部件组成的。这些小部件可以是文本字段(单行或多行)、选择框、按钮、复选框或单选按钮;
HTML表单和常规HTML文档的主要区别在于,大多数情况下,表单收集的数据被发送到web服务器;
form表单
所有的HTML表单都是以一个
<form>标签开始的;
- form表单:获取用户的数据并发送给后端(服务端)
<form></form>
标签
<form action="/my-handling-form-page" method="post"> </form>
这个元素正式定义了一个表单,就像
<div>和
<p>标签,它是一个容器元素,但它也支持一些特定的属性来配置表单的行为方式。它的所有属性都是可选的,但实践中最好至少要设置
action属性和
method属性。
action
属性定义了在提交表单时,应该把所收集的数据送给谁(地址)(URL)去处理,.action="URL"method
属性定义了发送数据的HTTP方法(它可以是“get”或“post”),method="数据的提交方式"- 提交方式:get post put delete patch
input标签
获取用户数据最为常用的标签就是
<input>标签并且该标签是行内标签;
- 直接编写
input
标签会出现黄色阴影,原因在于input
需要结合lable
标签一起使用;
方式1:lable包裹input并绑定id <label for='input标签id值'>input标签</label> <!--案例--> <p> <label for="d1">name: <input type="text" id="d1"> </label> </p> 方式2:label与input单独出现并绑定id <label for="d1">username:</label> <input type="text" id="d1"> <!--案例--> <p> <label for="d1">name:</label> <input type="text" id="d1"> </p>
input
标签通过type
指定不同的参数来修改表现形式(变形金刚)
type指定的参数
参数 | 说明 |
---|---|
text | 普通文本 |
password | 密文密码 |
date | 日历展示 |
radio | 单选 -> 多个选项标签需要有相同的name属性 默认选中需要额外配置checked='checked' 当属性名与属性值相等的时候可以简写checked |
checkbox | 多选,相当于复选框,默认选中参数也是checked |
邮箱格式 | |
file | 上传文件(单个) |
file 添加multiple参数 |
上传多个文件 |
submit | 提交按钮 |
button | 普通按钮(本身没有任何功能,需要绑定js) |
reset | 重置按钮 |
按钮组的提示信息可以通过value属性自定义,如果不自定义那么不同的浏览器可能会展示出不同的提示信息,尤其是submit按钮
select标签
下拉框
<!--select下拉框,默认单选,多选需要指定参数multiple--> <select name="province" id="" > <option value="北京">Beijing</option> <option value="上海">Shanghai</option> <option value="天津">Tianjin</option> </select>
进度条标签
<progress max="100" value="30">30/100</progress>
textarea标签
文本框
<p>textbox: <!-- 文本框 --> <textarea name="info" cols="30" rows="10"></textarea> </p>
案例:前后端交互
flask框架写后端,可以用过后端框架来达到TCP服务端的目的
from flask import Flask,request app = Flask(__name__) @app.route('/index/',methods=['GET','POST']) def index(): print(request.form) # 获取普通数据 print(request.files) # 获取文件数据 # print(request.form.get('name')) file_obj = request.files.get('file') # 获取文件对象 file_obj.save('xxx.md') # 保存文件 return '提交成功' app.run()
HTML表单写提交数据
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h2>信息页面</h2> <!--表单--> <form action="http://127.0.0.1:5000/index/" method="post" enctype="multipart/form-data"> <!--利用块级标签分行显示 --> <!--lable绑定id--> <p> <label for="d1">name:</label> <input type="text" id="d1" name="name"> </p> <!-- 密文密码 --> <!-- lable标签包裹input --> <p><label>pwd: <input type="password" name="pwd"></label></p> <p><label>birthday:<input type="date" name="data"></label></p> <!--性别单选框--> <p>gender <!--如果想要实现单选的功能,name指定同一个参数 --> <!--checked默认选中,参数名和参数值相同可以简写为checked--> <input type="radio" name="gender" checked="checked" value="男">male <input type="radio" name="gender" value="女">female <input type="radio" name="gender" value="其他">others </p> <!--爱好--> <p>hobby: <!-- 复选框 --> <input type="checkbox" checked="checked" name="hobby" value="篮球">baskball <input type="checkbox" name="hobby" value="足球" >football <input type="checkbox" name="hobby" value="乒乓">pingpang <p>others hobby:<input type="text" name="hobby" value="其他爱好"><p> <p>email:<input type="email" name="email" value="please input Email"></p> </p> <p>province: <!--select下拉框,默认单选,多选需要指定参数multiple--> <select name="province" id="" > <option value="北京">Beijing</option> <option value="上海">Shanghai</option> <option value="天津">Tianjin</option> </select></p> <p>idol: <!--多选multiple--> <select name="idol" id="" multiple> <option value="dzj">邓紫棋</option> <option value="zjl">周杰伦</option> <option value="cyx">陈奕迅</option> </select> </p> <p>textbox: <!-- 文本框 --> <textarea name="info" id="" cols="30" rows="10"></textarea> </p> <p>File: <!--上传单个文件--> <input type="file" name="file"> </p> <p>MultFile: <!--上传多个文件,文件夹不可以--> <input type="file" multiple name="files"> </p> <p> <!-- 按钮组 --> <!-- 添加value可以指定字段,不添加value参数自动渲染系统默认的字段 --> <input type="submit" value="注册" > <input type="button" value="返回"> <input type="reset" value="重置"> </p> </form> </body> </html>
注意事项:
前端通过标签获取用户数据发送给后端的过程中 标签需要有name属性,相当于字典的key;
用户输入的数据会存储到标签的value属性中,相当于字典的value;
如果是选择型标签需要自行加上name和value;
数据的提交地址由
form
表单的action
参数来控制action="URL" # 不写默认朝当前页面所在的地址提交 method="数据的提交方式" 方式:get post put delete patch
form表单在提交数据的时候,如果含文件则需要指定两个固定参数:
method='post' enctype="multipart/form-data"
案例2:简易表单
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Hammer</title> <style> form { /* 居中表单 */ margin: 0 auto; width: 400px; /* 显示表单的轮廓 */ padding: 1em; border: 1px solid #af2c2c; border-radius: 1em; } ul { list-style: none; padding: 0; margin: 0; } form li + li { margin-top: 1em; } label { /* 确保所有label大小相同并正确对齐 */ display: inline-block; width: 90px; text-align: right; } input, textarea { /* 确保所有文本输入框字体相同 textarea默认是等宽字体 */ font: 1em sans-serif; /* 使所有文本输入框大小相同 */ width: 300px; box-sizing: border-box; /* 调整文本输入框的边框样式 */ border: 1px solid #999; } input:focus, textarea:focus { /* 给激活的元素一点高亮效果 */ border-color: #000; } textarea { /* 使多行文本输入框和它们的label正确对齐 */ vertical-align: top; /* 给文本留下足够的空间 */ height: 5em; } .button { /* 把按钮放到和文本输入框一样的位置 */ padding-left: 90px; /* 和label的大小一样 */ } button { /* 这个外边距的大小与label和文本输入框之间的间距差不多 */ margin-left: .5em; } </style> </head> <body> <form action="/my-handling-form-page" method="post"> <div> <label for="name">Name:</label> <input type="text" id="name" name="user_name"> </div> <div> <label for="mail">E-mail:</label> <input type="email" id="mail" name="user_email"> </div> <div> <label for="msg">Message:</label> <textarea id="msg" name="user_message"></textarea> </div> <div class="button"> <button type="submit">Send your message</button> </div> <div> <!-- <textarea>by default this element is filled with this text</textarea>--> </div> </form> </body> </html>
相关文章推荐
- HTML之表单标签
- 【html学习之】表单customer示例
- HTML 表单和输入
- HTML 文件类表单元素如何限制上传类型,Accept属性设置
- Html: 表单、文本域、单选按钮
- html中的单选按钮radio如何实现可同时选中多个值进行表单提交
- HTML表单和组件
- HTML之表单的使用
- jquery给表单、html中的元素赋值
- html制作表单
- HTML实例--列表、表单
- HTML同一个table中不同的按钮提交不同表单
- html学习教程4之表单
- html表单提交的几种方法
- 一个简单的HTML表单及JavaScript验证
- html中button标签reset用法 -- 重置表单中填写的内容
- 懒癌患者的学习记录之HTML表单
- HTML表格及应用、表单域(5)
- 利用js和html实现表单操作(onsubmit、onclick、submit等方法的异同)
- HTTP协议与HTML表单(再谈GET与POST的区别)