GWT: How to group related fields in a UIBinder form? - html

What is the approach to group related fields in a large UIBinder form in GWT? The field group has a title and should allow optional selection of the entire group to appear/disappear or be enabled/disabled.
UPDATE: DisclosurePanel looks fine but does not mix well with custom CSS layouts and I do not want to use other widgetsets.

Is DisclosurePanel what you're looking for?

Related

Multiple form labels - Lightbox

I am editing html codes for web accessibility but I faced one problem about Multiple form labels. I am using Wave plugin to check web accessibility.
Errors is
Multiple form labels
What It Means
A form control has more than one label associated with it.
The problem is that there is a page user can input user info, and a button to call pop up then the pop up has all same fields again to register if user did not input the field.
Instead of changing ID of the field in popup, is there any quick and easy way to remove the error?
From W3Schools:
The id attribute specifies a unique id for an HTML element (the value
must be unique within the HTML document).
So yes, you need to define a unique ID for each and every component. This is the only clean way to solve your problem, otherwise a screenreader could read the wrong label when you focus one of your input fields.
One way to fix this other than changing IDs is to wrap the input in the label.
<label>
First Name
<input />
</label>
This is semantically correct and avoids the labels needing for and associated input id attributes.
You obviously might need to refactor some stuff and it seems like more hard work than just changing some IDs but that is an option (I know you will have probably fixed this by now, this is more for reference if someone else comes to this question.)
See: https://stackoverflow.com/a/774065/2702894

Database design for a form builder in MYSQL

Currently I am working on a form builder,
the user can add input box with different name into the form.
Notice that the form will be stored as HTML code, so the only concern is the input box name storage and submit form value
Now I have draft a table like this
form
-----
id
inputs
------
form_id
name
values
-------
input_id
value
One problem I can think of is the data type of value,
the above design works only if the value is text / textarea
How to handle if the input box is file upload / radio / select?
so are there are Any better design,
thanks a lot for helping.
you have to store element type also. according to the element type,find out which html element it is and render this
You will need an extra table for radio and select, since it has multiple rows for one <input> field.
Don't forget about optional things like id=, name=, style=, class=, etc.
I predict that your finished product will be as clumsy to use as typing the form elements by hand.

Progress hide json fields

I'm using Progress OpenEdge.
I've created a dataset and nested a few temp-tables. I put in specific fields in order to relate the temp-tables.
In xml if you want to hide the fields that you use to relate the temp-tables you would use xml-node-type "HIDDEN" next to the field where you defined the temp-table.
So when you view the xml document after "dataset handle":write-xml("whatever-paramters"). The relation fields aren't seen.
The question...
How do I do the same with json?
I can't find anything that would resemble xml's xml-node-type "HIDDEN".
See the SERIALIZE-HIDDEN attribute.
http://knowledgebase.progress.com/articles/Article/000048926

What html form control is used in adding multiple value field?

I have making a simple jsp app and i have a many to many relationship between song and genre. What form field should i use to add multiple genres to a song. I am thinking of check boxes but i don't know if it is appropriate. Here is my erd.
If the goal is to select multiple options, checkboxes would be the best option.
Radio and <select> would only select one.
W3 Schools: <input> Tag
A multi-select dropdown will suit best here. And I suggest Select2 (https://select2.github.io/) if you're using jQuery in your project.
Regarding manipulating the values, I suggest use JSON. You can get selected Genres from Select2 as an array. Just bind like this
[
{
"song": "<song_name>",
"genres": "[select2 values in array]"
},
..
]

Only allow certain user input in html form

I am trying to allow only certain data to be inserted into an html form field...
i currently have
pattern="[A-za-z]{2}[0-9]{6}"
which works great for a reference number starting with RQ and then 6 numbers.
how can i add another pattern to allow 3 letters with 8 numbers after that?
for example INM12345678
so that users can only use RQ123456 or INM12345678
try this:
/(RQ\d{6}|INM\d{8})/
here is the demo see here
If you want to limit valid data as said in comment:
^RQ[0-9]{6}|INM[0-9]{8}$