HTML表单标签form分析

说明：在html的标签中，表单标签与后台联系密切，像用户登录、注册，都是用到页面的表单标签，用户将信息填入到表单中，提交到后端业务中校验处理，再将结果反馈给前端页面。

表单内的标签分别有：input（输入框）、select（下拉列表）、textarea（文本域）

表单内的属性有：action（数据提交到哪里）、method（数据提交的方式）

表单的标签

表单的标签，在使用时要命名，这样提交后，后台业务可以根据名字获取到对应标签的值；

input type=“text”

生成一个普通的输入框，对框内输入的内容类型无要求

用户名：<input type="text" name="username"/>

input type=“password”

生成一个密码输入框，内容类型无限制，但是是加密的，不可见

密码：<input type="password" name="password" />

input type=“radio”

生成一个单选框，同一个名称的单选框为同一类，这些单选框之间只允许选其中一个；如果要设置某个单选项为默认值，只需在标签内加“checked”，表示该项为默认勾选。

 性别：<input type="radio" name="sex"/>男<input type="radio" name="sex"/>女

年龄段：
<input type="radio" name="age"/>青年
<!-- 设置中年为默认选项 -->
<input type="radio" name="age" checked/>中年
<input type="radio" name="age"/>老年

input type=“checkbox”

生成一个多选框，同样，如果需要设置默认值，在该选项的标签内添加“checked”，表示该项默认勾选。

爱好：
<input type="checkbox" name="hobby" />跑步
<input type="checkbox" name="hobby" checked />阅读
<input type="checkbox" name="hobby" />听音乐
<input type="checkbox" name="hobby" checked />健身
<input type="checkbox" name="hobby" />下棋

input type=“file”

生成一个文件上传按钮，可选择本地的文件

上传头像：
<input type="file" name="photo" />

input type=“datetime-local”

生成日期输入框，可选择date、time和datetime-local，分别表示可选日期、时间和日期+时间的详细表达方式。

生日：<br />
<input type="date" name="birthday" /> <br />
<input type="time" name="birthday" /><br />
<input type="datetime-local" name="birthday" />

input type=“button”

定义一个按钮，可配合js使用

<input type="button" value="提交" />

input type=“reset”

定义一个可清空表单内容的按钮，按下后，表单的内容将清空

用户名：<input type="text" name="username" /><br />
密码：<input type="password" name="password" /><br />
<input type="reset" value="重置" />

input type=“hidden”

生成一个隐藏的输入框，这个框在开发中可用于统计网页的访问人数

这后面有一个隐藏的输入框<input type="hidden" name="hiddenInput" />

input type=“submit”

生成一个提交表单按钮，点击后可跳转到表单action属性设置的页面里，并将表单数据传过去，我这里没有设置action的值，故点击后还是本页面。

<form action="" method="">用户名：<input type="text" name="username" /><br />密码：<input type="password" name="password" /><br /><input type="submit" value="登录" />
</form>

select标签

生成一个下拉菜单，待选项标签为option

文化程度：
<select name="education"><option>小学</option><option>中学</option><option>大学</option>
</select>

textarea标签

个人信息：
<textarea name="info"></textarea>

表单的属性

action

表示点击submit提交后，表单的数据提交到哪里，可选择另一个页面；

method

表示表单提交的方式，有get和post两种，默认是get；两种方式，明显的区别在于：get方式，表单中的数据可在提交后，页面的地址栏看到；post提交方式看不到；

<form action="" method="get">用户名：<input type="text" name="username" /><br />密码：<input type="password" name="password" /><br /><input type="submit" value="登录" />
</form>

<form action="" method="post">用户名：<input type="text" name="username" /><br />密码：<input type="password" name="password" /><br /><input type="submit" value="登录" />
</form>