Add an HTML label for a form input

Questions
1

I want to ensure my form is accessible. How do I add an HTML label element and have it associated with a form input?

2

Hello @gary.homewood Welcome to the community!

I am not sure what the post means with form being accessible via adding an html label. It should be accessible via vanilla Bubble functionality.

Nevertheless … perhaps you are talking about the ID Attribute of an element … that once set … makes it possible for manipulation via the Bubble’s html element

Do this in settings/general/advancedOptions “Expose the option to add an ID Attribute to HTML elements”

Hope this helps! :slight_smile:

3

I meant being able to add an HTML <label> element for an input, either wrapping the input control or asscoiating it with an ID

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label

4

Ok so I can add an HTML element, and give it a value of e.g. (including the relevant input ID,)

<label for="email">email</label>

but it doesn’t pick up styles in design mode, either bubble styles or CSS rules I’ve added to the page header. Makes it hard to work with.

5

I’m working on a plugin which generates HTML5 input elements with labels. You can preview the elements here: Bubble | HTML5 Input Elements

1 Like