How do I add a label to a text box (programmatically) :

el = new dijit.form.TextBox({label: '...' });
form.containerNode.appendChild(el.domNode);

this does not seem to work (dojo 1.6)

How do I add a label to a text box (programmatically) :

el = new dijit.form.TextBox({label: '...' });
form.containerNode.appendChild(el.domNode);

this does not seem to work (dojo 1.6)

• javascript
• textbox
• dojo
• label

4 Answers 4

Dojo provides dojox.layout.TableContainer for automatically pairing labels with controls:

var layout = new dojox.layout.TableContainer({
    showLabels: true,
    orientation: "horiz"
});

var textBox = new dijit.form.TextBox({
    name: 'text',
    title: 'My Label'
});

layout.addChild(textBox);
layout.placeAt(form.containerNode);
layout.startup();

jsfiddle (thanks for the template, @jumpnett)

I've never seen any example where the dijit.form.TextBox uses the lable property to actually display a label next to the TextBox. The label is always a seperate label element or textnode.

I believe the TextBox only has this property because it inherits it from dijit._Widget (according to the API docs).

To add a label programmaticaly, just append a seperate textnode or label element to the form's domNode:

dojo.require("dijit.form.Form");
dojo.require("dijit.form.TextBox");

function buildForm() {
    var form = new dijit.form.Form({
    }, dojo.doc.createElement('div'));

    var textBox = new dijit.form.TextBox({
        name: 'text'
    }, dojo.doc.createElement('input'));

    document.body.appendChild(form.domNode);
    form.domNode.appendChild(dojo.doc.createTextNode("My Label "));
    form.domNode.appendChild(textBox.domNode);
}

dojo.addOnLoad(buildForm);

Here is a full example on jsfiddle.

yourPlaceholder.domNode.appendChild(dojo.doc.createTextNode("Label Text"));
yourPlaceholder.addChild(yourTextBox);

I got it using following snippet :

dojo.place('<label for="field" > Label Name </label>',dojo.byId('TextField_Id'),'before');