盘点HTML表单基础1. from元素什么是表单呢?当前端想要提交数据给后端,怎么搞?那么在前端开发中,表单是常用的手段,比如常见的场景有:登录框、账号注册页、主机信息录入CMDB等等场景都是需要表单。那么在本篇中,笔者除了讲一些基本的知识点,还会再结合后端的方式来演示如何接收表单提交的数据。希望这些小小的演示可以起到抛砖引玉的效果。
构建表单,主要是通过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可单击按钮
2. 单选按钮在上面小栗子中,除了input元素之外,不知道大家注意label元素没有。label元素的主要用途是为input元素定义标签,且用for属性和input元素的id属性进行绑定呢。
什么是单选按钮?就是在多个选项中,你只能选其中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>
效果如下图:
3. 复选框上面的小栗子中,出了两道问答题,均为单选题。那么,类似的需求都是可以使用输入类型为radio来实现需要使用单选按钮的场景。
什么是复选框?复选框就是可以选择多个选项,当需要多选的时候,使用复选框输入类型就对了。看下面代码:
<!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>
效果如下图:
4. 提交按钮上面的小栗子中,实现复选框的输入类型是checkbox,这个是重点哦!
当有数据要提交给后端的时候怎么搞?如果后端是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>
效果如下图: