您的位置：首页 > Web前端 > HTML

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
email 邮箱格式
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:&nbsp;&nbsp;<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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航