前端HTML基础之form表单

一:form表单
- 1.form表单功能
- 2.表单元素
二:form表单搭建(注册页面)
- 1.编写input会出现黄色阴影问题
三:完整版，前端代码(注册页面)
四:type属性介绍
- 1.input(type属性)
五:form表单提交数据
六:前后端交互
七:完整版前后端交互
- 1.前端解决方法
- 2.网址注册测试(前后端交互测试)

一: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表单的更多相关文章

前端基础：form表单提交
今天介绍下form表单提交经常用到的表单元素. 1:datalist元素,一般与input组建配合使用,以定义可能输入的值,例如: <!DOCTYPE html> <html lan ...
[php基础]PHP Form表单验证:PHP form validator使用说明
在PHP网站开发建设中,用户注册.留言是必不可少的功能,用户提交的信息数据都是通过Form表单提交,为了保证数据的完整性.安全性,PHP Form表单验证是过滤数据的首要环节,PHP对表单提交数据的验 ...
Django基础之Form表单验证
Form表单验证 1.创建Form类(本质就是正则表达式的集合) from django.forms import Form from django.forms import fields from ...
Unit 2.前端之html--table(表格),form(表单)标签
一.table标签作用:定义html表格.一个table标签元素至少包含 thead(表头),tbody(表主题),还可以有tfoot(表底部) html表格游table元素及一个或者多个tr,th ...
用layui前端框架弹出form表单以及提交
第一步:引用两个文件第二步:点击删除按钮弹出提示框 /*删除开始*/ $(".del").click(function () { var id = $(this).attr(&q ...
web前端框架之自定义form表单验证
自定义form验证初试 .在后端创建一个类MainForm,并且在类中自定义host ip port phone等,然后写入方法,在post方法中创建MainForm对象,并且把post方法中的sel ...
Django基础之form表单
1. form介绍我们之前在HTML页面中利用form表单向后端提交数据时,都会写一些获取用户输入的标签并且用form标签把它们包起来. 与此同时, 我们在好多场景下都需要对用户的输入做校验, 比如 ...
HTML基础之三(form表单)
.表单form 单是一个包含表单元素的区域. 表单能够包含 input 元素,textarea.select.fieldset.legend 和 label 元素. 表单使用标签(<form&g ...
Django基础之form表单的补充进阶
1. 应用Bootstrap样式 <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

随机推荐

【LeetCode】680. Valid Palindrome II 验证回文字符串 Ⅱ（Python）
作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录题目描述题目大意解题方法双指针思路来源初版方案进阶方案日期题目地址 ...
【LeetCode】795. Number of Subarrays with Bounded Maximum 解题报告（Python & C++）
作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录题目描述题目大意解题方法动态规划暴力搜索+剪枝线性遍历日期题目地址: ...
教学日志：javaSE-java中的数据类型和运算符
一.java中的标识符 /* 标识符的命名规范: 硬性要求: 1.必须以字母._下划线.美元符$开头 2.其它部分可以是字母.下划线"_".美元符"$"和数字的 ...
idea使用教程-安装
[1]将安装包进行解压-->选择固态盘符 [2]发送到桌面快捷方式,生成一个快捷方式 [3]打开: 选择主题: 先进入再说,免费试用: 创建一个项目: 选择JDK: 找到jetbrains-ag ...
【C++】关键字回忆leetcode题解
20200515 前缀和 no.560 20200518 动态规划 no.152 20200520 状态压缩 no.1371 20200521 中心扩散 no.5 20200523 滑动窗口 no.7 ...
Counterfactual VQA: A Cause-Effect Look at Language Bias
目录概主要内容实现代码 Niu Y., Tang K., Zhang H., Lu Z., Hua X. and Wen J. Counterfactual VQA: A Cause-Effe ...
BP网络简单实现
目录 BP算法的简单实现 Linear 全连接层 ReLu MSELoss 交叉熵损失函数 BP算法的简单实现 """ BPnet 简易实现约定输入数据维度为(N, i ...
制作四个选项卡页 Tab，用户可以通过切换不同的 Tab 页查看不同类别的新闻信息，每个 Tab 有对应的内容版块，点击某个选项卡时，显示对应的内容版块，隐藏其他内容版块，并且为了突出当前的选项卡，还
查看本章节查看作业目录需求说明: 制作四个选项卡页 Tab,用户可以通过切换不同的 Tab 页查看不同类别的新闻信息,每个 Tab 有对应的内容版块,点击某个选项卡时,显示对应的内容版块,隐藏其他 ...
编写Java程序，实现控制台版的省市联动
返回本章节返回作业目录需求说明: 系统显示用户所有直辖市的名称,用户在控制台输入直辖市的名称,即可在控制台中显示该直辖市所管辖的所有区的名称. 实现思路: 创建省市联动类ProvincialLin ...
AP原理与最终一致性强一致性弱一致性
转载自:http://www.blogjava.net/hello-yun/archive/2012/04/27/376744.html https://blog.csdn.net/c28905453 ...

前端HTML基础之form表单

一:form表单

1.form表单功能

2.表单元素

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

1.编写input会出现黄色阴影问题

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

四:type属性介绍

1.input(type属性)

五:form表单提交数据

六:前后端交互

1.搭建简易版服务端

2.前端设置(提交数据网址参数)

3.网址测试

4.服务端(后端)

5.服务端不显示客户端数据原因

七:完整版 前后端交互

1.前端解决方法

2.网址注册测试(前后端交互测试)

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

随机推荐

热门专题

七:完整版前后端交互