Web前端基础知识（三）
表单的应用非常丰富，可以说，每个网站都会用到表单。下面首先介绍表单中的form标签。
---------------------------------------------------------------------------------------------------------------------------------
<form></form>:
表单中的容器，创建一个表单，就和创建一个表格差不多。表单中的所有元素必须包含在form标签内部。
form标签中最常用的是输入标签<input>
---------------------------------------------------------------------------------------------------------------------------------
<input>:
常用属性type,规定了input元素的类型。
---------------------------------------------------------------------------------------------------------------------------------
举例：
<form action="">
<input type="text" placeholder="请输入内容">
<input type="text" value="请输入内容">
</form>
效果：
对于第一种，在文本框中输入内容，灰色部分字体消失。
对于第二种，文本框自动填写内容。
---------------------------------------------------------------------------------------------------------------------------------
input 的value属性，规定了input元素的值。
input 的placeholder属性，只是给用户一个友好提示。
---------------------------------------------------------------------------------------------------------------------------------
在form表单中，有专门为input元素做标记的标签，即<label>,它的作用与<span>标签差不多。
<label>,仅限于和<input>对应使用。
举例：
<form action="">
<label>用户名：</label>
<input type="text" placeholder="请输入内容">
<br>
<br>
<label>密 码：</label>
<input type="text" value="请输入内容">
</form>
效果：
---------------------------------------------------------------------------------------------------------------------------------
input标签还可以变成单选框。比如，在有的网站注册页面时，可能会需要选择性别。
举例：
<label for="">性别</label>
<input type="radio">男
<input type="radio">女
效果：
问题：
单选效果。
改进：
单选选项的name属性值一致。
<label for="">性别</label>
<input type="radio" name="gender">男
<input type="radio" name="gender">女
效果：
---------------------------------------------------------------------------------------------------------------------------------
label标签的for属性，把label标签绑定到input元素，但，label中的for属性一般是与input标签中的id所对应。id对于每个元素来说都是唯一的。
举例：
<form action="">
<label for="username">用户名：</label>
<input type="text" id="username" placeholder="请输入用户名">
<br>
<br>
<label for="pwd">密 码：</label>
<input type="password" id="pwd" placeholder="请输出密码">
<br><br>
<label >性别</label>
<input type="radio" name="gen">男
<input type="radio" name="gen">女
</form>
效果：
---------------------------------------------------------------------------------------------------------------------------------
举例：
<label>爱好</label>
<input type="checkbox" name="hobbby">唱歌
<input type="checkbox" name="hobbby">写作
<input type="checkbox" name="hobbby">阅读
<input type="checkbox" name="hobbby">羽毛球
效果：
---------------------------------------------------------------------------------------------------------------------------------
举例：
<input type="submit">
效果：
解释：
按钮作用：将表单中填写的数据，提交到一个地方。
<form>标签的一个属性 action:提交标签时，即，点击提交按钮时，向何处发送填写的数据。所以，action的属性值为 URL（需要服务器，即后端，提供API）。目前没有后端，使用“#”表示不跳转。
举例：
<input type="submit" value="上传">
效果：
---------------------------------------------------------------------------------------------------------------------------------
后续内容见《Web前端基础知识（四）》