HTML 5 Common Control Attributes
Mastering HTML5 - Part 15
Forward: In this part of the series, we look at attributes that are common to all control elements.
By: Chrysanthus Date Published: 22 Jul 2012
Introduction
Note: If you cannot see the code or if you think anything is missing (broken link, image absent. Etc.), just contact me at forchatrans@yahoo.com. That is, contact me for the slightest problem you have about what you are reading.
Form owning Controls
When a control is typed as content within the tags of the Form controls, the control is said to have the Form as the parent. The Form is said to own the control.
You can actually separate a control from a Form in your code. In this case the Form element has to know that it owns the control. Each control can have an attribute called the form attribute. The value of the form attribute is the ID of the Form. In this situation the Form needs to have an ID. The connection between the control and the Form is through the form attribute in the control’s tag and the ID of the Form element. The following code illustrates this:
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<p><label>First Name: <input type="text" name="fname" form="F1"></label></p>
<form method="post" action="http://somesite/file.ext" id="F1">
<button type="submit">Send</button>
</form>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<p><label for="fn">First Name: </label>
<p><input type="text" name="fname" form="F1" id="fn"></p>
<form method="post" action="http://somesite/file.ext" id="F1">
<button type="submit">Send</button>
</form>
</body>
</html>
In this code, when the form is submitted, the name and value of the input text control will be part of the data set sent to the server by the form. A data set is all the name/value pairs of a Form.
Enabling and Disabling Controls
Any form control, by default is enabled. This means that the control can be used by the user. If you do not want a control to be used, while it is displayed, you have to disable it; you use the disabled attribute for this: The disabled attribute is a Boolean attribute. Its presence disables the control and its absence enables the control. Read and try the following code:
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<p><label>name: <input type="text" name="name" disabled></label></p>
<p><button type="button" disabled>Name of Button</button></p>
</body>
</html>
When a web page is just loaded, in many cases it is the first focusable element at the top that receives focus. You can force a control in the form to receive focus as soon as the page is loaded. It is a simple thing to do. You use the autofocus attribute. This attribute is a Boolean attribute. The following is a hypothetical example in which the email control receives focus first. Read and try the code:
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<p><label>name: <input type="text" name="name" ></label></p>
<p><label>Email: <input type="email" name="email" autofocus></label></p>
<p><button type="button" >Name of Button</button></p>
</body>
</html>
As soon as this page is loaded, you will see the I-bar flashing in the email control. At that moment, any alphabet you type on the keyboard goes into the email control.
That is it for this part of the series. We stop here and continue in the next part.
Chrys
Related Links
Major in Website DesignWeb Development Course
HTML Course
CSS Course
ECMAScript Course
NEXT