一:form表单

1.form表单功能
表单用于向服务器传输数据，从而实现用户与Web服务器的交互

表单能够包含input系列标签，比如文本字段、复选框、单选框、提交按钮等等。

表单还可以包含textarea、select、fieldset和 label标签。

form表单:获取用户的数据并发送给后端(服务端)

eg:网站的登录、注册、验证码等...
属性 描述
accept-charset 规定在被提交表单中使用的字符集（默认：页面字符集）。
action 规定向何处提交表单的地址（URL）（提交页面）。
autocomplete 规定浏览器应该自动完成表单（默认：开启）。
enctype 规定被提交数据的编码（默认：url-encoded）。
method 规定在提交表单时所用的 HTTP 方法（默认：GET）。
name 规定识别表单的名称（对于 DOM 使用：document.forms.name）。
novalidate 规定浏览器不验证表单。
target 规定 action 属性中地址的目标（默认：_self）。
2.表单元素
基本概念：

HTML表单是HTML元素中较为复杂的部分，表单往往和脚本、动态页面、数据处理等功能相结合，因此它是制作动态网站很重要的内容。

表单一般用来收集用户的输入信息

表单工作原理：

访问者在浏览有表单的网页时，可填写必需的信息，然后按某个按钮提交。这些信息通过Internet传送到服务器上。

服务器上专门的程序对这些数据进行处理，如果有错误会返回错误信息，并要求纠正错误。当数据完整无误后，服务器反馈一个输入完成的信息。

二:form表单搭建(注册页面)

  • 简易版注册页面
    <h2>注册页面</h2>

    <form action="">

        <p>   <!--<lable包裹input并绑定id>-->

            <label for="d1">username:</label>

            <!--<用户注册框>-->

            <input type="text" id="d1">

        </p>

        <p>   <!--<用户注册密码>-->

            <label for="d2">password:</label>

            <input type="password" id="d2">

        </p>  <!--<日历展示>-->

        <p>birthday:<input type="date"></p>

1.编写input会出现黄色阴影问题
  • 解决方法
直接编写input会出现黄色阴影，原因在于input需要结合lable一起使用

方式1:lable包裹input并绑定id

   <label for='input标签id值'>input标签</label>

方式2:label与input单独出现并绑定id

<label for="d1">username:</label>

   <input type="text" id="d1">

三:完整版，前端代码(注册页面)

</head>

<body>

    <h2>注册页面</h2>

    <form action="">

        <p>

            <label for="d1">username:</label>

            <input type="text" id="d1">

        </p>

        <p>

            <label for="d2">password:</label>

            <input type="password" id="d2">

        </p>

        <p>birthday:<input type="date"></p>

        <p>

            <input type="radio" name="gender" checked="checked">male

            <input type="radio" name="gender">female

            <input type="radio" name="gender">others

        </p>

        <p>hobby:

            <input type="checkbox" checked>篮球

            <input type="checkbox" checked>足球

            <input type="checkbox" checked>双色球

        </p>

        <p>email:

            <input type="email">

        </p>

        <p>province

            <select name="" id="">

                <option value="">北京</option>

                <option value="">深圳</option>

                <option value="">上海</option>

            </select>

        </p>

        <p>明星

            <select name="" id="">

                <option value="">苍老师</option>

                <option value="">明老师</option>

                <option value="">三上老师</option>

            </select>

        </p>

        <p>info:

            <textarea name="" id="" cols="30" rows="10"></textarea>

        </p>

        <p>file:

            <input type="file">

        </p>

        <p>files:

            <input type="file" multiple>

        </p>

        <p>

            <input type="submit" value="注册">

            <input type="button" value="帮助">

            <input type="reset" value="重置">

        </p>

    </form>

</body>

</html>

四:type属性介绍

  • 获取用户数据最为常用的标签就是input标签并且该标签是行内标签
1.input(type属性)
<input> 元素会根据不同的 type 属性，变化为多种形态。

通过type参数的不同变换不同的表现形式
type属性 表现形式
text 普通文本
password 密码展示
date 日历展示
radio 单选>>>:多个选项标签需要有相同的name属性才能(单选)
checked='checked' （默认选中）需要额外配置checked='checked'
当属性名与属性值相等的时候可以简写checked
checkbox 多选>>>:默认选中也是checked属性
email 邮箱格式
file 上传文件>>>:默认只支持单个文件 如果需要一次性上传多个需要额外配置 multiple
select 标签是下拉框选项单选(地址) 一个个选项就是一个个option标签 默认是单选也可以变为多选
multiple 下拉框多选
textarea 标签个人简介(多行文本 )获取大段文本内容
submit 提交按钮>>>:点击出发提交数据的动作(注册) (按钮组的提示信息可以通过value属性自定义，
如果不自定义那么不同的浏览器可能会展示出不同的提示信息 尤其是submit按钮)
button 普通按钮>>>:本身没有任何功能 需要绑定(JS) (按钮组的提示信息可以通过value属性自定义，
如果不自定义那么不同的浏览器可能会展示出不同的提示信息 尤其是submit按钮)
reset 重置按钮 (按钮组的提示信息可以通过value属性自定义，
如果不自定义那么不同的浏览器可能会展示出不同的提示信息 尤其是submit按钮)

五:form表单提交数据

  • 方法1
数据的提交地址由form表单的action参数来控制

action="URL"

不写默认朝当前页面所在的地址提交
  • 方法2
method="数据的提交方式"

数据的提交方式有很多种 这里先忽略(后续框架更新)

get post put delete patch...
  • 方法3
form表单在提交数据的时候 如果含文件则需要指定两个固定参数

method='post'

enctype="multipart/form-data"

六:前后端交互

  • 只看效果即可
  • 后端框架TCP服务端
以flask框架为例>>>:第三方框架 pip3 install flask
1.搭建简易版服务端
from flask import Flask,request

app = Flask(__name__)

@app.route('/index/', methods=['GET', 'POST'])

def index():

    print(request.form)

    print(request.form)

    return 'flask框架真简单'

app.run()
2.前端设置(提交数据网址参数)
    form表单在提交数据的时候 如果含文件则需要指定两个固定参数

    method='post'

    <form action="http://127.0.0.1:5000/index/" method="post">

3.网址测试

4.服务端(后端)
测试服务器接收客户端数据，不显示用户数据

5.服务端不显示客户端数据原因
1.前端通过标签获取用户数据发送给后端的过程中 标签需要有name属性

相当于字典的key

2.用户输入的数据会存储到标签的value属性中 相当于字典的value

如果是选择型标签需要自行加上name和value 才能将用户数据发送到后端

七:完整版 前后端交互

  • 服务端
from flask import Flask,request

app = Flask(__name__)

@app.route('/index/',methods=['GET','POST'])

def index():

    print(request.form)  # 获取普通数据

    print(request.files)  # 获取文件数据

    file_obj = request.files.get('file')  # 获取文件对象

    file_obj.save('xxx.md')  # 保存文件

    return 'flask框架真简单'

app.run()
1.前端解决方法
前端用户输入的数据会存储到标签的value属性中

相当于字典的value如果是选择型标签需要自行加上name和value

k:v键值对 才能将用户数据发送到后端

2.form如果包含文件则需要指定两个固定参数

enctype="multipart/form-data"

  • 前端
</head>

<body>

    <h2>注册页面</h2>

    <form action="http://127.0.0.1:5000/index/" method="post" enctype="multipart/form-data">

        <p>

            <label for="d1">username:</label>

            <input type="text" id="d1" name="name">

        </p>

        <p>

            <label for="d2">password:</label>

            <input type="password" id="d2" name="pwd">

        </p>

        <p>birthday:<input type="date" name="birth"></p>

        <p>

            <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 value="basketball">篮球

            <input type="checkbox" checked value="football">足球

            <input type="checkbox" checked value="doublecolorball">双色球

        </p>

        <p>email:

            <input type="email" name="meail">

        </p>

        <p>province

            <select name="全国地址" id="">

                <option value="bj">北京</option>

                <option value="sz">深圳</option>

                <option value="sh">上海</option>

            </select>

        </p>

        <p>明星

            <select name="明星" id="">

                <option value="cang">苍老师</option>

                <option value="ming">明老师</option>

                <option value="sanshang">三上老师</option>

            </select>

        </p>

        <p>info:

            <textarea name="简介" id="" cols="30" rows="10"></textarea>

        </p>

        <p>file:

            <input type="file" name="files">

        </p>

        <p>files:

            <input type="file" multiple name="files">

        </p>

        <p>

            <input type="submit" value="注册">

            <input type="button" value="帮助">

            <input type="reset" value="重置">

        </p>

    </form>

</body>

</html>
2.网址注册测试(前后端交互测试)

前端HTML基础之form表单的更多相关文章

  1. 前端基础：form表单提交

    今天介绍下form表单提交经常用到的表单元素. 1:datalist元素,一般与input组建配合使用,以定义可能输入的值,例如: <!DOCTYPE html> <html lan ...

  2. [php基础]PHP Form表单验证:PHP form validator使用说明

    在PHP网站开发建设中,用户注册.留言是必不可少的功能,用户提交的信息数据都是通过Form表单提交,为了保证数据的完整性.安全性,PHP Form表单验证是过滤数据的首要环节,PHP对表单提交数据的验 ...

  3. Django基础之Form表单验证

    Form表单验证 1.创建Form类(本质就是正则表达式的集合) from django.forms import Form from django.forms import fields from ...

  4. Unit 2.前端之html--table(表格),form(表单)标签

    一.table标签 作用:定义html表格.一个table标签元素至少包含 thead(表头),tbody(表主题),还可以有tfoot(表底部) html表格游table元素及一个或者多个tr,th ...

  5. 用layui前端框架弹出form表单以及提交

    第一步:引用两个文件 第二步:点击删除按钮弹出提示框 /*删除开始*/ $(".del").click(function () { var id = $(this).attr(&q ...

  6. web前端框架之自定义form表单验证

    自定义form验证初试 .在后端创建一个类MainForm,并且在类中自定义host ip port phone等,然后写入方法,在post方法中创建MainForm对象,并且把post方法中的sel ...

  7. Django基础之form表单

    1. form介绍 我们之前在HTML页面中利用form表单向后端提交数据时,都会写一些获取用户输入的标签并且用form标签把它们包起来. 与此同时, 我们在好多场景下都需要对用户的输入做校验, 比如 ...

  8. HTML基础之三(form表单)

    .表单form 单是一个包含表单元素的区域. 表单能够包含 input 元素,textarea.select.fieldset.legend 和 label 元素. 表单使用标签(<form&g ...

  9. Django基础之form表单的补充进阶

    1. 应用Bootstrap样式 <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

随机推荐

  1. 【LeetCode】146. LRU Cache 解题报告（Python）

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 字典+双向链表 日期 题目地址:https://le ...

  2. '2'>'10'==true? JS是如何进行隐式类型转换的？

    前言 '2'>'10'返回的true,可能很多人都不是很能理解吧? 在js中,当运算符在运算时,如果两边数据不统一,CPU就无法计算,这时我们编译器会自动将运算符两边的数据做一个数据类型转换,转 ...

  3. 人脸搜索项目开源了：人脸识别(M:N)-Java版

    ​ 一.人脸检测相关概念 人脸检测(Face Detection)是检测出图像中人脸所在位置的一项技术,是人脸智能分析应用的核心组成部分,也是最基础的部分.人脸检测方法现在多种多样,常用的技术或工具大 ...

  4. Web 网站进化

    01-初始阶段   应用程序.数据库.文件等所有资源都在一台服务器上 02-应用服务与数据服务分离 应用服务器 要处理大量的业务逻辑,所以需要更好更快更强大的 CPU 数据库服务器 需要快速的进行磁盘 ...

  5. Chapter 9 Measurement Bias

    目录 9.1 Measurement Error The structure of measurement error 9.3 Mismeasured confounders 9.4 Intentio ...

  6. The Expressive Power of Neural Networks: A View from the Width

    目录 概 主要内容 定理1 定理2 定理3 定理4 定理1的证明 Lu Z, Pu H, Wang F, et al. The expressive power of neural networks: ...

  7. windows环境下node安装教程(超详细)

    安装node.js 1.下载node: 下载地址:http://nodejs.cn/download/ node.js的zip包安装时是直接解压缩后就可以了, node.js的msi包是傻瓜式一路ne ...

  8. mysql+heartbeat+drbd安装

    环境: 系统           IP地址            主机名             软件包列表 centos6.5  192.168.200.101      server1       ...

  9. Autosys 快速参考

    Autosys Quick Reference Introduction to Autosys: AutoSys is an automated job control system for sche ...

  10. kubernetes (k8s) CKA认证之第二课：亲和性与 Pod 的调度

    手动调度一个 pod // cat manual-schedule.yaml apiVersion: v1 kind: Pod metadata: labels: run: pod-manual-sc ...