HTML第三章：表单与表单元素

1、表单：form，
表单用于收集用户输入的信息，比如注册、登录等。

<form name="myform" action="success.html" method="get"
enctype="application/x-www-form-urlencoded" target="_blank">
</form>

属性说明：
name：表单名称
action：表单处理程序的地址
method：表单数据提交的方法
get:默认，发送数据，url地址会发生变化,安全性低，数据量小，速度快，
post:接收数据，url地址不会发生变化,安全性高，数据量大，速度慢，
enctype:表单数据的编码方式
application/x-www-form-urlencoded：默认，对所有表单数据进行编码
multipart/form-data：对数据不编码（有文件上传时，必须使用该值）
text/plain：把空格表示成+（一般不用），不对特殊字符编码
target:目标窗口中显示(跟超链接相同)

2、表单元素：
输入类：用input标签表示，有文本框、密码框、单选按钮、复选框、图像域、隐藏域、文件域、按钮
等。

1）文本框：<!--placeholder:提示信息； readonly：只读-->
<input type="text" name="userName" id="" value="" placeholder="请输入用户名"
maxlength="10" size="30" readonly="readonly" />

2）密码框：
<input type="password" name="userPwd" id="" value="" placeholder="请输入密码"/>

3）单选按钮：<!--同一组单选按钮name属性值必须相同-->
<input type="radio" name="userSex" id="" value="男" checked="checked"/>男
<input type="radio" name="userSex" id="" value="女" />女

4）复选框:
<input type="checkbox" name="userHobby" id="" value="吃" checked="checked"/>吃
<input type="checkbox" name="userHobby" id="" value="喝" />喝
<input type="checkbox" name="userHobby" id="" value="玩" />玩
<input type="checkbox" name="userHobby" id="" value="乐" />乐

5）按钮:<!--disabled:是否禁用-->
<input type="button" value=" 普通按钮 " disabled="disabled"/> <!--功能需要自定义--
>
<input type="submit" value=" 提交按钮 " /> <!--提交按钮：提交整个表单的数据-->
<input type="reset" value=" 重置按钮 " /> <!--重置按钮：重置整个表单的数据-->
<!--
另外：button标签也是按钮
<button type="button">普通按钮</button>
-->

6）图像域：<!--功能跟提交按钮一样！是图片式的提交按钮-->
<input type="image" src="./img/images/selfpic2.jpg"
width="80" height="40"/>

7）隐藏域:
<!--放用户看不到的数据-->
<input type="hidden" name="myData" value="我是天才!" />

8）文件域:
<!--让用户选择文件（常上传功能时使用！），表单中有文件域时，表单属性enctype必须
取值multipart/form-data-->
<input type="file" name="myFile" value="" />

3、菜单类：
1）单选的下拉菜单
<select name="edu">
<option value ="" selected="selected">--请选择学历--</option>
<option value ="小学">小学</option>
<option value ="中学">中学</option>
<option value ="大学" >大学</option>
</select>

2）多选的菜单列表:multiple表示多选 size表示显示的项数
<select name="books" multiple="multiple" size="5">
<option value ="" selected="selected">--请选择喜欢的课程--</option>
<option value ="C#">C#</option>
<option value ="JAVA">JAVA</option>
<option value ="HTML" >HTML</option>
<option value ="JS">JS</option>
<option value ="JAVAWEB">JAVAWEB</option>
<option value ="PYTHON" >PYTHON</option>
</select>

3）带分组的菜单
<select name="books2" multiple="multiple" size="5">
<optgroup label="软件类">
<option value ="C#">C#</option>
<option value ="JAVA">JAVA</option>
<option value ="HTML" >HTML</option>
<option value ="JS">JS</option>
</optgroup>
<optgroup label="数学类">
<option value ="几何">几何代数</option>
<option value ="概率学">概率学</option>
<option value ="离散" >离散数学</option>
</optgroup>
</select>

4、文本域：textarea，表示多行文本框
rows行数，cols列数
<textarea name="myinfo" rows="10" cols="25" placeholder="请输入个人简介...">
</textarea>