浅谈HTML表单（二）：表单元素
一、实践
1、贴上完整的代码图：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="login">
<input type="text" name="sex">
<form action="/a123" method="get">
<div class="username">
<label for="username">姓名</label>
<input id="username" type="text" name="username1" placeholder="用户名">
</div>
<div class="password">
<label for="password">密码</label>
<input id="password" type="password" name="password1">
</div>
<div class="sex">
<label for="sex">性别</label>
<input type="radio" name="sex" value="男">男
<input type="radio" name="sex" value="女">女
<!--
<input type="radio" name="sex1" value="男">男
<input type="radio" name="sex1" value="女">女
-->
</div>
<div class="sexchoose">
<label for="sexchoose">取向</label>
<input type="radio" name="sex2" value="男">男
<input type="radio" name="sex2" value="女">女
</div>
<div class="hobby">
<label>爱好</label>
<input type="checkbox" name="hobby" value="dota">dota
<input type="checkbox" name="hobby" value="travl">旅游
<input type="checkbox" name="hobby" value="pet">宠物
</div>
<div class="textarea">
<label for="textarea">评论</label>
<textarea name="article">
123
</textarea>
<input type="hidden" name="abcd" value="12345">
</div>
<div class="file">
<input type="file" name="myfile" accept="image/png">
</div>
<div class="choose">
<label for="pet">我的宠物</label>
<select name="city">
<option value="cat">猫</option>
<option value="dog" selected>狗</option>
<option value="fish">鱼</option>
</select>
<button>提交</button>
<!--
</div>
<div class="submit">
<input type="submit" value="提交">
</div>
-->
<!--
<div class="submit">
<button>提交</button>
</div>
-->
</form>
</div>
</body>
</html>
2、效果图：
image
二、具体标签：
1、form
代码结构如：
<form action="/a123" method="get">
form标签是表单的外壳，有4个主要属性：
（1）action：表单提交的地址
（2）method：提交表单的方法
（3）target：在何处打开action
（4）enctype：
-
application／x-www-form-urlencoded：在发送前编码所有字符（默认） -
text／plain：空格转换为“+”加号，但不对特殊字符编码 -
multipart／form-data：使用包含文件上传控件的表单是，必须使用该值
2、type
代码结构如：
<input type="text" name="sex">
（1）type="text"
普通的文本输入框，单行输入（不行回车换行）。可输入文字展示
（2）type="password"
输入密码是以圆点展示，不被人知道
（3）type="checkbox"
呈现带有阴影的勾选方框
代码如下：
<div class="hobby">
<label for="hobby">爱好</label>
<input type="checkbox" name=>读书
<input type="checkbox" name=>听歌
<input type="checkbox" name=>游泳
</div>
如图：
image
注：
A、如果是分组，name写成不同，表示多选，如针对hobby这个关键字的搜索，value值需要设置，否则后台提交的用户信息将显示为on（无信息展示）。如图：
image
B、value的作用：让后台来识别该字段的信息
（4）type="radio"
呈现带有阴影的点选圆框
代码结构如下：
<div class="hobby">
<label for="sex">性别</label>
<input type="radio" name="sex" value="male">男
<input type="radio" name="sex" value="female">女
</div>
如图：
image
注：
radio 如何分组？举例说明，只需要在<input type="radio" name="sex" value="男">中的name值设置另一个意义值，就可以分组显示，如：
第1组：
<input type="radio" name="sex" value="男">男
<input type="radio" name="sex" value="女">女
第2组：
<input type="radio" name="sex1" value="男">男
<input type="radio" name="sex1" value="女">女
即：
<div class="hobby">
<label for="sex">性别</label>
<input type="radio" name="sex" value="male">男
<input type="radio" name="sex" value="female">女
<input type="radio" name="sex1" value="男">男
<input type="radio" name="sex1" value="女">女
</div>
如图：
image
（5）type="file"
用于文件上传，呈现“选择文件”按钮，点击即可上传文件
<input type="file" name="myfile" accept="image/png，image/jp
注： accept该参数使用，即用于接收所限制的文件格式
（6）type="hidden"
作用：
-
暂存信息。 如在
type="hidden"埋下一个值，后台定位获取相应的值，可安全存值，用户什么都看不见，只能在后台看到； -
保障安全。 当打开一个页面，实际上该页面是后端写的模板并在里面填充数据，填充好数据后，安全策略时使用
type="hidden"，即：
<input type="hidden" name="abc" value="123456">
当用户提交用户信息至后台，同时该安全点type="hidden"的值也会提交后台，后台进行校验——确认过安全，相当于埋在后台与用户信息相匹配的一个安全校验值，即该用户为一个合法用户。
（7）type="button"，不能点击提交
（8）type="submit"，可以点击提交
（9）type="reset"，用于清空所有用户信息
注：
A、以下input有何作用？
<input type="submit" value="提交" name="提交按钮">
B、type="submit" ，
提示input作用为“提交”按钮
C、value="提交"，
显示提交作用，意义在于“点击提交”的交互作用
D、input里name 作用？
即用于传递数据给后台都形成有意义的识别值，如用value和name赋值，如果不写的话，该输入标签将不会有任何意义，就等于无实际操作表单的意义。
3、type=hidden 隐藏域作用
type=hidden隐藏域，作为校验该用户信息的一个隐藏值（判断标准）。当用户打开页面后是看不见type=hidden相应的值，填写用户信息之后点击提交时，用户信息的数据（包括type=hidden值）随即提交后台，打开后台则会展示代码type=hidden所写的相应元素属性值。后台校验type=hidden相应值如果是正确，即用户提交为安全。
埋点（保护的参数）——浏览器提交后台有该参数作为校验标准参考——若显示错值或无值，服务器也将不承认所提交的数据；若为正确值，则说明该用户获取权限，即为合法用户，可防止CSRF攻击
4、label
输入框前的文字标注
代码如下：
<div class="username">
<label for="username">姓名</label>
<input id="username" type="text" name="username1">
</div>
注： for，用于点击文字或输入框时，是文字显示一种focus状态，可直接输入对应信息
5、select
下拉菜单
代码结构如下：
<div class="choose">
<select name="city">
<label for="pet">我的宠物</label>
<option value="cat">猫</option>
<option value="dog">狗</option>
<option value="fish">鱼</option>
</select>
</div>
option中，设置默认选择的初始值，即<option value="cat" selected>猫</option>
6、textarea
实现多行文本，展示较大的输入框。即常见的评论框。
代码结构如下：
<div class="textarea">
<label for="textarea">评论</label>
<textarea name="article">
123
</textarea>
</div>
注：
若在<textarea>...</textarea>中输入任意值，即相当于value赋值的意义，也就是说在<textarea>...</textarea>输入的值都能显示其输出的意义。
7、placeholder
用于输入什么用户信息的提示
代码结构如下：
<div class="username">
<label for="username">姓名</label>
<input id="username" type="text" name="username1" placeholder="用户名">
</div>
图：
image
