Clickable dojo labels

Question

If you're using dojo form inputs and want to have labels for them like that:

<label for="???">Email</label>
<input
  type="text"
  name="email"
  dojoAttachPoint="email"
  dojoType="dijit.form.TextBox"
/>

the label is not clickable, because there is no way of knowing the id of the input before it's rendered.

Does there exist a solution for this other than hacking an id in that dojo generates for that element?

UPDATE

It's actually even more difficult than I thought, because the input field in dojo gets rendered as

<div class="dijit dijitTextBox" id="widget_dijit_form_TextBox_0">
  <input class="dijitReset dijitInputField" value="Χ" type="text" tabindex="-1">
  ...
</div>

and the underlying input field doesn't have an id

Answer 1

Did you try giving an id to the input?

<label for="myIdComesHere">Email</label>
<input
  id="myIdComesHere"
  type="text"
  name="email"
  dojoAttachPoint="email"
  dojoType="dijit.form.TextBox"
/>

---

If I recall correctly, this id can be used both by dojo.byId (to fetch the domNode aka the input tag) and by dijit.byId (to fetch the dijit Widget instance)

Answer 2

If you're creating the form inside of a widget, you can use this.id to get the id of that instance of the widget.

If your widget is called my.form, the ID of the widget will be my_form_0 and will increment for each new form widget created.

To create a unique ID for your form elements, use

var id = this.id + '_email';

'<label for="' + id + '"/>'
'<input type="text" id="' + id + '"/>'

That will give you

<label for="my_form_0_email"/>
<input type="text" id="my_form_0_email"/>

If you're creating the input using the dijit.form.TextBox, that textbox will ALWAYS have a unique ID on your page. The actual <input> dom element inside the widget will have the ID that's found by grabbing the ID of the widget.

If you create the TextBox programatically, you can do the following:

var tb = new dijit.form.TextBox(),
    label = dojo.create("label", {for: tb.id});