Microsoft HTA/Buttons and forms: Difference between revisions

Latest revision as of 22:58, 17 May 2022

< Microsoft HTA/Changing Internet Explorer Version!Microsoft HTA/Using VBScript >

Before learning how to use VBScript in your HTA programs, you should know about HTML buttons and forms. Forms are declared with the form tag. There are two ways to send form data, GET and POST. POST is more secure, but the difference does not matter in offline HTA programs. A form tag is declared similarly to <form action="doThis();" method="get" name="myFormName"> ... </form>. The action attribute can contain a JavaScript function which can let you handle the form data after it is submitted. The method attribute is the method (GET or POST) used to send the form data. Finally, the name attribute is used in JavaScript to access the contents of the form.

Forms use input and label tags to display their interface to the user. An input tag contains three required attributes and multiple other optional attributes:

type: The type of control. Some important ones are submit for submit buttons, text for text fields, and password for passwords and sensitive information. Values explained later on.
id: The ID your control has. Must be different from other control IDs in the same form.
name: A control's name. You can use the name of a control to access it within If you do not know what to set this to, just set it to the control's ID.
size: (Optional) The size of your control. This attribute is for text controls.
placeholder: (Optional) The text that appears when a text control is empty.
value: (Optional) The selected option in a control that is set when the form is initially loaded.

The only attribute required for a <label> field is for. Set the value of this attribute to the matching control's ID.

You can put br tags in between two controls to stack them vertically.

Once a form is submitted, you can handle the form using JavaScript with document.forms. Make sure to use the values of the name attributes of the form and control you want to query! For example, in the code sample below, the value of the form's name attribute is helloForm and the value of the control's name attribute is name.

Language: JavaScript

function handleForm() {
  var name = document.forms["helloForm"]["name"].value;
  if(name != "") {
    alert("Hello, " + name + "!");
  }
  else {
    alert("Error: Name not provided!");
  }
}

Types of Form Controls

These form control types can be used as an argument to the type attribute of a input element.

submit: Shows a "Submit" button which calls the function in the action attribute of the form element when pressed.
reset: Shows a "Reset" button which resets the values of all form controls in the form element when pressed.
text: Basic text field.
password: Text field which hides its value.
email: Text field with validation for email addresses.
checkbox: Check box.
file: File upload button.
radio: Radio button.

There are other type attribute values but they are less common. You can search for them if you would like to learn about the other type attribute values.

When the value attribute is used on a control which is a reset or submit button control, it changes the text inside of the button.

Buttons

Buttons are declared using the <button> element. The most important attribute is onclick, which triggers a JavaScript or VBScript function when the button is clicked. A button which says "Click Me" may look like <button onclick="whenClicked();">Click Me</button>.

Advanced Controls

This section explains the text area element, grouping form controls with the fieldset and legend elements, and the usage of the select control.

Text Areas

The textarea element is a way to make a large text field with vertical size. It has many of the same attributes as the input element, but the size attribute is replaced with the cols attribute. There is a new attribute for vertical size called rows. A simple text area may look like <textarea rows="5" cols="15" id="test" name="test"></textarea>.

Grouping Controls

Form controls can be grouped using the fieldset element. It has no attributes and it is a container for all of the form controls inside of the group. The first element inside of a fieldset should be the legend element. The title of the group of controls should be placed inside of the legend element. An example of control grouping is shown below.

Language: HTA

<form action="handleForm();" method="post">
  <fieldset>
    <legend>Required</legend>
    <label for="username">Username:</label>
    <input type="text" id="username" name="username">
    <br>
    <label for="password">Password:</label>
    <input type="password" id="password" name="password">
    <br>
    <label for="confirm">Confirm password:</label>
    <input type="password" id="confirm" name="confirm">
  </fieldset>
  <label for="email">Email address:</label>
  <input type="email" id="email" name="email">
  <br>
  <input type="submit" value="Create an account">
</form>

Dropdown Boxes

Dropdown controls are fairly complex compared to other controls. Instead of the input element, you use the select element for dropdown boxes. The id and name attributes are required for the select element. Inside of the select element, you can put option elements which can be selected by the user. The content between the opening and closing tags is the name of the dropdown option, and the required value attribute is required for option elements and serves a similar purpose to the id attribute. Optionally, you can group dropdown options by using optgroup elements containing the group of options. optgroup elements require the label attribute, which is the label displayed above the group of options. An example of a form using dropdown menus is below.