整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

前端数据提交给后端之HTML表单简单剖析

在开篇

什么是表单呢?当前端想要提交数据给后端,怎么搞?那么在前端开发中,表单是常用的手段,比如常见的场景有:登录框、账号注册页、主机信息录入CMDB等等场景都是需要表单。那么在本篇中,笔者除了讲一些基本的知识点,还会再结合后端的方式来演示如何接收表单提交的数据。希望这些小小的演示可以起到抛砖引玉的效果。

盘点HTML表单基础

1. from元素

构建表单,主要是通过from元素,我们先来一个最简单的小栗子,看下面代码:

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>彩虹运维技术栈社区主页</title>
    </head>
    <body>
        <h2>彩虹运维技术栈社区,公众号ID:TtrOpsStack</h2>
        <h3>主机信息录入CMDB</h3>
        <form>
            <label for="hostname">主机名:</label><br>
            <input type="text" id="hostname" name="hostname"><br>
            <label for="ipaddr">IP地址:</label><br>
            <input type="text" id="ipaddr" name="ipaddr"><br>
            <input type="submit" value="提交">
        </form>
    </body>
</html>

效果如下图:

通上面的小栗子可以知道,form表单的主要通途是用于收集用户的输入。在from表单里面,还包含着各种不同类型的input元素,比如我们上面小栗子中用到的文本(text)、提交按钮(submit)。

input元素是表单里最重要的元素,它有很多type属性,下面我们来总结下:

类型描述text文本输入radio单选按钮checkbox提交按钮submit提交按钮button可单击按钮

在上面小栗子中,除了input元素之外,不知道大家注意label元素没有。label元素的主要用途是为input元素定义标签,且用for属性和input元素的id属性进行绑定呢。

2. 单选按钮

什么是单选按钮?就是在多个选项中,你只能选其中1个,不能多选。下面我们看个小栗子,看下面代码:

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>彩虹运维技术栈社区主页</title>
    </head>
    <body>
        <h2>彩虹运维技术栈社区,公众号ID:TtrOpsStack</h2>
        <h3>问答题1(单选):某站长,工作经验不足1年,仅从互联网收集学习资料制定学习路线售卖盈利,从道德层面角度分析是否有问题?</h3>
        <form>
            <input type="radio" id="i1" name="problem" value="yes">
            <label for="i1">有</label>
            <input type="radio" id="i2" name="problem" value="no">
            <label for="i2">没有</label>
            <input type="radio" id="i3" name="problem" value="not_clear">
            <label for="i3">不清楚</label>
        </form>
        <h3>问答题2(单选):实际工作经验不足1年的人员折腾的学习资料您觉得是否对你有帮助?</h3>
        <form>
            <input type="radio" id="w1" name="problem" value="yes">
            <label for="w1">有</label>
            <input type="radio" id="w2" name="problem" value="no">
            <label for="w2">没有</label>
            <input type="radio" id="w3" name="problem" value="not_clear">
            <label for="w3">不清楚</label>
        </form>
    </body>
</html>

效果如下图:

上面的小栗子中,出了两道问答题,均为单选题。那么,类似的需求都是可以使用输入类型为radio来实现需要使用单选按钮的场景。

3. 复选框

什么是复选框?复选框就是可以选择多个选项,当需要多选的时候,使用复选框输入类型就对了。看下面代码:

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>彩虹运维技术栈社区主页</title>
    </head>
    <body>
        <h2>彩虹运维技术栈社区,公众号ID:TtrOpsStack</h2>
        <h3>问答题1(单选):某站长,工作经验不足1年,仅从互联网收集学习资料制定学习路线售卖盈利,从道德层面角度分析是否有问题?</h3>
        <form>
            <input type="checkbox" id="i1" name="problem" value="yes">
            <label for="i1">有</label>
            <input type="checkbox" id="i2" name="problem" value="no">
            <label for="i2">没有</label>
            <input type="checkbox" id="i3" name="problem" value="not_clear">
            <label for="i3">不清楚</label><br>
            <input type="submit" value="提交">
        </form>
        <h3>问答题2(单选):实际工作经验不足1年的人员折腾的学习资料您觉得是否对你有帮助?</h3>
        <form>
            <input type="checkbox" id="w1" name="problem" value="yes">
            <label for="w1">有</label>
            <input type="checkbox" id="w2" name="problem" value="no">
            <label for="w2">没有</label>
            <input type="checkbox" id="w3" name="problem" value="not_clear">
            <label for="w3">不清楚</label><br>
            <input type="submit" value="提交">
        </form>
    </body>
</html>

效果如下图:

上面的小栗子中,实现复选框的输入类型是checkbox,这个是重点哦!

4. 提交按钮

当有数据要提交给后端的时候怎么搞?如果后端是API服务,可以给它提交json。如果是前端页面,就需要通过构建表单来获取用户的输入。基于表单提交数据给后端,怎么提交?需要一个可以点击的提交按钮,那这个按钮怎么来?先看下面代码:

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>彩虹运维技术栈社区主页</title>
    </head>
    <body>
        <h2>彩虹运维技术栈社区,公众号ID:TtrOpsStack</h2>
        <h3>主机信息</h3>
        <form>
            <label for="ipaddr">IP地址</label>
            <input type="text" id="ipaddr" name="ip"><br>
            <input type="submit" value="提交">
        </form>
    </body>
</html>

效果如下图:

输入类型为submit,说明它就是提交按钮,注意上面代码type="submit"了吗?

HTML表单重要属性

1. Action属性

在之前的例子中,前端表单需要将数据提交给后端,除了需要一个提交按钮外,还需要action属性。当点击提交按钮后,表单的数据该发到后端的哪个url进行处理,就是定义在action属性中。接下来,我们结合前端和后端直接来个小实战,后端代码用Python的Flask框架。

前端代码:

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>彩虹运维技术栈社区主页</title>
    </head>
    <body>
        <h2>彩虹运维技术栈社区,公众号ID:TtrOpsStack</h2>
        <h3>主机信息</h3>
        <form action="http://192.168.11.10:8088/ttropsstack" target="_blank">
            <label for="ipaddr">IP地址</label>
            <input type="text" id="ipaddr" name="ip"><br>
            <input type="submit" value="提交">
        </form>
    </body>
</html>

后端代码:

from flask import Flask, request

webapp = Flask(__name__)

@webapp.route('/ttropsstack', methods=["GET", "POST"])
def ttropsstack():
    args = request.args
    print 'ip addr is: %s' % args.get('ip')
    return 'ok'

if __name__ == '__main__':

    webapp.run(host="0.0.0.0", port=8088, debug=True)

前端和后端的代码写完后,我们接下来看看效果

输入IP地址后,点击提交

这个ok是后端返回的

后端接收到数据后,啥也没做,只是做了简单打印

这个小栗子很简单,通过这个小栗子,是不是对action属性的用法有了进一步的理解呢?

2. Method属性

method属性的用途是指定提交数据的http方法,通常有2个,get和post。接下来我们在上个小栗子的基础上做个小改造,看下面代码

前端代码:

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>彩虹运维技术栈社区主页</title>
    </head>
    <body>
        <h2>彩虹运维技术栈社区,公众号ID:TtrOpsStack</h2>
        <h3>主机信息</h3>
        <form action="http://192.168.11.10:8088/ttropsstack" target="_blank" method="get">
            <label for="ipaddr">IP地址</label>
            <input type="text" id="ipaddr" name="ip"><br>
            <input type="submit" value="提交">
        </form>
    </body>
</html>

后端代码:

from flask import Flask, request

webapp = Flask(__name__)

@webapp.route('/ttropsstack', methods=["POST"])
def ttropsstack():
    args = request.args
    print 'ip addr is: %s' % args.get('ip')
    return 'ok'

if __name__ == '__main__':

    webapp.run(host="0.0.0.0", port=8088, debug=True)

当前端输入数据后,提交表单时,直接告诉你这是不允许的方法

在这个例子中,是因为前端的表单了指定了method为get请求,而后端接收数据的method规定了需要post请求,故所以出现这个问题。

下面我们改造一下后端代码:

# coding: utf8
from flask import Flask, request

webapp = Flask(__name__)

@webapp.route('/ttropsstack', methods=['GET','POST'])
def ttropsstack():
    if request.method == 'POST':
        print request.get_data(as_text=True)
        return 'ok'
    else:
        return '提交数据需要post请求'

if __name__ == '__main__':

    webapp.run(host="0.0.0.0", port=8088, debug=True)

前端表单中的method还是保持get请求,再次提交,后端的返回如下:

看到了吗?后端判断前端过来的请求是get还是post,很显然,前端过来的请求是get,并且返回了非常友好的提示。

接下来我们继续改造一下前端的代码,将请求修改为post,代码如下:

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>彩虹运维技术栈社区主页</title>
    </head>
    <body>
        <h2>彩虹运维技术栈社区,公众号ID:TtrOpsStack</h2>
        <h3>主机信息</h3>
        <form action="http://192.168.11.10:8088/ttropsstack" target="_blank" method="post">
            <label for="ipaddr">IP地址</label>
            <input type="text" id="ipaddr" name="ip"><br>
            <input type="submit" value="提交">
        </form>
    </body>
</html>

后端代码也稍微改造一下,改变接收前端数据的方法

# coding: utf8
from flask import Flask, request

webapp = Flask(__name__)

@webapp.route('/ttropsstack', methods=['GET','POST'])
def ttropsstack():
    if request.method == 'POST':
        a = request.form
        print a.get('ip')
        print type(a)
        return 'ok'
    else:
        return '提交数据需要post请求'

if __name__ == '__main__':

    webapp.run(host="0.0.0.0", port=8088, debug=True)

输入IP地址,并点击提交

提交后,后端给前端返回了ok

接下来看下后端,后端啥也没做,就获取到表单的数据,然后打印了数据,并且打印了下数据类型

好了,关于前端的action属性和Method属性就讲到这里了。为了讲解action和method,还结合了后端的一丢丢知识,前端和后端的知识点以后都会慢慢讲到哈!

HTML表单常用元素

1. 下拉列表

先来个前端代码:

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>彩虹运维技术栈社区主页</title>
    </head>
    <body>
        <h2>彩虹运维技术栈社区,公众号ID:TtrOpsStack</h2>
        <form action="http://192.168.11.10:8088/ttropsstack" target="_blank" method="post">
            <label for="opslist">运维开发应掌握的技能:</label>
            <select id="opslist" name="opslist">
                <option value="python">Python语言</option>
                <option value="go">Go语言</option>
                <option value="shell">Shell语言</option>
                <option value="database">数据库</option>
                <option value="frontend">前端</option>
                <option value="linux">Linux</option>
                <option value="network">网络</option>
                <option value="storage">存储</option>
            </select>
            <input type="submit">
        </form>
    </body>
</html>

后端代码:

# coding: utf8
from flask import Flask, request

webapp = Flask(__name__)

@webapp.route('/ttropsstack', methods=['GET','POST'])
def ttropsstack():
    if request.method == 'POST':
        a = request.form
        print a.get('opslist')
        return 'ok'
    else:
        return '提交数据需要post请求'

if __name__ == '__main__':

    webapp.run(host="0.0.0.0", port=8088, debug=True)

在下拉框中选择“Go语言”,并提交

后端啥也没干,就只做了打印

2. 允许多选

前端代码:

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>彩虹运维技术栈社区主页</title>
    </head>
    <body>
        <h2>彩虹运维技术栈社区,公众号ID:TtrOpsStack</h2>
        <form action="http://192.168.11.10:8088/ttropsstack" target="_blank" method="post">
            <label for="opslist">运维开发应掌握的技能:</label>
            <select id="opslist" name="opslist" size="6" multiple>
                <option value="python">Python语言</option>
                <option value="go">Go语言</option>
                <option value="shell">Shell语言</option>
                <option value="database">数据库</option>
                <option value="frontend">前端</option>
                <option value="linux">Linux</option>
                <option value="network">网络</option>
                <option value="storage">存储</option>
            </select>
            <input type="submit">
        </form>
    </body>
</html>

上述前端代码中,是使用multiple属性来实现选择多个值。

后端代码的打印方式稍微做了些许调整:

# coding: utf8
from flask import Flask, request

webapp = Flask(__name__)

@webapp.route('/ttropsstack', methods=['GET','POST'])
def ttropsstack():
    if request.method == 'POST':
        data = request.get_data()
        print data
        return 'ok'
    else:
        return '提交数据需要post请求'

if __name__ == '__main__':

    webapp.run(host="0.0.0.0", port=8088, debug=True)

按住ctrl或者shift键可进行多选

后端打印的效果图下图:

写在最后

关于表单基础知识点的讲解就这么愉快的结束了,关于更多表单的元素、输入属性、输入类型可自行查阅和实战,笔者因时间有限就不一一演示。感谢您的阅读,望多多关注我们、点赞、转发!

本文转载于(喜欢的盆友关注我们):https://mp.weixin.qq.com/s/L-Msv39JrF7AzRx4K1OLjA

行一行的吸引人

表单呀表单

W3C标准

World Wide WebConsortium(万维网联盟)

成立于1994.web技术领域,最具权威和影响力的国际中立性技术标准机构

http://www.w3.org/

http://www.chinaw3c.org/

W3C标准包括

结构化标准语言(HTML,XHTML,XML)

表现标准语言(CSS)

行为标准(DOM,ECMAScript)

编辑工具

>记事本

>Dreamweaver

>WebStorm (企业主流)

基本结构

<!doctype html><!--声明规范-->

<html>

<head>

<title>标题标签</title>

<meta charset="utf-8"><!--编码方式-->

网页头部

</head>

<body>

网页主体

显示的网页主题内容

</body>

</html>

===========================================================

网页的基本标签

>标题标签

<h1>一级标签</h1><!--一级标签网页中出现一次-->

<h2>二级标签</h2>

<h3>三级标签</h3>

<h4>四级标签</h4>

<h5>五级标签</h5>

<h6>六级标签</h6>

>段落标签

<p></p>

>换行标签

<br/><!--注意是单标签-->

>水平线标签

<hr/>

>字体样式标签

<strong>字体加粗</strong>

<em>斜体</em>

>注释以及特殊代码

<!--注释-->

空格 &nbsp

大于号 &gt

小于号 &lt

引号 &quot

版权符号 &copy

>图像标签

常见的图像格式:JPG GIF PNG BMP

<img src="path图像地址" alt="图像代替的文字" title="鼠标悬停提示文字" width="图像宽度" height="图像高度"/>

>超链接标签

<a href="path" target="_self ^ _blank">连接文本或头像</a>

>锚链接标签

实现由甲位置跳转到乙位置

<a name="marker标签名">乙位置</a>

<a hreaf="#marker指定的标签>甲位置</a>

>功能性链接

<a href="mailto:324289335@QQ.com">联系我们</a>

===========================================================

行内元素和块元素

行内元素 排在一行

块元素 独占一行<p></p> <h1></h1>

===========================================================

列表

>有序列表

<ul>

<li></li>

<li></li>

<li></li>

</ul>

>无序列表

<ul>

<li></li>

<li></li>

<li></li>

</ul>

>定义列表

<dl>

<dt></dt>

<dd></dd>

<dd></dd>

<dt></dt>

<dd></dd>

<dd></dd>

</dl>

===========================================================

表格

特点

简单通用

结构稳定

基本结构

单元格

<table border="宽度">

<tr><!--行-->

<th colspan="3"></th><!--colspan属性是单元格跨列标题单元格字体加粗-->

</tr>

<tr>

<td rowspan="2"></td><!--rowspan属性是单元格跨行-->

<td></td><!--列-->

<td></td>

</tr>

<tr><!--行-->

<td></td><!--列-->

<td></td>

</tr>

</table>

===========================================================

网页中的媒体元素

如何实现在网页上播放视频和音频

1,第三方自主开发的播放器

2,FLash

3,HTML5媒体元素

视频元素

<video src="视频路径"controls></video>

<!--controls提供播放的控件-->

<video controls autoplay>

<!--autoplay是设置自动播放-->

<source src="视频路径" type=".MP4"/>

<source src="视频路径" type=".ogg"/>

</video>

音频元素

<oudio src="视频路径"controls="controls"></video>

<!--controls提供播放的控件属性值HTML5以后可以省略-->

<oudio controls autoplay>

<!--autoplay是设置自动播放-->

<source src="视频路径" type=".MP3"/>

<source src="视频路径" type=".wma"/>

</oudio>

===========================================================

iframe框架

<iframe name="名字" width="800px" height="150px"/>

===========================================================

表单

表单元素

<input name="名字"method="post提交的方式" action="发送的地址">

>单选按钮 type="radio"

<from>

<input name="名字1"type="radio单选按钮值" value="选择值" checked默认选中>

<input name="名字1"type="radio单选按钮值" value="选择值" checked默认选中>

</from>

-----------------------------------------------------------

>复选框 type="checkbox"

<from>

<input name="名字" type="checkbox" value="选择值1" checked默认选中/>提示1

<input name="名字" type="checkbox" value="选择值2" checked默认选中/>提示2

<input name="名字" type="checkbox" value="选择值3" checked默认选中/>提示3

</from>

-----------------------------------------------------------

>下拉列表框

<select name="列表名称" size="行数">

<option value="选项的值" selected>选项</option>

<option value="选项的值">选项</option>

</select>

-----------------------------------------------------------

按钮

>重置按钮type="reset"

>提交按钮type="submit"

>button按钮

>图片按钮 type="image"

>文件域 type="file"

>邮箱type="emil"

>网址type="url"

>数字 type="number"

>滑块 type="range"

>搜索框 type="search"

表单元素的语法

method和action属性

常见的表单元素

input(text、password、radio、checkbox、submit、reset、email、url、number、range、search)、select、textare

===========================================================

表单的高级应用

>隐藏<input name="名字" type="text" value="值1" readonly/>

>禁用<input type="submit" value="保存" disabled/>

>标注

<label for="male">男</label>

<input type="radio" name="gender" id="male"/>

<label for ="">女</label>

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

===========================================================

表单的初级验证

1,减轻服务器的压力

2,保证数据的可行型和安全性

>初级验证的方法

>placeholder属性(提示信息)

>required属性(必填项)

>pattern属性(符合正则表达式)

页编程之单选复选。

同学们好,这里是免费少儿编程知识分享。每天一行代码谁都能学会!今天分享的知识是在网页中插入单选框复选框和定义标注。顾名思义,单选框就是在一堆选项中单独选择一个,而复选框则是选择多个选项。

定义标注是一种常见的表单控件,触发表单对应的控件功能,让用户在使用表单时能够有更好的体验,用到的是Input标签的type值radio Checkbox和label标签。

先来看看今天实例的运行效果。网页上一共有三段,第一段和第二段都是单选框,让用户选择自己的职业,它们的区别在第一段只有点击单选框空键才能够使单选框处于选中的状态,而第二段只要点击某一项对应的文字即可让单选框处于选中的状态。

还顺便演示了在一个网页中插入多个单选框,而不互相干扰,一般来说单选框都是必选,且只能够选择中一个。所以第一段还演示了如何在页面加载时就选中单选框的一项。第三个是复选框可以同时选中多个值,也可以一个值都不选,最后一个是输出选择的按钮,点击之后就会弹出对话框,使用JS取得选中的值并且显示出来。就像这样,效果各位同学都已经看到了。

现在我们来看看实现的代码。单选框用到的是input标签的type属性值radio,它的常用属性有Checked的,使用此项则默认为选中状态。

·vivo 有定义每一项的返回值波纹定向了选选项组的名称,所有lam相同的选项则为同一组选项,而要在页面中插入不同的选项组,只需要将ame设置不同即可。

id 为唯一标识,常用来和labei标签的For属性搭配使用Disabled设置某一选项是否会被禁用。复选框用到的是input标签的type属性的Checkbox,它的属性和radio是完全一样的,没有任何的差别,也没有必要在这里再浪费一次时间。

刚才已经演示过,如果说让用户去点击单选框或者复选框控件才能够更改状态是比较麻烦的事情,而点击文字就能更改选项。

操作就会简单很多,用到的也就是label标签,label标签为input元素定义标注也可以叫标记。label标签不会向用户展示任何特殊的效果,也就说它和普通文字是一模一样的。不过它为鼠标用户改进了可用性。

如果在label元素内点击文本就会触发该控件,也就是说当用户选择该标签时浏览器会自动将焦点转移到和标签相关的表单控件上,用到的是被关联控件的ID属性和label的for属性。就像这样在for属性里面填上单选框的ID值,点击这个label的时候ID为F2-2(口误)的单选框就得到了焦点改变了值。JS现在就不讲了,看看就得了免得你们大。

今天的分享就到这里,希望各位同学下去能够照着写3遍,做到不看视频也能够写出来所有的案例及相关文档均可以向我获取。下期见。网页编程·服务端编程·数据库·算法,点赞·关注。想学编程点关注吧。