第四章 HTML 控件和 Web 服务器控件
-
Upload
tatyana-watkins -
Category
Documents
-
view
169 -
download
7
description
Transcript of 第四章 HTML 控件和 Web 服务器控件
![Page 2: 第四章 HTML 控件和 Web 服务器控件](https://reader033.fdocuments.net/reader033/viewer/2022061415/56813572550346895d9cd5d5/html5/thumbnails/2.jpg)
软件学院
回顾内容
HTML 控件特点HTML 控件属性
![Page 3: 第四章 HTML 控件和 Web 服务器控件](https://reader033.fdocuments.net/reader033/viewer/2022061415/56813572550346895d9cd5d5/html5/thumbnails/3.jpg)
软件学院
回顾 -- HTML 控件
HTML 控件外观上与普通的 HTML标记很相似,由 HTML 标记衍生而来,属于 System.Web.UI.HtmlControls 命名空间,并在 ASP.NET 页中声明为一个由 runat=“server” 属性标记的 HTML 元素。
![Page 4: 第四章 HTML 控件和 Web 服务器控件](https://reader033.fdocuments.net/reader033/viewer/2022061415/56813572550346895d9cd5d5/html5/thumbnails/4.jpg)
软件学院
回顾 -- HTML 控件的优点 HTML 标记加上 runat=server 属性后,
即可变为 HTML 控件。 HTML 控件将 HTML 标记对象化,其属
性可以由程序直接控制。 HTML 控件支持事件处理,可以以事件
触发方式来编写程序。
![Page 5: 第四章 HTML 控件和 Web 服务器控件](https://reader033.fdocuments.net/reader033/viewer/2022061415/56813572550346895d9cd5d5/html5/thumbnails/5.jpg)
软件学院
回顾– HTML 控件常用属性
Style 属性 Attributes 属性 Visible 属性 Disabled 属性 InnerHtml 属性 InnerText 属性
![Page 6: 第四章 HTML 控件和 Web 服务器控件](https://reader033.fdocuments.net/reader033/viewer/2022061415/56813572550346895d9cd5d5/html5/thumbnails/6.jpg)
软件学院
1 Style 属性 Style 属性可以设定的样式:样式名称 说明 设定值Background-Color 背景色 RDB 或指定颜色Color 前景色 RDB 或指定颜色Font-Family 字型 标楷体Font-size 字体大小 20pt
Font-Style 斜体 Italic 或 Normal
Font-Weight 粗体 Bold 或 Normal
Text-Decoration 效果Text-Transform 转大小写
![Page 7: 第四章 HTML 控件和 Web 服务器控件](https://reader033.fdocuments.net/reader033/viewer/2022061415/56813572550346895d9cd5d5/html5/thumbnails/7.jpg)
软件学院
2 Attributes 属性 Attributes 属性使用注意事项
对于有些控件指定的属性不合法指定的属性不是对应 HTML 标记所
支持的
![Page 8: 第四章 HTML 控件和 Web 服务器控件](https://reader033.fdocuments.net/reader033/viewer/2022061415/56813572550346895d9cd5d5/html5/thumbnails/8.jpg)
软件学院
教学目标
掌握常用 HTML 控件
![Page 9: 第四章 HTML 控件和 Web 服务器控件](https://reader033.fdocuments.net/reader033/viewer/2022061415/56813572550346895d9cd5d5/html5/thumbnails/9.jpg)
软件学院
教学重难点
重点HTML 控件应用
难点HTML 控件各个属性
![Page 10: 第四章 HTML 控件和 Web 服务器控件](https://reader033.fdocuments.net/reader033/viewer/2022061415/56813572550346895d9cd5d5/html5/thumbnails/10.jpg)
软件学院
4.2 基本 HTML 控件
HtmlTextArea 控件 HtmlTable 控件 HtmlImage 控件 HtmlSelect 控件 HtmlInput 控件
![Page 11: 第四章 HTML 控件和 Web 服务器控件](https://reader033.fdocuments.net/reader033/viewer/2022061415/56813572550346895d9cd5d5/html5/thumbnails/11.jpg)
软件学院
4.2.1 HtmlTextArea 控件 该控件可以在 Web 页上创建多行文
本框。多行文本框的高度和宽度可以通过 rows 和 cols 属性控制,设置或获取多行文本框的文本内容,使用的是 Value 属性。
![Page 12: 第四章 HTML 控件和 Web 服务器控件](https://reader033.fdocuments.net/reader033/viewer/2022061415/56813572550346895d9cd5d5/html5/thumbnails/12.jpg)
软件学院
4.2.2 HtmlTable 控件 该控件用来生成表。可以使用 Html
Table 、 HtmlTableRow 、 HtmlTableCell 控件来自由地控制表格的行、列数。将创建好的行添加到表的 Rows 集合中,将创建好的单元格,添加到行的 Cells 集合中,形成表。
![Page 13: 第四章 HTML 控件和 Web 服务器控件](https://reader033.fdocuments.net/reader033/viewer/2022061415/56813572550346895d9cd5d5/html5/thumbnails/13.jpg)
软件学院
4.2.3 HtmlImage 控件 实用 HtmlImage 控件可以在 Web
页上显示图像,并且可以通过编程动态控制显示图像的大小、图像相对于其他控件的对齐方式以及更改图像本身。
![Page 14: 第四章 HTML 控件和 Web 服务器控件](https://reader033.fdocuments.net/reader033/viewer/2022061415/56813572550346895d9cd5d5/html5/thumbnails/14.jpg)
软件学院
4.2.3 HtmlImage 控件 HtmlImage 控件的主要属性有:
Src 属性:图像文件Align 属性:对齐方式Alt 属性:无法加载时,显示文字Border 属性:图像边界宽度Height 、 Width 属性:长、宽值
![Page 15: 第四章 HTML 控件和 Web 服务器控件](https://reader033.fdocuments.net/reader033/viewer/2022061415/56813572550346895d9cd5d5/html5/thumbnails/15.jpg)
软件学院
4.2.4 HtmlSelect 控件 使用该控件创建选择框,通过将 <o
ption> 元素放在开始和结束 <select> 标记之间来指定控件中的项列表。
ListItem 的 Text 属性用于指定显示的文本, Value 属性用于将一个不同于文本的值与该项关联。
![Page 16: 第四章 HTML 控件和 Web 服务器控件](https://reader033.fdocuments.net/reader033/viewer/2022061415/56813572550346895d9cd5d5/html5/thumbnails/16.jpg)
软件学院
4.2.4 HtmlSelect 控件 Size 属性用于控制该控件的高度,
Multiple 属性用于控制该控件是否可以多选。
SelectedIndex 属性用于获取选定项的索引,可以从 Items 集合中检索该项。
![Page 17: 第四章 HTML 控件和 Web 服务器控件](https://reader033.fdocuments.net/reader033/viewer/2022061415/56813572550346895d9cd5d5/html5/thumbnails/17.jpg)
软件学院
4.2.5 HtmlInput 控件 HtmlInput 控件根据 Type 属性的设
定产生不同种类的控件。HtmlInputButton 控件HtmlInputCheckBox 控件HtmlInputText 控件HtmlInputHidden 控件HtmlInputRadioButton 控件HtmlInputFile 控件
![Page 18: 第四章 HTML 控件和 Web 服务器控件](https://reader033.fdocuments.net/reader033/viewer/2022061415/56813572550346895d9cd5d5/html5/thumbnails/18.jpg)
软件学院
1 HtmlInputButton 控件 根据 type 属性的不同设置,可以创建
命令按钮、提交按钮和重置按钮。 用户单击 HtmlInputButton 控件时,
嵌有该控件的窗体输入被送到服务器并得到处理,然后将处理结果发送回请求浏览器。
重置按钮不支持 ServerClick 事件。
![Page 19: 第四章 HTML 控件和 Web 服务器控件](https://reader033.fdocuments.net/reader033/viewer/2022061415/56813572550346895d9cd5d5/html5/thumbnails/19.jpg)
软件学院
2 HtmlInputCheckBox 控件 单击该控件时,不会向服务器回送。
当使用回送服务器控件时,复选框的状态被发送到服务器进行处理。
Checked 属性用于获取或设置是否选中该复选框。
OnServerChange 方法只有提交页面同时当更改了选择状态时发生。
![Page 20: 第四章 HTML 控件和 Web 服务器控件](https://reader033.fdocuments.net/reader033/viewer/2022061415/56813572550346895d9cd5d5/html5/thumbnails/20.jpg)
软件学院
3 HtmlInputText 控件 单行文本框,当 type 属性为 passwor
d 时屏蔽文本框内容。 使用 MaxLength 、 Size 和 Value 属
性,可以控制文本框输入的最大字符数、文本框宽度和文本框的内容。
![Page 21: 第四章 HTML 控件和 Web 服务器控件](https://reader033.fdocuments.net/reader033/viewer/2022061415/56813572550346895d9cd5d5/html5/thumbnails/21.jpg)
软件学院
4 HtmlInputHidden 控件 此控件是窗体的一部分,但永远不在窗
体上显示。此控件通常与 HtmlInputButton 和 HtmlInputText 控件一起使用,以在对服务器的发送之间存储信息。
![Page 22: 第四章 HTML 控件和 Web 服务器控件](https://reader033.fdocuments.net/reader033/viewer/2022061415/56813572550346895d9cd5d5/html5/thumbnails/22.jpg)
软件学院
5 HtmlInputRadioButton 控件
此控件在 Web 页上创建单选按钮。有两个重要属性。Name 属性:用于获取或设置 HtmlInputRadio
Button 关联的组的名称,多个控件设置同一个name 属性,可以实现互相排斥功能。
Checked 属性:获取或设置单选按钮是否被选中。
![Page 23: 第四章 HTML 控件和 Web 服务器控件](https://reader033.fdocuments.net/reader033/viewer/2022061415/56813572550346895d9cd5d5/html5/thumbnails/23.jpg)
软件学院
5 HtmlInputRadioButton 控件
此控件不会自动向服务器回送。必须依赖使用某个按钮控件来回送到服务器。
ServerChange 事件只为更改成选中状态的单选按钮引发。
![Page 24: 第四章 HTML 控件和 Web 服务器控件](https://reader033.fdocuments.net/reader033/viewer/2022061415/56813572550346895d9cd5d5/html5/thumbnails/24.jpg)
软件学院
6 HtmlInputFile 控件 HtmlInputFile 可以用来向服务器端上传
文件。 要使得文件上载能够成功,需要满足:
1. 控件必须出现在 Form 元素中2. 必须为该控件指定 Name 标签属性的值3.form 元素的 method 属性值必须为 post4.form 元素的 enctype 标签属性值为 multi
part/form-data
![Page 25: 第四章 HTML 控件和 Web 服务器控件](https://reader033.fdocuments.net/reader033/viewer/2022061415/56813572550346895d9cd5d5/html5/thumbnails/25.jpg)
软件学院
下次课内容
Web服务器控件