表单标签详解

2. 表单标签

1. form 表单盒子

<!-- 表单 获取用户信息, 一般用于包含所有表单元素 -->
<!-- action: 传递地址 -->
<!-- methods: 使用什么方式传递 -->
<form action="地址" method="get">
</form>

补充:

get和post的区别

• get是从服务器上获取数据，post是向服务器传送数据。
• get是把参数数据队列加到提交表单的ACTION属性所指的URL中，值和表单内各个字段一一对应，在URL中可以看到。post是通过HTTP post机制，将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址。用户看不到这个过程。
• 对于get方式，服务器端用Request.QueryString获取变量的值，对于post方式，服务器端用Request.Form获取提交的数据。
• get传送的数据量较小，不能大于2KB。post传送的数据量较大，一般被默认为不受限制。但理论上，IIS4（Internet Information Service 互联网信息服务）中最大量为80KB，IIS5中为100KB
• get安全性非常低，post安全性较高。但是执行效率却比Post方法好

2. input:text 输入标签

<!-- 输入标签包含很多东西, 如输入文本,密码等等 -->
<!--
	通用属性:
  type: 类型
  name: 发送的名字, 一定要写, 否则无法发送, 其实就是需要发到服务器数据的key值, 而用户要填的则是value值
	value: 值
-->

<!-- 文本框 -->
<!-- placeholder:提示信息- -->
<input type="text" name="a" value="用户名" placeholder="请输入用户名">
<!-- 密码框 ,其也有placeholder属性 -->
<input type="password" name="b" placeholder="请输入密码">

3. button 提交按钮

<!-- 会有默认行为, 提交表单 -->
<button>按钮</button>

4. fieldset 表单字段集

<!-- 表单字段集，相当于一个方框，可以嵌套，在其内部可以在设置多个fieldset对象  -->
<!-- 其实本质就是一个方框, 包裹表单元素 -->
<fieldset>
  <!-- 给方框一个标题 -->
  <legend>健康信息</legend>
  身高：<input type="text" />
  体重：<input type="text" />
</fieldset>

效果:

5. select 下拉列表

<!-- 下拉列表 -->
<!-- selected优先显示 -->
<select name="" id="">
  <option value="1">什么鬼</option>
  <option value="2" selected>魔鬼</option>
  <option value="3">啥啥啥</option>
</select>

6. textarea 多行文本域

<!--
cols: 列长
rows: 横宽
css中控制 resize: none 取消控制多行文本
-->
<textarea cols="40" rows="5">文本域</textarea>

7. label 信息提示标签

<!--
label的属性中写需要绑定的表单标签,绑定后, 只需要点击文本, 就相当于点击了表单元素, 提高了用户体验
-->
<label for="username">
	用户名：<input type="text" name="" id="username">
</label>
<label for="password">
  密码：<input type="text" name="" id="password">
</label>
<input type="radio" id="nan">
  <label for="nan">男</label>

8. input:submit 提交按钮

<!-- 提交按钮 -->
<!-- value可以改变按钮的名字(默认行为是提交) -->
<input type="submit" value="登录">

9. input:button 普通按钮

<!-- 普通按钮 -->
<!-- 作为属性值使用, 没有默认提交行为 -->
<input type="button" value="按钮">

10. input:reset 清除按钮

<!-- 清空表单内容 -->
<input type="reset" value="清除">

11. input:radio 单选按钮

<!-- 单选按钮  -->
<!-- 
	只有nane一样才是一组单选框
	checked:选中
	disabled: 禁用
-->
男<input type="radio" name="sex" checked/>
女<input type="radio" name="sex"/>

12. input:checkbox 多选按钮

<!-- 多选按钮 设置disabled禁用、checked表示默认选择 -->
游泳<input type="checkbox" name="hobby" checked/>
跑步<input type="checkbox" name="hobby" />
健身<input type="checkbox" name="hobby" />
学习<input type="checkbox" name="hobby" />

13. input:file 上传文件

<!-- 6.上传文本框，设置multiple属性可实现多选  -->
<input type="file" name="" id="" multiple>