New Entries Added Almost Daily!
Click here to get on our Mailing List

Input

Using the Input Controls

In this tutorial you will learn how to use the Input Controls

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.

	<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="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">
	

Want to learn more? Request this via the contact form.

You can find more about this by searching the website.

By: Alex Hedley

Click here to sign up for more FREE tips