江苏龙网

  1. 主页 > 生活百科 > >

前端数据提交给后端之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=https://www.isolves.com/it/cxkf/qd/2022-08-02/"提交">效果如下图：
前端数据提交给后端之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=https://www.isolves.com/it/cxkf/qd/2022-08-02/"yes">

问答题2（单选）：实际工作经验不足1年的人员折腾的学习资料您觉得是否对你有帮助？

效果如下图：
前端数据提交给后端之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=https://www.isolves.com/it/cxkf/qd/2022-08-02/"提交">


推荐阅读


上一篇：HDMI有哪些版本？

下一篇：实践GoF的设计模式：迭代器模式