html中表单的应用

2、表单 *****
表单作用：
用于显示、收集信息，并将信息提交到服务器

表单两大部分：
1、实现数据交互的可见界面元素，即表单控件
2、提交表单后的处理操作

1、如何实现表单
语法：<form></form>
特点：没有任何显示效果，默默的帮助网页完
成信息提交的功能
属性:
1、action
动作、行为
表单要提交的服务器处理程序地址，通常都是由后台处理程序完成(JSP,php,aspx java)
<form action="test.java"></form><form action="#"></form>
默认值：本页
2、method
提交方式
取值:get或post
get:（得到，获取）会将提交的信息全部显
示在地址栏上(明文提交)。大小限制为2KB。
使用场合：向服务器索取信息时，推荐使用get
提交方式，比如，百度搜索、各个网站的搜索栏
post:隐式提交，所提交的数据不会显示在地址栏上，安全性较高。并且没有提交数据的大小限制。
使用场合：
1、提交数据量较大时，上传头像、文档等
2、提交安全性要求较高的数据时，比如密码等
如果想将数据提交给服务器进行处理时，可以使用post，如 登录、注册。。
默认值：get
3、name
定义表单名称
4、id
定义表单唯一标识

注意：name 和 id ， 最终获取表单的方式不同而已。
5、enctype
表单数据编码方式
1、application/x-www-form-urlencoded
默认值,能够提交普通数据(包含特殊符号 & , = , ?)，无法提交文件
2、multipart/form-data
将所有内容都拆分成二进制进行提交 转字节

10 --》2 -》有电
abc -->unicode编码--》字节---》2 --》电脑 1个字母有几个字节 2 97--》a
utf-8---》unicode

0 1 二极管 没电 有电 物质 -------》

支持 文件上传
3、text/plain
只负责提交基本数据，不包含任何特殊字符的数据
尽量不用，有可能数据提交不完整

2、表单控件
具备可视化外观的html元素，并且能够接受用户输入的信息。而且表单控件中的数据是允许提交给服务器的。
表单控件：
1、input元素
语法：<input />
属性：
1、type,根据不同的type值，可以创建
各种类型的输入控件
2、value,控件的值,允许将value的值提
交给服务器
3、name,控件的名称,服务器使用
4、id,控件的唯一标识,本页面使用
5、disabled :禁用控件
<input id="value" disabled />
1、文本框 与 密码框
文本框:<input type="text"/>
密码框:<input type="password" />
属性：
maxlength:限制输入的字符数
readonly:只读

name和id的命名规范：
使用匈牙利命名法
text --> txt
password --> txt
type缩写作用名称
2、单选框 和 复选框
单选框：<input type="radio">
复选框：<input type="checkbox">
属性：
checked : 设置默认被选中
注意：name属性，一组单选框或复选框，name属性要设置为一致的。
一组中，只能有一个元素被选中

radio --> rdo,rdoGender
checkbox --> chk,chkHobby
3、按钮
1、提交按钮
固定功能，将表单控件的数据提交到服务器指定的处理程序(action)上
<input type="submit" value="按钮上的文字" />
2、重置按钮
固定功能，将表单控件的值都设置为默认值。
<input type="reset" value="按钮上的文字" />
3、普通按钮
由用户来定义功能
<input type="button" value="按钮上的文字" />

<button>显示的文字</button>
4、隐藏域 和 文件选择框
1、隐藏域
表单中，包含不希望用户看到的并且需要提交给服务器的信息，可以放在隐藏域中
<input type="hidden" />
2、文件选择框
允许用户选择 要上传的文件
<input type="file" name="" />
注意：
1、表单的 method 属性值 必须为 post
2、enctype的值必须为 multipart/form-data

2、其他元素
1、<label>元素
关联 文本与表单元素， 点击文本的时候相当于点击了表单元素一样
语法：<label>文本</label>
属性：for
表示与该label相关联的控件的id值
2、选项框(下拉列表框)
两种：
1、下拉选项框
2、滚动列表
语法：
选项框：
<select></select>
属性：
name:
id:
size:默认1，如果大于1则为滚动列表
multiple:多选

选项：
<option value="选项的值" selected>显示的文本
</option>
3、textarea元素
文本域，多行文本框元素
语法：
<textarea>
多行文本
</textarea>
属性：
name
cols:指定文本区域的列数(宽度)
rows:指定文本区域的行数(高度)
以上两个属性，以字符数作为值
readonly:只读
4、为控件分组
语法：
分组：
<fiedset>
元素
</fieldset>
标题：
<legend></legend>

<!--修改个人信息开始-->
        <div>
            <h1>修改个人信息</h1>
            <form action="java文件" method="get" name="form1" id="form1">
                姓名：<input type="text" size="" placeholder="marry" />
                &nbsp;▶ 各项<mark>技能</mark>指数<br /><br />
                性别：<input type="radio" />男
                <input type="radio" />女<br /><br />
                学历：
                <select id="edu" name="userEdu">
                    <option value="other" selected/>其他</option>
                    <option value="dz">大专</option>
                    <option value="bk">本科</option>
                    <option value="ss">硕士</option>
                </select><br /><br />
                意向工作城市：
                <select id="city" name="userCity" multiple="multiple">
                    <option value="other" />其他</option>
                    <option value="bj">北京</option>
                    <option value="sh">上海</option>
                    <option value="zz">郑州</option>
                </select><br /><br />
                个人描述
                <textarea cols="" rows=""></textarea>
                <br /><br />
                <input type="checkbox"  />不要公开我的个人信息<br /><br />
                <input type="submit" value="保存" />
                <input type="reset"  value="重置"/>
            </form>
        </div>
        <!--修改个人信息结束-->