26、深入探索HTA界面元素的添加与使用

珊珊333333

于 2025-11-17 09:51:02 发布

阅读量4

点赞数

CC 4.0 BY-SA版权

分类专栏： VBScript编程入门精讲文章标签： HTA CSS 界面元素

本文链接：https://blog.youkuaiyun.com/css33/article/details/155116543

VBScript编程入门精讲专栏收录该内容

31 篇文章 ¥499.90

订阅专栏¥69.90

会员秒杀 ¥9.9 重磅福利

超级会员免费看

深入探索HTA界面元素的添加与使用

1. CSS规则对HTA样式的影响

在HTA（HTML应用程序）中，CSS规则可以显著改变界面元素的外观。例如，以下CSS规则将影响HTA中不同元素的样式：

font-style: italic;
color: blue;
}
/*This rule formats an element whose id = p1*/
#p1 {
color: red;
}

第一个CSS规则会修改HTA中所有 <h1> 标签内文本的外观，将文本颜色变为紫色，使其下划线并居中显示。第二个规则影响段落的呈现，将段落文本显示为粗体、斜体且蓝色。第三个规则应用于ID为 p1 的特定元素，CSS通过在ID前加 # 字符来表示ID选择器。当第三个规则中的颜色属性与第二个规则冲突时，CSS会使用更具体选择规则中的颜色属性来覆盖较不具体选择规则中的颜色属性。

2. 添加界面元素

之前已经了解了如何向HTA添加文本控件和按钮控件，现在深入探讨这些控件的构建方式以及其他可添加到HTA的控件类型，包括单选按钮、复选框、各种列表框和文本控件等。

如果在开发HTA时需要帮助，可以考虑下载HTA Helpomatic。它是微软提供的免费工具，可协助开发脚本代码。它会列出HTA元素（如按钮、复选框和文本区域控件），并显示生成这些控件所需的HTML代码，还会显示可用于为每个控件生成子程序的程序代码。要获取HTA Helpomatic，可访问 www.microsoft.com/download/en/default.aspx 并搜索其名称。

3. 使用 `<input>` 标签创建界面控件

<input> 标签是最通用的HTML标签之一，可用于创建多种不同类型的界面控件，包括：
- 文本字段控件
- 密码字段控件
- 复选框控件
- 单选按钮控件
- 按钮控件

要使用 <input> 标签指定所需的控件类型，需使用 <input> 标签的 type 属性指定控件类型，并使用以下语法指定其他一些控件属性：

<input type=”ControlType” name=”ControlName” value=”ControlValue” onClick=”FunctionName”>

以下表格概述了上述示例中 <input> 标签各属性的功能：
| 属性 | 描述 |
| ---- | ---- |
| type | 指定要放置在应用程序窗口上的控件类型（文本、密码、复选框、单选、按钮） |
| name | 指定分配给控件的名称，以便可以通过编程方式引用它 |
| value | 控件显示的标签或分配给控件的默认数据 |
| onClick | 控件被选中时调用的函数或子程序的名称 |

4. 添加文本控件

如果在HTA的 <body> 部分放置一个 <input> 标签，并将其 type 属性的值设置为 text ，则会在应用程序窗口中添加一个单行文本控件。该文本控件由一个带有内嵌边框的矩形文本字段组成，用于收集少量文本输入。以下示例展示了如何向HTA添加文本控件：

<p>
<label for = “userName”>Enter your name:</label>
<input type=”text” name=”textBox” id = “userName” size=”50” maxlength = “50”>
</p>

这里， <input> 标签包含一些额外的可选属性，用于进一步配置生成的文本控件：
- size ：指定文本控件的宽度（以字符数为单位）。
- maxlength ：指定文本控件可以存储的输入字符总数（包括空格）。

以下是一个展示文本和按钮控件使用的HTA示例：

<html>
<head>
<title>Text Box Demo</title>
<HTA:APPLICATION
ID=”htaTextBoxApp”
APPLICATIONNAME=Text Box Demo”
SCROLL=”auto”
SINGLEINSTANCE=”yes”
>
</head>
<script language=”VBScript”>
Sub Window_OnLoad
self.resizeTo 600, 300
End Sub
Sub ShowResult
MsgBox “Hello “ & textBox.value
textBox.value = “”
End Sub

#### 5. 添加密码控件
密码控件是一种特殊类型的文本控件，它使用星号或圆点字符来掩盖输入内容，防止被他人窥视。要向HTA添加密码控件，可添加一个`<input>`标签，并将其`type`属性的值设置为`password`，示例如下：
```html
<p>
<label for = “passwordBox”>Enter your password:</label>
<input type = “password” name = “passwordBox” id=”passwordBox” size = “20” maxlength = “10” >
</p>

在运行Windows 7的计算机上使用该示例为HTA提供GUI时，即使在密码控件中输入了九个字符，也不会显示任何可见内容。

6. 添加复选框控件

复选框控件是收集用户输入的另一种方式。它由一个小方块组成，用户可以点击来选择或取消选择。选中时，复选框内会显示一个对勾或类似字符；未选中时则显示为空框。

复选框控件可用于显示一组选项，每个复选框独立工作。创建复选框控件时，需在HTA中添加一个 <input> 标签，并将其 type 属性设置为 checkbox 。每个复选框必须分配一个唯一的名称和值，还可以通过将 checked 属性的值设置为 checked 来预先选中某个复选框。

以下示例展示了在HTA中使用复选框控件的方法：

<html>
<head>
<title>Checkbox Demo</title>
<HTA:APPLICATION
ID=”htaCheckBoxApp”
APPLICATIONNAME=”Checkbox Demo”
SCROLL=”auto”
SINGLEINSTANCE=”yes”
>
</head>
<script language=”VBScript”>
Sub Window_OnLoad
self.resizeTo 600, 300
End Sub
Sub ShowResult
strChoices = vbCrLf
If ChkBox1.Checked then strChoices = strChoices & “* “ & ChkBox1.value & vbCrLf
If ChkBox2.Checked then strChoices = strChoices & “* “ & ChkBox2.value & vbCrLf
If ChkBox3.Checked then strChoices = strChoices & “* “ & ChkBox3.value & vbCrLf
If ChkBox4.Checked then strChoices = strChoices & “* “ & ChkBox4.value & vbCrLf
If ChkBox5.Checked then strChoices = strChoices & “* “ & ChkBox5.value
MsgBox “You selected: “ & strChoices
End Sub
</script>
<body>
<label>Pick your toppings:</label>
<p>
<input type=”checkbox” name=”ChkBox1” value=”Cheese” checked> Cheese
<input type=”checkbox” name=”ChkBox2” value=”Pepperoni”> Pepperoni
<input type=”checkbox” name=”ChkBox3” value=”Sausage”> Sausage
<input type=”checkbox” name=”ChkBox4” value=”Ham”> Ham
<input type=”checkbox” name=”ChkBox5” value=”Veggie”> Veggie
</p>
<input type=”button” value=”Process” onClick=”ShowResult”>
</body>
</html>

<script> 标签内的 ShowResult 子程序用于检查每个复选框，确定哪些被选中。

7. 添加单选按钮控件

单选按钮控件与复选框控件类似，都允许用户选择预配置的选项。但不同的是，单选按钮控件需要组织成组，通过为同一组中的每个单选按钮分配相同的名称来实现。而且，单选按钮控件是互斥的，即同一组中只能选择一个单选按钮。

与复选框控件一样，应使用 <input> 标签的 value 属性为单选按钮分配一个值，以便识别哪个单选按钮被选中。如果需要，还可以使用 checked 属性预先选择组内的某个单选按钮。

以下示例展示了如何使用单选按钮控件：

<label>Pick a color:</label>
<p>
<input type=”radio” name=”radioButton” value=”Blue” checked> Blue<br>
<input type=”radio” name=”radioButton” value=”Red”> Red<br>
<input type=”radio” name=”radioButton” value=”Green”> Green<br>
<input type=”radio” name=”radioButton” value=”Yellow”> Yellow<br>
<input type=”radio” name=”radioButton” value=”Orange”> Orange
</p>
<input type=”button” value=”Process” onClick=”ShowResult”>

这里定义了一组名为 radioButton 的五个单选按钮，第一个被预先选中。点击按钮会执行 ShowResult 子程序，该子程序使用循环来确定哪个单选按钮被选中，并在 MsgBox() 弹出对话框中显示结果：

Sub ShowResult
For Each i in radioButton
If i.Checked Then
MsgBox “You selected: “ & i.value
End If
Next
End Sub

8. 添加按钮控件

可以使用 <input> 标签向HTA添加按钮控件，只需将 <input> 标签的 type 属性设置为 button 。按钮控件通常显示一个文本标签，用于指示其用途，可通过设置 <input> 标签的 value 属性来指定。按钮控件的主要作用是在被点击时触发 onClick 事件，通过为 onClick 事件分配一个子程序或函数名，可以触发其执行。

以下示例展示了如何使用 <input> 标签添加按钮控件：

<body>
<input type=”button” value=”Click on Me” onClick=”RunProgram”>
</body>

点击该按钮会执行 RunProgram 子程序，该子程序会在 MsgBox() 弹出对话框中显示一条文本消息：

Sub RunProgram
MsgBox “You clicked on the button!”
End Sub

除了使用 <input> 标签添加按钮控件，还可以使用 <button> 标签。使用 <button> 标签时，只需将其 type 属性的值设置为 button ，并配置其 onClick 事件以调用一个函数或子程序。还可以为按钮分配一个名称，以便在VBScript中以编程方式引用它。

以下示例展示了如何使用 <button> 标签向HTA添加按钮：

<body>
<button onClick=”RunProgram”>Click on Me</button>
</body>

从功能和显示效果来看，使用 <button> 标签添加的按钮控件与使用 <input> 标签添加的按钮控件没有明显区别。

9. 添加多行文本控件

之前通过将 <input> 标签的 type 属性的值设置为 text 来添加文本控件，这种文本控件适合收集少量文本。但如果需要收集多行文本，则需要使用 <textarea> 标签，它可以创建一个多行文本字段。字段的大小由分配给其 rows 和 cols 属性的数值指定。如果输入的文本量超过控件的大小，控件会自动启用滚动条。

以下示例展示了该控件的使用方法，该控件被配置为10行高、60个字符宽：

<label>Type something here:</label>
<p>
<textarea name=”textBox” rows=”10” cols=”60”></textarea>
</p>
<input type=”button” value=”Process” onClick=”ShowResult”>

可以通过指定控件的名称和 value 属性来以编程方式访问输入到该控件中的内容，示例如下：

Sub ShowResult
MsgBox “You typed: “ & textBox.value
textBox.value = “”
End Sub

如果需要，还可以预先在控件中填充文本，示例如下：

<label>Type something here:</label>
<p>
<textarea name=”textBox” rows=”10” cols=”60”>
This text will be displayed within the multi - line text box control when it is initially displayed.
</textarea>
</p>
<input type=”button” value=”Process” onClick=”ShowResult”>

10. 处理列表控件

列表控件也是一类有用的控件，包括列表框控件、下拉列表框控件和多行列表控件。与复选框和单选按钮控件一样，列表控件会显示一组预定义的选项，用户可以从中选择。

添加列表框 ：列表框控件显示一组预定义的选项，用户可以从中进行单项选择。选择列表中的项目可以触发一个事件，但更常见的做法是添加一个按钮控件来触发事件，这样用户可以在发起处理之前进行选择、更改选择。

添加列表框时，需要结合使用 <select> 和 <option> 标签。首先使用 <select> 元素定义控件，示例如下：

<label>Pick Your Size</label>
<p>
<select size=”4” name=”PickSize” onChange=”ShowResult”>
</select>
</p>

当前配置下，任何选择都会触发 ShowResult 子程序的执行。接下来，需要在 <select> 标签内嵌入多个 <option> 标签来填充列表项，示例如下：

<p>
<label>T - shirt Size Options:</label>
<select size=”1” name=”PickSize” onChange=”ShowResult”>
<option value=”“>Pick your size</option>
<option value=”Small”>Small</option>
<option value=”Medium”>Medium</option>
<option value=”Large”>Large</option>
<option value=”X - Large”>X - Large</option>
</select>
</p>

以下是一个完整的使用列表框控件的HTA示例：

<html>
<head>
<title>List Box Demo</title>
<HTA:APPLICATION
ID=”hta:ListBoxApp”
APPLICATIONNAME=”List Box Demo”
SCROLL=”auto”
SINGLEINSTANCE=”yes”
>
</head>
<script language=”VBScript”>
Sub Window_OnLoad
self.resizeTo 600, 300
End Sub
Sub ShowResult
If PickSize.value <> “” Then
MsgBox “You selected “ & PickSize.Value & “.”
End If
End Sub
</script>
<body>
<p>
<select size=”4” name=”PickSize” onChange=”ShowResult”>
<option value=”Small”>Small</option>
<option value=”Medium”>Medium</option>
<option value=”Large”>Large</option>
<option value=”X - Large”>X - Large</option>
</select>
</p>
</body>
</html>

可以通过引用控件的 value 属性来以编程方式确定列表框中哪个项目被选中。

添加多选列表框 ：多选列表框是列表框控件的一种变体，用户可以选择多个项目。要选择多个项目，用户只需在点击列表中的不同项目时按住 Alt 键。多选列表框的构建方式与列表框控件基本相同，但需要指定 size 属性的值为2或更大，并在 <select> 标签的开头添加 multiple 关键字。

与列表框控件不同，不能使用 onClick 事件来触发脚本执行，否则脚本会在第一次选择时就执行。应使用另一个控件（如按钮控件）来发起脚本执行，这样用户可以在发起处理之前选择所需的多个项目。

以下示例展示了如何向HTA添加多选列表框：

<p>
<select size=”4” name=”PickTeam” multiple>
<option value=”Small”>Small</option>
<option value=”Medium” selected=”selected”>Medium</option>
<option value=”Large”>Large</option>
<option value=”X - Large”>X - Large</option>
</select>
</p>
<input type=”button” value=”Process” onClick=”ShowResult”>

需要使用循环来处理多选列表框，以确定哪些项目被选中：

Sub ShowResult
strChoices = vbCrLf
For Each i in PickTeam.Options
If i.Selected Then
strChoices = strChoices & i.Value & vbCrLf
End If
Next
MsgBox “You selected: “ & strChoices
End Sub

添加下拉列表框 ：下拉列表框也是常用的控件之一，它同样使用 <select> 和 <option> 标签构建。下拉列表框可以节省空间，它可以在需要时下拉显示大量项目，而不需要像列表框控件那样占用大量空间。下拉列表框的构建方式与列表框基本相同，只是 size 属性的值设置为1（设置为其他值则会显示为列表框）。

以下示例将前面的列表框转换为下拉列表框：

<p>
<label>T - shirt Size Options:</label>
<select size=”1” name=”PickSize” onChange=”ShowResult”>
<option value=”“>Pick your size</option>
<option value=”Small”>Small</option>
<option value=”Medium”>Medium</option>
<option value=”Large”>Large</option>
<option value=”X - Large”>X - Large</option>
</select>
</p>

在 <select> 标签后添加一个额外的 <option> 标签，这样可以通过编程方式确定用户是否实际进行了选择。点击下拉列表框触发 ShowResult 子程序时，会根据选择情况显示相应消息：

Sub ShowResult
If PickSize.value <> “” Then
MsgBox “You selected “ & PickSize.Value & “.”
End If
End Sub

综上所述，通过合理运用各种界面控件，可以为HTA创建出功能丰富、交互性强的用户界面。在实际开发中，可根据具体需求选择合适的控件，并按照相应的操作步骤进行添加和配置。