Conceptually, a control differs from a behavior in the sense that instead of just providing client functionality, a control usually represents or wraps the element, to provide additional properties and methods that extend its programming interface.

        <pre data-sub="prettyprint:_">
        Type.registerNamespace('Samples');
        Samples.EmptyControl = function(element) {
        Samples.EmptyControl.initializeBase(this, [element]);
        }
        Samples.EmptyControl.prototype = {
        initialize : function() {
        Samples.EmptyControl.callBaseMethod(this, 'initialize');
        },
        dispose : function() {
        Samples.EmptyControl.callBaseMethod(this, 'dispose');
        }
        }
        Samples.EmptyControl.registerClass('Samples.EmptyControl',
        Sys.UI.Control);

        //creating controls
        $create(Samples.EmptyControl, {}, {}, {}, $get('elementID'));
        </pre>


        <p>Because controls are client components, you can access them with the $find method. However, the Id of control can't be set programatically. It is automatically set by the SysUI.Control calss to the same ID as the associated element. You can get a reference to the control by passing the ID of the associated DOM element to $find. Another way to access a control is through the associated element. Because an element can have one or only one associated control, a property called "control", which stores the reference to the control - is created on the DOM element when the control is initialized. Supposing that you have a DOM element stored in the someElement variable, the following statement accesses the associated control arne stores a reference in the controlInstance variable.</p>

        <pre data-sub="prettyprint:_">
        var controlInstance = someElement.control;
        </pre>

        <p>Below is textbox control's implementation code</p>

        <pre data-sub="prettyprint:_">
        Type.registerNamespace('Samples');

        // Samples.TextBox class.
        Samples.TextBox = function(element) {
        Samples.TextBox.initializeBase(this, [element]);

        this._ignoreEnterKey = false;
        }
        Samples.TextBox.prototype = {
        // Component lifecycle.
        initialize : function() {
        Samples.TextBox.callBaseMethod(this, 'initialize');

        // Subscribe to the keypress event.
        $addHandlers(this.get_element(),
        {keypress:this._onKeyPress}, this);
        },

        dispose : function() {
        // Detach event handlers.
        $clearHandlers(this.get_element());

        Samples.TextBox.callBaseMethod(this, 'dispose');
        },

        // Handle the keypress event.
        _onKeyPress : function(evt) {
        if(this._ignoreEnterKey && evt.charCode == 13) {
        evt.preventDefault();
        }
        },

        // Properties.
        get_ignoreEnterKey : function() {
        return this._ignoreEnterKey;
        },

        set_ignoreEnterKey : function(value) {
        this._ignoreEnterKey = value;
        }
        }
        Samples.TextBox.registerClass('Samples.TextBox', Sys.UI.Control);

        //at the client side
        Sys.Application.add_init(pageInit);
        function pageInit() {
        $create(Samples.TextBox, {'ignoreEnterKey':true}, {}, {},
        $get('myTextBox'));
        }
        </pre>