[Pro] Form labels and adding classes

If you use the FW interface to add a form element (ie Checkbox, Radio) to your FW page then FW automatically generates it inside a Label Tag.

I may just be being dumb here but I would like to add (through the FW interface - no JS) a class to that Label. So that I get the output:

<label class="test" for="item1"><input id="item1" type="checkbox" name="item1">My Label Text</label>

Is it doable?

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Dave,

I’m having some problem getting FWP to create a label for any form
elements… has it been so long since I did it the Freeway way that I’m
missing something?

http://cssway.thebigerns.com/workbench/dave-form-label-class/

You might be able to target the label’s “for” attribute with CSS this way:

  label[for="item1"] { color: red; }
  label[for="item2"] { color: green; }


Ernie Simpson


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Not sure about your method Ernie but if you just Insert>Checkbox or Radio you get

http://www.deltadesign.co/FW6Test/form-label-class.html

With an automatically generated Label Tag

Certainly I could use your method to style the labels however I want to just add the Class to the Labels so that I can then do other things.

Thanks for your input.

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hey Dave -

All I’ve done is to insert my cursor in the html box and insert the form
items from the menu… it doesn’t generate a label element.

I can’t imagine anything beyond that I’m not doing, but I admittedly have
been hand-coding my forms for years, so I’m unused to FWP’s method. If I
could figure out how to get it to make a label, then I’ll try and help.

Send me your native example file off-list?


Ernie Simpson


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Send me your native example file off-list?

On its way Ernie

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I can confirm that I’m seeing the same thing as Ernie here. Are you drawing the form element on the page, or inserting it inline within another text container?

Walter

On Feb 22, 2014, at 3:23 PM, Ernie Simpson wrote:

Hey Dave -

All I’ve done is to insert my cursor in the html box and insert the form
items from the menu… it doesn’t generate a label element.

I can’t imagine anything beyond that I’m not doing, but I admittedly have
been hand-coding my forms for years, so I’m unused to FWP’s method. If I
could figure out how to get it to make a label, then I’ll try and help.

Send me your native example file off-list?


Ernie Simpson


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Are you drawing the form element on the page, or inserting it inline within another text container?

Just using Insert>Checkbox straight onto an otherwise blank FW page

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

It also does it if you use the HTML>Checkbox tool to ‘Draw’ it on the page.

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Okay, I see it now - you have to highlight the text next to the form item
and click the “Label” tick-box in the Inspector, then choose which id it
belongs to. Well, that’s obvious. :expressionless:

The problem, and you’re probably already seen this Dave, is the whole line
(checkbox, label, etc) is wrapped in durned p tag. You can make a span type
to grab just the label, but that’s not the same as you’re asking. FWP will
apply a normal class style to the whole enclosing paragraph.

Again, there are half a dozen ways to target those label tags with CSS
selectors, but I cannot find any way to kick FWP into adding straight-up
class attributes to the label tags.


Ernie Simpson


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I cannot find any way to kick FWP into adding straight-up class attributes to the label tags.

Yup - that is my issue. I can obviously add the checkbox, label and Class to it via Markup but I am trying to get it into the normal FW workflow.

There may be a way to do it via an action but that would be totally overkill for my use.

Thanks Ernie


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi guys,

Just to clarify, and for anyone else that’s reading this:

Labels are sections of text that bring an input item (text field, checkbox, radio button etc) into focus when clicked. Freeway automatically adds a label in the following two cases:

  1. You draw a checkbox or radio button by selecting the respective options from the HTML Item menu in the toolbar
  2. You insert a checkbox or radio button to the page from the Insert menu when not in text editing mode (i.e. not an inflow item)

If you’re inserting a checkbox or radio button inflow you’ll just get the input item with no label. We took the decision that if you’re working like this you would want to enter your text and label manually. Perhaps this is not a correct assumption.

You can select any text on the page and make it a label for any input item by checking the Label option in the Inspector, though it’s common practice to use text alongside the input as the label. You can also have multiple labels for inputs.

Labels can’t currently be targeted for adding classes, ids or any other metadata. What is it you’re wanting to do, Dave? Is it just for styling?

Joe


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

What is it you’re wanting to do, Dave? Is it just for styling?

Yes - it is really a method of adding a Class to the Label tag so that that certain CSS can target it.

I can do it with JS but was wishing a totally CSS approach that I could use without stepping outside the normal FW workflow.

I should be able to target the Label tag using a compound selector.

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi David,
I’ve used Actions to add classes to items like this in the past. There appears to be a few of these elements in Freeway that are tricky to style. One that I recall I had similar troubles with was the humble horizontal rule. Trying to style these without using an Action (to add a class, ID or style) or n-th child selectors (which can often break if the design changes) isn’t possible.
Regards,
Tim.

On 22 Feb 2014, at 10:04, DeltaDave wrote:

I may just be being dumb here but I would like to add (through the FW interface - no JS) a class to that Label.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

One that I recall I had similar troubles with was the humble horizontal rule. Trying to style these without using an Action (to add a class, ID or style) or n-th child selectors (which can often break if the design changes) isn’t possible.

Now if there were an Action that I could use to add a Class to the Label tag that would be good enough for me. Or one that I could modify to do it?

Any suggestions on that front?

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Freeway Pro wraps the label and form item in paragraph tags - you could
create a class-style for the paragraph, so that

 <p class=“mystyle”>

so your css selector is

 .mystyle label

and then expand to

 .mystyle label:hover

for your additional coding.

Even more elegant would be to style the container for all the labels as
.mystyle, then only those “grouped” elements will display the behavior.


Ernie Simpson


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

There’s also an inelegant way of using FWP to get exactly the code you want

  • no actions needed.

But, you’re not going to like it.

Instead of applying the Label from the Inspector, just leave the text you
type next to the form item alone. Place your cursor in the center of that
text and arrow to the beginning. Insert a Markup Item from the menu and
style the beginning label tag like this:

 <label for=“itemName” class=“myStyle”>

Exit, then arrow your cursor over to the end of that text and add another
Markup Item, in which you end the label element like so

 </label>

Completely within FWP, and will produce this code exactly as desired.

http://cssway.thebigerns.com/workbench/dave-form-label-class/

I’s not elegant as a FWP method, but you cannot argue with the output.


Ernie Simpson


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

you could create a class-style for the paragraph, so that

Yes Ernie I was thinking along those lines myself.

But, you’re not going to like it.

I have used that method before to add opening/closing Tags and while inelegant in the FW interface it does give the desired result.

More food for thought - thanks.

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Could you let me know a little more about what you’re trying to do? Are you trying to style each label differently? Are labels for some types of control to be styled differently to others? Do you have multiple forms with labels on the page? There may be something we can do with to Freeway if you have a common use case.

Cheers,
Joe


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

All I want to do is add a single Class to my Label Tags (not style them) - preferably on an item by item basis.

There are no actual forms on the page - the checkboxes that have the labels attached are used to trigger a ‘state’ ie checked/unchecked and are hidden with CSS

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Ah, I see. I think your best bet is going to be to use the Markup Item method that Ernie suggested.

Joe

On 24 Feb 2014, at 16:39, DeltaDave email@hidden wrote:

All I want to do is add a single Class to my Label Tags (not style them) - preferably on an item by item basis.

There are no actual forms on the page - the checkboxes that have the labels attached are used to trigger a ‘state’ ie checked/unchecked and are hidden with CSS

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options