input item in table

Hi Petru,

I would like to vote for being able to include input fields into a table. I'm creating a new topic because the old thread is already closed: http://wireframesketcher.com/forum/topic/23112/input_item_in_table?p2

Very often I build forms laid out in a table with labels in the first column and input fields in the other. It's time consuming when done with individual fields and individual labels. I save some time by placing all labels into a list, increasing the list row height to match the labels but it never matches precisely.

Being able to display an input field with some value and specified width in a table, just by using some token, would be a tremendous time saver. Example:

Enter your name,{>(w:30).James Bond}
Address,{(w:30,h:20).123 Crescent Rd.\nToronto\nOntario\, Canada}

This would render as an input field 30px wide with "James Bond" in it, right aligned. The next row would contain a text area with three lines in it, left aligned.

This would be additional to the existing functionality so I could still use cell formatting as well:

>(w:100).{<(w:50).}

This would produce a cell 100px wide with content aligned to the right. The input field itself would be 50px wide with content left aligned (if there was any, I left it empty intentionally).

What do you think? I hope it wouldn't be too difficult to program.

Petr

Hi Petr,

I added your vote to this issue. I am not sure about width syntax. I would expect the column's size to determine the size of input field.

I'd love to see what kind of forms you are designing. Perhaps there is a need for a new Form widget for this kind of task, that could be more intelligent than a Table.

Good thinking. Here's a screenshot of a few typical form with text fields and textareas:

I did consider whether the fields/areas could adopt the width of their parents. It could be a default behaviour. However, perhaps in some later version, I would appreciate to be able to control the width/height individually. I often need the text fields and textareas to vary in width and height.

The reason why I want the width to be flexible is that I design my forms so that their structure suggests what their content should be. Picture a form with a field for a url and a zip code. Url can be very long so you want the field long enough so that the user can see it in full. At the same time though, you want the zip code field to be short. Forms with fields of different width are easier to read. It's harder to accidentally type address into a zip code field if the zip code is just 7 chars wide. Similarly a textarea for annotation should be shorter than a textarea for full text.

Going through my forms reminded me one other thing that bugs me frequently. Radio group and Checkbox group only work vertically while I mostly need them horizontal. I would appreciate being able to type () / [] (and their derivatives) anywhere in a List or Table.

This screenshot shows how I typically use radio buttons and checkboxes:

Sorry, I used ukaz.at for images, here's another shot with tinypic.com.

text fields and text areas:

radio button groups (same for checkbox groups):