How do you map HTML <label> to asp.net form controls 1

[jupiter8]

I am adding form elements into a placeholder and as such asp.net appends info to the ID of the form control as shown below.

<input name="ctl00$ContentPlaceHolder1$txt_3" type="text" value="some text" id="ctl00_ContentPlaceHolder1_txt_3" />

so when I add my HTML label, it isn't going to work because its only got the ID that I assigned to the textbox and not the additional info that asp.net adds

<label for='txt_3'>my text box</label>

To illustrate this further, if I add a checkobox control asp.net renders the label automatically and gets it right

<input id="ctl00_ContentPlaceHolder1_chk_2" type="checkbox" name="ctl00$ContentPlaceHolder1$chk_2" checked="checked" />

<label for="ctl00_ContentPlaceHolder1_chk_2">Checkbox label</label>

I need the labels because accessibility is essential for the project in hand.

 

[ca8msm]

There are several ways. One method would be to make the label runat="server" and use the TextBox's ClientID property to set the for value of the label.


____________________________________________________________

Need help finding an answer?

Try the Search Facility or read FAQ222-2244 on how to get better results.

 

[jupiter8]

I tried using an ASP:Label control but that renders inside a <span> tag and not a <label> tag. Or are you suggesting adding the runat="server" tag to the HTML <label> element?

Oh one further complication is that I'm trying to do this dyamically from code-behind and previously it was with your help that I learnt how to do this.

I'm attempting to re-write some classic ASP survey generation code of mine and I'm so close.

 

[ca8msm]

Or are you suggesting adding the runat="server" tag to the HTML <label> element?

Yes, that's what I meant.

Another method would be to use a LiteralControl and write the whole tag out yourself e.g.

        Dim myLiteral As New LiteralControl
        myLiteral.Text = "<label for=""" & TextBox1.ClientID & """>"

____________________________________________________________

Need help finding an answer?

Try the Search Facility or read FAQ222-2244 on how to get better results.

 

[jupiter8]

Yes this works and I'm very grateful for this, but I now have the issue that the label appears after the text box. I guess that the textbox must be added to the form controls collection before you can add the label.


myText = New TextBox()
myText.Text = "input text"
myText.ID = "txt_3"
myText.MaxLength = 10
FormPanel.Controls.Add(myText)

myLiteral = New Literal
myLiteral.Text = "<label for='" & myText.ClientID & "'>my text box</label>"
FormPanel.Controls.Add(myLiteral)


Do you think that I can fix this by encapsulating the control in a div tag and use style sheets to position them. I really want this to be a simple as possible, the code needs to be ultra clean as its intended for a blind audience

 

[ca8msm]

I guess that the textbox must be added to the form controls collection before you can add the label.

Actually, I don't think it will matter. You are simply writing HTML to the page and it therefore isn't going to check whether the TextBox exists or not. Try swapping the order around so you write the LiteralControl out to the page first.

If that doesn't work, then you'll have to either use CSS or PlaceHolder's but I can't see a reason why it won't work.



____________________________________________________________

Need help finding an answer?

Try the Search Facility or read FAQ222-2244 on how to get better results.

 

[jupiter8]

if I do this

myText = New TextBox()
myText.Text = "input text"
myText.ID = "txt_3"
myText.MaxLength = 10

myLiteral = New Literal
myLiteral.Text = "<label for='" & myText.ClientID & "'>my text box</label>"
FormPanel.Controls.Add(myLiteral)

FormPanel.Controls.Add(myText)

I get this

<label for='txt_3'>my text box</label>

<input name="ctl00$ContentPlaceHolder1$txt_3" type="text" value="ghdfg" maxlength="10" id="ctl00_ContentPlaceHolder1_txt_3" />

 

[ca8msm]

Ah yes sorry! I forgot that the ClientID won't exist yet if the control hasn't been added!

In that case, you'll have to use CSS. I'd assign a CSSClass to the TextBox and also give a class to the <label>. Then, make the label's class float to the left of the TextBox's class.


____________________________________________________________

Need help finding an answer?

Try the Search Facility or read FAQ222-2244 on how to get better results.

 

[jupiter8]

Thanks once again for your help, I was determind not to have to resort to HTML form controls and loose all the nice .Net features. While it might not be great at least there is a way forward.

 

[ca8msm]

Yeah, there are some scenario's where ASP.NET causes a few problems but there are often simple workarounds.

You may actually want to have a look back at the first method I suggested as that may be easier to implement (as in that you wouldn't have to assign a class or write any CSS). As the label control will have already been created, you wouldn't have to worry about it's positioning - you'd only have to set the "for" attribute like you have already done.


____________________________________________________________

Need help finding an answer?

Try the Search Facility or read FAQ222-2244 on how to get better results.

 

[jupiter8]

I understand, at least I think I do, but the forms are generated on the fly from a database. I have no idea of what any given form will contain so it all has to be written out on the fly.

Its an old Classic ASP app I wrote several years ago that does the same sort of thing as surveymonkey or any of those type of sites. But mine is intended as an add on for my CMS.

I am hoping that adding in validation for these controls is achieved in the same manor too.

 

[ca8msm]

OK, in that case you are probably better with the second method that we've just gone through!

As for validation controls, you can also add these dynamically as well, so they shouldn't cause you much of a problem. We can always go through the process if they do though.


____________________________________________________________

Need help finding an answer?

Try the Search Facility or read FAQ222-2244 on how to get better results.

 

[robdog09]

put this in your aspx page

<asp:TextBox ID=txtYo runat=server />
<label for='<%=txtYo.clientid %>'>Hello</label>

it references textbox without code-behind

 

[ca8msm]

That would be a classic ASP method though rather than a .NET solution


____________________________________________________________

Need help finding an answer?

Try the Search Facility or read FAQ222-2244 on how to get better results.

 

[robdog09]

Yea but whenever i have to include clientids like that i prefer this because your not maintaining a control in two places. how many times have I had to look at 500 line code-behind for that attribute addition. Instead, its right there.

good luck

 

[jupiter8]

Still have the frustrating problem that the label is after the control and although you can manipulate the positioning with CSS, it is far from ideal

 

[robdog09]

whatever

 

[ca8msm]

whatever

Hmmm....that's hardly a helpful post for the original poster is it?! They have pointed out a legitimate problem and also by including code like you suggested, you have to look in multiple places for code that can affect the output. The whole point of ASP.NET is to seperate logic from display.

I suggest you read the FAQ in my signature on how to get the best out of these forums.


____________________________________________________________

Need help finding an answer?

Try the Search Facility or read FAQ222-2244 on how to get better results.

 

[robdog09]

haha..."whatever

 

[robdog09]

All joking aside, understandable argument ca8msn, but just my preference. Now, i wouldn't go defining classes in the aspx page (not sure if you can do that) but simple things i let slide to prevent clutter in the vb file