《表单和样式(3学时).ppt》由会员分享，可在线阅读，更多相关《表单和样式(3学时).ppt（28页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、Java与J2EE架构计算机学院Java与J2EE架构第2章 表单和样式2.1 Form表单2.2 样式Java与J2EE架构2.1 Form表单nform 元素为用户输入创建表单.n表单可包含文本框、复选框、单/多选按钮、命令按钮等.n表单通常用于向指定的 URL 提交用户数据。Java与J2EE架构基本结构 form元素标签 提交后跳转的页面id,name属性通常可省略传送数据的 方法Java与J2EE架构示例 用户名：密 码：跳转到数据处理页面get方法提交数据注意要用name属性才能在地址栏中显示Java与J2EE架构Form常用元素n文本框 密码框n单选框 复选框n列表框 n文件域n
2、文本区域n提交和重置按钮 一般按钮 图片按钮nfieldsetndiv和span【返回】Java与J2EE架构文本框用户名：【返回】Java与J2EE架构密码框 密码：【返回】Java与J2EE架构单选框同一组的多个单选框要求name必须相同 性别：男 女【返回】Java与J2EE架构复选框 爱好：足球 篮球同一组的多个复选框的name可以相同【返回】Java与J2EE架构列表框 内容1 内容n 可增加 selected=“selected”指定选中项一般不取相同值size=1 为下拉列表框(默认)size1 为列表框Java与J2EE架构专业：计算机科学与技术 软件工程 网络工程 下拉列表框
3、Java与J2EE架构专业特长：.NET编程 J2EE编程 C语言编程 列表框可多选【返回】列表框Java与J2EE架构文件域n 用于让浏览者选择本机的文件 附件：【返回】Java与J2EE架构文本区域文本域中预设的文本简历：文本框、密码框、文本区域均可添加属性 readonly=readonly【返回】Java与J2EE架构提交和重置按钮跳转到action属性指定的URL【返回】Java与J2EE架构一般按钮JavaScript代码【返回】Java与J2EE架构图片按钮鼠标事件【返回】Java与J2EE架构 标题 其他元素filedset标签【返回】登录 用户名:密 码:说
4、明：用户名和密码必填style样式属性Java与J2EE架构div和span标签n 是一个块级元素，浏览器通常会在 div 元素前后放置一个换行符。n是一个行内元素，SPAN 的前后是不会换行的。登录 用户名:*密 码:*说明：用户名和密码必填 padding定义元素的内边距【返回】Java与J2EE架构2.2 样式n样式是对 HTML 元素的一种格式化。n三种方法定义：n内联样式-在元素的style属性中定义(局部)n内部样式-在head 中通过 标签定义(页面级)n外部样式-在css文件中定义 (可被多个文件调用)更改一个样式文件可改变整个站点的外观【返回】Java与J2
5、EE架构内联样式示例学号:姓名:年龄:文字颜色背景色文字大小元素宽度px：像素点，最小单位；pt：磅，一般9pt=12px。em：百分比值(比例值)【返回】Java与J2EE架构内部样式示例1 body background-color:silver input background-color:yellow;font-size:12px 学号:姓名:年龄:所有input都将使用同一样式Java与J2EE架构内部样式示例2-改动一下 body background:url(123.jpg)no-repeat;.input1 background-color:yellow;font-size:1
6、2px#input2 background-color:red;font-size:16px 学号:姓名:年龄:背景图class属性调用#号前缀【返回】点号前缀id属性调用Java与J2EE架构 body background:url(123.jpg)no-repeat;.input1 background-color:yellow;font-size:12px#input2 background-color:red;font-size:16px 外部样式示例 学号:姓名:年龄:mystyle.css便于修改和维护【完】引用外部cssJava与J2EE架构form表单练习Java与J2EE架构css扩展阅读-一个网站示例