第五章(表单和表单元素)

4.
查看源码
文件域 用户可以通过文件域来浏览本地文件并选择。配合服务端程序， 可以实现本地文件的上传
注意：要实现文件上传必须以Post为提交方式 并且设置表单属性enctype="multipart/form-data"
属性： name 控件名称。 例如 <input type=“file” name=“file”/>
单行文本框实例 <form> <input type="text" name="username" value="请输入用户名"> </form> < Input />必须放在 <form></form>之间
设置当行文本框的其他属性，观察效果
输入密码的区域
当用户输入密码时，区域内将会显示“*”号 定义控件名称。 指定控件初始值,该值就是浏览器 一开始在文本框中的内容。 属性 size 指定控件宽度,表示该文本输入框 所能显示的最大字符数。 maxlegnth 表示该文本输入框允许用户输入 的最大字符数。 name value
multiple 属性 name size
可多选 控件名称 设置列表的高度 缺省时值为1
下拉列表框实例
<select name="gx2" multiple size="4"> <option value=“apple”selected>苹 果 </select> multiple代表多选 Selected表示默认选项 将size改为1，看看效果
msg()就是JavaScript 代码,后面的章节会详 细讲解
查看源码
图像按钮
图像的源文件名由src属性指定，用户点击后，表单 中的信息和点击位置的X、Y坐标一起传送给服务器 属性 name 指定图像按钮名称。 src 指定图像的url地址
图像按钮实例
<input type="IMAGE" src="login.gif“/>
单选按钮实例
<INPUT CHECKED name=R1 type=radio value="music">音乐 音乐
checked表示默认被选中 radio表示单选按钮
查看源码
复选框
checkbox用于多选 name 定义控件名称。 value 定义控件的值。 checked 设定控件初始状态是被选中的。 onclick 定义控件被选中时要执行的函数。 onfocus 定义控件为焦点时要执行的函数。
处理程序的程序名(包括 网络路径:网址或相对路径)
method
GET，显示提交，数据量小 POST，隐式提交，数据量大
GET | POST
平板车搬家
大型集装箱货车搬家
写入标记<input/>
注意：该标记是单标记，没有结束标记
标记<input/>能够将浏览器中的控件加载到html文 档中 必须放在<form></form>标志对之间 <input type=“”/>用来定义一个用户输入区，用 户可在其中输入信息。标志中共提供了九种类型的输 入区域，具体是哪一种类型由type属性来决定
提交到服务器的按钮
<input type=“submit”/>
分类
点击就会连接到action指定的url地址
重置按钮
<input type=“reset“/> 可将表单内容全部清除
按钮共同的属性 name 指定按钮名称
value 指定按钮表面显示的文字
共同的属性
onclick 指定单击按钮后要调用的函数 onfocus 指定按钮接受焦点时要调用的函数 所谓调用的函数，是后面章节学的JavaScript函数
查看源码
可以输入多行的文本框 <textarea></textarea>用来创建一个可以输入多行的文本框 (1)onchange指定控件改变时要调用的函数 (2)onfocus当控件接受焦点时要执行的函数 (3)onblur当控件失去焦点时要执行的函数 属性 (4)onselect当控件内容被选中时要执行的函数 (5)name文字区块的名称，作识别之用，将会传至CGI (6)cols文字区块的宽度 (7)rows文字区块的列数，即其高度 (8)wrap属性 定义输入内容大于文本域时显示的方式
<type> 的属性 1．单行的文本输入区域 <input type="text"> 2．按钮 3．复选框 4．隐藏区域 5．密码输入区 6．单选按钮类型 7．图像按钮 9．文件域 <input type="button"> <input type="checkbox" <input type="hidden"> <input type="password"> <input type="radio"> <input type="image" src="url"> <input type=“file" >
第五章 表单与表单元素
回顾
框架标记 各窗口尺寸设置 各窗口间相互操作(Frame Target) IFrame的外观 IFrame的使用
课程目标
表单的基本概念及作用 九种写入标记 菜单下拉列表的使用
体验
用于采集和提交用户输入的信息
表单标记<form>
表单在Web网页中用来给访问者填写信息，从而能采 集客户端信息，使网页具有交互的功能 提交信息的方式 表单是由窗体和控件组成的 <form action＝"url" method="get|post" name="myform" target="_blank"> …… </form>
文本域示例
<form action="" method="post"> … <textarea name="yj" clos="20" rows="5"> … </form>
查看源码
表单的作用
用户注册 系统登录 发表留言或内容 任何需要用户填写内容，进行交互操作的时候
总结
表单的作用？Action method name 属性 <input>中type的不同，决定了表单中不同的控件 文本框，密码框，文本域，隐藏域的区别 单选框和复选框的区别 下拉列表框不同属性值，会有不同的显示效果
隐藏区域 用户不能在其中输入，用来预设某些要传送的信息 对用户来说是不可见的 name 控件名称。 value 控件默认值。
属性
例如
<input type="Hidden" name="ss" value="688">
看不见的文本框
下拉列表框 <select></select>标志对用来创建一个菜单下拉列表框
密码框实例 <input type=“text” name=“username” value=“请 输入用户名”/> <br/> <input type="password" name="password" value="请 输入密码“/>
两者的唯一区别
查看源码
按钮 普通按钮 <input type="button“/>
查看源码
单选按钮类型
radio用于单选，有以下属性
(1) name 定义控件名称 (2) value 定义控件的值 (3) checked 设定控件初始状态是被选中的 (4) onclick 定义控件被选中时要执行的函数 (5) onfocus 定义控件为焦点时要执行的函数
当为单选项时，所有按钮name属性必需相同
普通按钮
wk.baidu.com
当这个按钮被点击时，默认不会有任何的效果 必须调用属性onclick指定的函数 在使用这个按钮时，一般配合使用value指定在它上面显示的文字 用onclick指定一个函数，一般为JavaScript的一个方法
按钮实例
<form id="form1" name="form1" method="post" action=""> <input type="button" onclick="msg()" value="点击我"/> </form>
JavaScript函数
复选框实例
<input type=“checkbox” name=“yinliao” value=“kkkl”>可口可乐 可口可乐
1. 注意这里的value值 2. name可以相同也可 3.
以不同 相同name属性的复 选框可以看成一组 checked=“checked” 表示默认被选中
8．表单事件处理按钮 <input type="submit|reset" >
单行的文本框 (1)name定义控件名称 (2)value指定控件初始值, (3)size指定控件宽度 属性及说明 (4)maxlength表示该文本输入框允许输入 的最大字符数 (5)onchang 当文本改变时要执行的函数 (6)onselect 当控件被选中时要执行的函数 (7)onfocus 当文本接受焦点时要执行的函数
作业
完成一个网站用户注册的页面 要求：
需要有账号，密码 个人详细信息 个人兴趣爱好 网站服务条款 注册和取消按钮