写在开篇
什么是表单呢？以后端想要提交数据给后端，怎么搞？那么在前端开发中，表单是罕用的伎俩，比方常见的场景有：登录框、账号注册页、主机信息录入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, requestwebapp = 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, requestwebapp = 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: utf8from flask import Flask, requestwebapp = 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: utf8from flask import Flask, requestwebapp = 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: utf8from flask import Flask, requestwebapp = 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: utf8from flask import Flask, requestwebapp = 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键可进行多选
后端打印的效果图下图：
写在最初
对于表单根底知识点的解说就这么欢快的完结了，对于更多表单的元素、输出属性、输出类型可自行查阅和实战，笔者因工夫无限就不一一演示。感谢您的浏览，望多多关注咱们、点赞、转发！