HTML表单

HTML表单

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>

posted @ 2022-01-20 21:54 HammerZe 阅读(801) 评论(0) 编辑收藏举报

刷新页面返回顶部

HammerZe'BK

Actions speak louder than words.

HTML表单

HTML表单

form表单

input标签

select标签

进度条标签

textarea标签

案例：前后端交互

注意事项：

案例2：简易表单

公告