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 Label
s for each control to aid in Accessibility. This helps for tabbing and if you click on a label it will select that control.
Username:
<label for="UserName">UserName:</label>
<input type="text" value="Alex" size="30" id="UserName" name="UserName">
UserName:
Password:
<label for="Password">Password</label>
<input type="password" id="Password" name="Password">
Password
Some other useful controls:
Hidden
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.
CustomerID
Checkbox
<label for="MailingList">Mailing List</label>
<input type="checkbox" id="MailingList" name="MailingList">
Mailing List
File
<label for="CV">CV</label>
<input type="file" id="CV" name="CV">
CV
An INPUT
might not be big enough, you can use a Textarea in it's place.
Textarea
<label for="info">Info: </label>
<textarea rows="5" cols="30" name="info" id="info">Lots of information.</textarea>
Info:
You may be familar with the COMBOBOX in Access, in HTML this is a SELECT control.
Select
<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>
Courses
Access Beginner 1
Access Beginner 2
Excel Beginner 1
Excel Beginner 2
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>
Courses
Access Beginner 1
Access Beginner 2
Excel Beginner 1
Excel Beginner 2
Radio buttons
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>
Gender
Male
Female
Submit Button
<input type="submit" value="Submit">
Reset Button
<input type="reset" value="Reset">
Input Button
<label for="TestButton">TestButton</label>
<input type="button" id="TestButton" name="TestButton" value="Test Button">
TestButton
Button
<label for="TestButton">TestButton</label>
<button type="button" onclick="alert('Hello world!')"
id="TestButton" name="TestButton">Click Me!</button>
TestButton
Click Me!
You can add these all into a HTA.
Sample Files
Controls.hta
By: Alex Hedley
Click here to sign up for more FREE tips