New Tips Added Weekly!
Click here to get on our Mailing List

Beginner - Level 2

Adding controls to the page

At the moment the page doesn't do much. It's a static page with just a few words on it. We can add some controls to add more functionality.

Say we want to add some input to retrieve data from the user, we can use some Input controls.

Start off with a Form.

	<form action="" method="">
	</form>
	

We can then start adding controls.

I like to add Labels for each control to aid in Accessibility. This helps for tabbing and if you click on a label it will select that control.

	<label for="UserName">UserName:</label>
	<input type="text" value="Alex" size="30" id="UserName" name="UserName">
	

	<label for="Password">Password</label>
	<input type="password" id="Password" name="Password">
	

Some other useful controls:

Just by changing the TYPE attribute you can hide a value.

	<label for="CustomerID">CustomerID</label>
	<input type="hidden" id="CustomerID" name="CustomerID">
	

You may wish to remove the Label as if it's hidden you wouldn't want it showing.

	<label for="MailingList">Mailing List</label>
	<input type="checkbox" id="MailingList" name="MailingList">	
	

	<label for="CV">CV</label>
	<input type="file" id="CV" name="CV">
	

An INPUT might not be big enough, you can use a Textarea in it's place.

	<label for="info">Info: </label>
	<textarea rows="5" cols="30" name="info" id="info">Lots of information.</textarea>
	

You may be familar with the COMBOBOX in Access, in HTML this is a SELECT control.

	<label for="courses">Courses</label>
	<select id="courses" name="courses">
		<option value="AB1">Access Beginner 1</option>
		<option value="AB2">Access Beginner 2</option>
		<option value="EB1">Excel Beginner 1</option>
		<option value="EB2">Excel Beginner 2</option>
	</select>
	

You can sub divide these using an OPTGROUP or Option Group.

	<label for="courses">Courses</label>
	<select id="courses" name="courses">
		<optgroup label="Access">
			<option value="AB1">Access Beginner 1</option>
			<option value="AB2">Access Beginner 2</option>
		</optgroup>
		<optgroup label="Excel">
			<option value="EB1">Excel Beginner 1</option>
			<option value="EB2">Excel Beginner 2</option>
		</optgroup>
	</select>
	

I like to surround similar controls in a group using a Fieldset. By adding a Legend you can better label this.

	<fieldset>
		<legend>Gender</legend>
		<label for="Male">Male</label>
		<input type="radio" name="radio" id="Male" value="Male">
		<br />
		<label for="Female">Female</label>
		<input type="radio" name="radio" id="Female" value="Female">
	</fieldset>
	

	<input type="submit" value="Submit">
	

	<input type="reset" value="Reset">
	

	<label for="TestButton">TestButton</label>
	<input type="button" id="TestButton" name="TestButton" value="Test Button">
	

	<label for="TestButton">TestButton</label>
	<button type="button" onclick="alert('Hello world!')" 
		id="TestButton" name="TestButton">Click Me!</button>
	

You can add these all into a HTA.

Sample Files
Controls.hta

By: Alex Hedley

Click here to sign up for more FREE tips