表单标签
什么是表单？
我们先对一个事物有一个形象的认识：
例如网易的注册页面
例如淘宝的注册页面：
抽象到定义中去
表单是专门用来收集用户信息的。
什么是表单元素？
波利亚曾经说过，你是否知道一个更普遍的问题？我认为他的这条建议对于我们理解特殊的概念是有用的，当你理解一个更大的概念时，你可能对一个特殊的概念更容易理解。所以在这里元素是一个比表单元素更大概念，但我们理解了，表单元素就理解了。
什么是元素？
在html中，标签、标记、元素都是指html中的标签
例如<table> table标签/table标记/table元素
例如 <a> a标签 /a标记/a元素
表单元素的定义：是html一些标签，只不过标签比较特殊，其一特殊的外观和默认功能。
表单的格式
<form><表单元素></form>
表单的元素的分类
input标签:有一个type属性，这个属性有很多类型的取值。取值的不同就决定了input标签的功能和外观。
例1 明文输入框：<form><input type="text"/></form>
例2 暗文输入框：<form><input type="password"/></form>
例3 综合案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单</title>
</head>
<body>
<form>账号：<input type="text"/><br/>
密码：<input type="password"/></form>
</body>
</html>
运行结果如下图所示：
例4 给输入框设置默认值。
<form>
账号：<input type="text" value="inj"/><br/>
密码：<input type="password" value="123"/>
</form>
运行结果如图所示：
例5 单选框
性别：<input type="radio" value=""/>男 <input type="radio" value=""/>女
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单</title>
</head>
<body>
<form>
账号：<input type="text" value="inj"/><br/>
密码：<input type="password" value="123"/><br/>
性别：<input type="radio" value="" name="human"/>男 <input type="radio" value="" name="human"/>女
</form>
</body>
</html>
我们怎么解决这个问题？
在这里，我们需要用到name属性，要想单选框互相排斥那么必须给每一个单选框标签设置一个那么属性，然后name属性设置相同的值才可以实现。
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单</title>
</head>
<body>
<form>
账号：<input type="text" value="inj"/><br/>
密码：<input type="password" value="123"/><br/>
性别：<input type="radio" value="" name="human"/>男 <input type="radio" value="" name="human"/>女
</form>
</body>
</html>
运行的结果如图所示：
温伯格说：“一旦头号问题解决，你就让二号问题升级了”现在又存在一个问题，就是如何让单选框默认选中某一个框子？
解决方案：给input标签添加一个checked属性。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单</title>
</head>
<body>
<form>
账号：<input type="text" value="inj"/><br/>
密码：<input type="password" value="123"/><br/>
性别：<input type="radio" value="" name="human"/>男 <input type="radio" value="" name="human" checked="checked"/>女
</form>
</body>
</html>
运行结果：默认选择女
例5 多选框
爱好：
<input type="checkbox"/>篮球
<input type="checkbox"/>足球
<input type="checkbox"/>兵乓球
<input type="checkbox" checked="checked"/>羽毛球
运行结果如图所示：
网友评论