form表单中各元素的运用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
<!--
表单：主要是收集用户的各种类型数据 提交数据请求到服务器
组成：
表单元素+表单控件 功能性标签
1、表单元素
属性
action:主要作用是规定表单提交的动作 提到到服务器上处理的URL
默认值：提交到本页
method:指表单数据提交的方式
get 默认值
数据提交的大小限制 2kb
显示提交 用户数据可以显示在地址栏
适用场合：向服务器要数据时
post
数据提交的大小不受限制
隐式提交 提交的数据非专业人士看不见
适用场合：向服务器提交数据时
enctype
表单数据进行编码的方式
取值
application/x-www-form-urlencoded 默认值
multipart/form-data 上传文件时适用
text/plain
2、表单控件
input组元素
type属性 默认值 text
属性：
type
value 值 要提交到服务器的值
name 控件名称，服务器端适用，没有做名称，无法提交
名称 匈牙利命名方式 类型+功能
disabled 禁用控件 改属性，主要出现在控件中表达禁用 boolean类型的属性
textarea
选择框
其他
-->
<form action="#" method="get" enctype="application/x-www-form-urlencoded" >
账号：
<!--1.文本框-->
<input type="text" name="txtId" maxlength="6" readonly disabled="disabled" />
<br />
密码：
<!--2.密码框-->
<input type="password" name="txtPwd" />
<br />
性别：
<!--3.单选按钮
想要一组单选按钮有互斥的效果，必须设置他们的name值相同
checked="checked"默认选项
<label></label>里面for=id值，点击id值也可以选中按钮
-->
<input type="radio" name="sex" value="1" id="boy" checked="checked"/>
<label for="boy">男</label>
<input type="radio" name="sex" value="0" id="girl"/>
<label for="girl">女</label>
<br />
兴趣爱好：
<!--
4.多选框
-->
<input type="checkbox" name="hbi" value="0" id="book" checked="checked"/>
<label for="book">看书</label>
<input type="checkbox" name="hbi" value="1" id="chese"/>
<label for="chese">下棋</label>
<input type="checkbox" name="hbi" value="2" id="game"/>
<label for="game">游戏</label>
<br />
<!--6.隐藏域
给程序员看的
可以将记提交到服务器
-->
<input type="hidden" value="" name="" />
<!--7.文件选择框-->
<input type="file" name="txtImg" />
<br />
<!--8.文本域
cols 列数
rows 行数
-->
个人签名：
<textarea name="intr" cols="100" rows="3"></textarea>
<br />
籍贯
<!--
multiple：这指多选项
size 显示的选项数量
-->
<select name="sel" multiple="multiple">
<option value="1">湖北</option>
<option value="2">湖南</option>
<!--
selected="selected"
默认被选中
-->
<option value="3" selected="selected">广西</option>
</select>
<br />
<!--5. 按钮
submit 提交
button 普通的按钮
reset 重置
-->
<input type="submit" value="提交" />
<input type="reset" value="归零" />
<!--执行客户脚本JavaScript:0-->
<input type="button" value="执行脚本" />
<button>
<img src="img/HBuilder.png" width="100px" height="100px"/>
</button>
</form>
</body>
</html>
