HTML 表单4

4.1表单
什么是表单？收集用户填写的信息并将其提交到后台服务器。
（表单的标签）
action属性：指定提交的地址；
method属性：指定提交的方式、get/post。
get和post方式的区别：长度的限制，不能大于2KB；安全性，get方式提交的数据会直接呈现在地址栏，敏感数据容易被截获（（1）get传送的数据量较小，不能大于2KB。post传送的数据量较大，一般被默认为不受限制。get安全性非常低，post安全性较高。)
4.2文本框

     <input type="text">

  maxlength：指定文本框能接收的最大字符个数；  size：指定文本框的大小（宽度）；  value：指定初始值。

4.3密码框

      <input type="password">

  密码框和文本框是一样的，文本框的属性同样属用于密码框，唯一不同的是密码框是以掩码的形式显示内容、保证安全性。

4.4 label
的作用：
（1）可以单独对其应用相应的格式；
（2）for属性可以使之和某个关联，即当单击文本会激活对应的文本框。

<label for="userId">账号：</label>    <input id="userId" type="text" maxlength="10" size="20" value="abc">    <br>    <label for="password">密码：</label>    <input id="password" type="password" maxlength="6">

  Maxlength：输入文字的长度  Size：文本框的大小  Value：默认的值  在<label>中for和id属于关联的关系

4.5单选按钮

<input type="radio" name="role">学生<input type="radio" name="role" checked>教师<input type="radio" name="role">管理员

如果需要将若干个单选按钮编成一组（一组最多有一个被选中）需要设置相同的name属性。如果需要默认选中摸个选项，需要加上checked属性。（checked属性后面）
标签属性的表示形式：
（1）键值对：属性名=属性值
Type=“text”、maxlength=“6”
（2）一些取值为布尔类型的属性直接使用属性名
checked readonly
4.6多选按钮

你的兴趣爱好是：<input type="checkbox" checked>音乐<input type="checkbox" >阅读<input type="checkbox">游戏<input type="checkbox">电影<input type="checkbox">睡觉

Checked默认选中

4.7提交按钮

<input type="submit">

（1）点击按钮之后跳转到form表单的Action。
（2）value属性：value对应的值就是按钮上显示的文字。
（3）点击按钮：将form表单中的input中name属性值（键）和用户输入的值组成键值对（或input标签value属性对应的值）。并拼接到form表单action属性值的后面。

http://localhost:63342/untitled1/disizhang4/result.html?name=huadian&password=123456http://localhost:63342/untitled1/disizhang4/result.html?name=huadian&password=123456&sex=1

4.8重置按钮

<input type="reset" value="刷新">

（1）点击按钮，重置表单内部输入框（单选按钮）
（2）value属性：value对应的值就是按钮上显示的文字。
4.9普通按钮

<input type="button" value="登录">

（1）点击按钮，没有任何反应。
（2）value属性：value对应的值就是按钮上显示的文字。
4.10图片按钮

<input type="image" src="图片" alt="登录">

（1）作用和submit按钮是一样的
（2）需要设置src的值，如果src对应的路径没有找到图片，（并且有没有设置alt属性，按钮显示默认值“提交”，如果设置alt属性则alt的值。（类似img标签））。
4.11标签
（1）内容可以是任意资源（eg：图片、段落、视频…）
（2）当button标签放置在form内部，作用和submit一样。
4.12文件选择框

选择你的头像<input type="file" accept="application/pdf">选择你的头像<input type="file" accept="image/jpeg">`简历<input type="file" accept="application/pdf">简历<input type="file" accept=".doc">

4.13下拉列表
使用下拉列表的好处
（1）节省页面空间，使得页面更简洁；
（2）方便输入；
（3）规范输入

<form action="#" method="get">    你来自：    <select name="province">    <option value="33">浙江</option>    <option value="41">河南</option>    <option value="32">江苏</option>    <option value="36">江西</option>    </select>    <input type="submit"></form>

<select>标签定义了一个下拉列表；
<option>标签定义了一个下拉列表的选项；
<select>标签的name属性定义了提交的参数；
<option>标签的内容定义了该选项显示的文本，value属性定义了选中该选项。
时传递的参数。
多选可通过设置multiple属性来实现，Ctrl+单击选择多个

<select name="color" multiple>    <option value="red">红色</option>    <option value="blue">蓝色</option>    <option value="green">绿色</option>    <option value="yellow">黄色</option>    <option value="black">黑色</option></select>

<size>标签的size属性定义了下拉列表框显示的选项个数，当小于实际选项个数时，会自动增加一个滚动条

<select>    <optgroup label="国产">        <option value="红旗">红旗</option>        <option value="byd">比亚迪</option>        <option value="奇瑞">奇瑞</option>    </optgroup>    <optgroup label="德国系">        <option value="benz">奔驰</option>        <option value="bwm">宝马</option>        <option value="大众">大众</option>    </optgroup>    <optgroup label="日系" disabled>        <option value="丰田">丰田</option>        <option value="本田">本田</option>        <option value="三菱">三菱</option>        <!--disabled可显示，但不可选-->    </optgroup></select>

<optgroup>的label属性定义分组显示的文字，disabled设置该分组不能用。

4.14 textarea
Textarea标签主要方便用户输入较多文字信息，rows属性指定区域的行数，cols属性指定区域的列数。

<textarea rows="3" cols="9"></textarea>

<textarea> 标签定义一个多行的文本输入控件。文本区域中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier）。
可以通过 cols 和 rows 属性来规定 textarea 的尺寸大小。
4.15 fieldset
当信息较多时，可以考虑按照信息内容进行分组，达到表达清晰的

个人基本信息
姓名：<input type="text" name="name"> <br>
性别：<input type="text" name="name"> <br>
年龄：`

<fieldset>    <legend>院校信息</legend>    毕业院校：<input type="text" name="name">    <br>    毕业时间：<input type="text" name="name">    <br>    毕业专业：<input type="text" name="name">    <br></fieldset><fieldset>    <legend>企业信息</legend>    工作单位：<input type="text" name="name">    <br>    公司职务：<input type="text" name="name">    <br></fieldset>

Name:
Email:

fieldset 元素可将表单内的相关元素分组。
标签将表单内容的一部分打包，生成一组相关表单的字段。 标签没有必需的或唯一的属性。

Personalia:
Name:
Email:
Date of birth:
gend>边框的命名
disabled 属性是一个布尔属性。
disabled 属性规定应该禁用一组表单元素（一个 fieldset）。被禁用的 fieldset 不可用，也不可点击。
可以对 disabled 属性进行设置，使用户在满足某些条件时，才能使用输入字段。然后，可使用 JavaScript 来删除 disabled 值，使该 fieldset 变为可用的状态。
4.16隐藏域
当需要向服务区传递参数时，把不想让客户看到(看到看不到没关系)的隐藏起来。

<form action="result1.html" method="get">    <input type="hidden" name="stuNo" value="15020702" readonly>    <br>    原密码：<input type="password" name="old">    <br>    新密码：<input type="password" name="new">    <br>  <input type="submit" value="修改密码"></form>