[yast-devel] alignment of form elements
What is the proper way of aligning form elements in webYaST? ------------------------------------------------------------------------ -------------- Dialog elements in a form are aligned via css. Dialog elements belonging to each other are surrounded by <fieldset>. You may give a fieldset an id and and a class for further use. If you want to use headlines in a form, use <fieldset>. Form elements are separated by putting each form element into a single paragraph. The description of a form element, which is shown on the left side later, is surrounded by <label> In order to allow the user to activate an input field by clicking on the form element description the "label for" and the text field tag/ form id have to be identical. Code example: http://en.opensuse.org/YaST/Web/Docu/ Style_Guide#Presentation_of_Dialog_Elements_in_a_Form Cu, Martin --- Martin Schmidkunz User Experience Specialist mschmidkunz@novell.com +49 (0) 911 740 53-346 --- SUSE LINUX Products GmbH, GF: Markus Rex, HRB 16746 (AG Nürnberg) --- Novell® Making IT Work As One™ -- To unsubscribe, e-mail: yast-devel+unsubscribe@opensuse.org For additional commands, e-mail: yast-devel+help@opensuse.org
Martin Schmidkunz napsal(a):
What is the proper way of aligning form elements in webYaST? --------------------------------------------------------------------------------------
Dialog elements in a form are aligned via css. Dialog elements belonging to each other are surrounded by <fieldset>. You may give a fieldset an id and and a class for further use. ^^^ Just a note, fieldset *must* have id and all ids in html page (not only in fieldset but all) must be unique for valid xhtml code.
If you want to use headlines in a form, use <fieldset>. Form elements are separated by putting each form element into a single paragraph.
What is advantage of usage <p> over <div>? Josef
The description of a form element, which is shown on the left side later, is surrounded by <label> In order to allow the user to activate an input field by clicking on the form element description the "label for" and the text field tag/form id have to be identical.
Code example: http://en.opensuse.org/YaST/Web/Docu/Style_Guide#Presentation_of_Dialog_Elem...
Cu,
Martin
--- Martin Schmidkunz User Experience Specialist mschmidkunz@novell.com +49 (0) 911 740 53-346 --- SUSE LINUX Products GmbH, GF: Markus Rex, HRB 16746 (AG Nürnberg) --- Novell® Making IT Work As One™
-- To unsubscribe, e-mail: yast-devel+unsubscribe@opensuse.org For additional commands, e-mail: yast-devel+help@opensuse.org
Just a note, fieldset *must* have id and all ids in html page (not only in fieldset but all) must be unique for valid xhtml code.
Thanks for the note!
If you want to use headlines in a form, use <fieldset>. Form elements are separated by putting each form element into a single paragraph.
What is advantage of usage <p> over <div>?
I`d like to pass that question to an expert :-) Robert, could you please comment on this? Thanks! Cu, Martin --- Martin Schmidkunz User Experience Specialist mschmidkunz@novell.com +49 (0) 911 740 53-346 --- SUSE LINUX Products GmbH, GF: Markus Rex, HRB 16746 (AG Nürnberg) --- Novell® Making IT Work As One™
On 28.10.2009, at 10:15, Martin Schmidkunz wrote:
Just a note, fieldset *must* have id and all ids in html page (not only in fieldset but all) must be unique for valid xhtml code.
Thanks for the note!
Sorry, but as I know, there is no requirement for IDs in fieldsets. Could you provide a source for this information? My google research was negativ. Thanx :-)
If you want to use headlines in a form, use <fieldset>. Form elements are separated by putting each form element into a single paragraph.
What is advantage of usage <p> over <div>?
I`d like to pass that question to an expert :-) Robert, could you please comment on this? Thanks!
1. I would say, it's correct from the semantic point of view. It's a common way to do it. 2. <p> has standard behaviour which allows me to write less CSS :-D IMHO it makes the code more readable. A never ending <div>-structure is much harder to scann -visually- then a form => fieldset => p => whatEver hierarchy. Does this answer your question? Salut, Robert
Cu,
Martin
--- Martin Schmidkunz User Experience Specialist mschmidkunz@novell.com +49 (0) 911 740 53-346 --- SUSE LINUX Products GmbH, GF: Markus Rex, HRB 16746 (AG Nürnberg) --- Novell® Making IT Work As One™
--- Robert Lihm, Webdesigner - openSUSE Boosters Team SUSE LINUX Products GmbH, Maxfeldstr. 5, D-90409 Nuernberg Tel: +49-911-74053-0 - rlihm@suse.de ____________________________________________________________ SUSE LINUX Products GmbH, GF: Markus Rex, HRB 16746 (AG Nürnberg) ____________________________________________________________ SUSE - a Novell business -- To unsubscribe, e-mail: yast-devel+unsubscribe@opensuse.org For additional commands, e-mail: yast-devel+help@opensuse.org
Robert Lihm napsal(a):
On 28.10.2009, at 10:15, Martin Schmidkunz wrote:
Just a note, fieldset *must* have id and all ids in html page (not only in fieldset but all) must be unique for valid xhtml code.
Thanks for the note!
Sorry, but as I know, there is no requirement for IDs in fieldsets. Could you provide a source for this information? My google research was negativ.
It reports tidy which we use to validate result, but maybe problem is just empty id (id=""). I check it tomorrow when I came to work.
Thanx :-)
If you want to use headlines in a form, use <fieldset>. Form elements are separated by putting each form element into a single paragraph.
What is advantage of usage <p> over <div>?
I`d like to pass that question to an expert :-) Robert, could you please comment on this? Thanks!
1. I would say, it's correct from the semantic point of view. It's a common way to do it. 2. <p> has standard behaviour which allows me to write less CSS :-D
IMHO it makes the code more readable. A never ending <div>-structure is much harder to scann -visually- then a form => fieldset => p => whatEver hierarchy.
Does this answer your question?
Yes, thanks. Josef
Salut,
Robert
Cu,
Martin
--- Martin Schmidkunz User Experience Specialist mschmidkunz@novell.com +49 (0) 911 740 53-346 --- SUSE LINUX Products GmbH, GF: Markus Rex, HRB 16746 (AG Nürnberg) --- Novell® Making IT Work As One™
---
Robert Lihm, Webdesigner - openSUSE Boosters Team SUSE LINUX Products GmbH, Maxfeldstr. 5, D-90409 Nuernberg Tel: +49-911-74053-0 - rlihm@suse.de ____________________________________________________________ SUSE LINUX Products GmbH, GF: Markus Rex, HRB 16746 (AG Nürnberg) ____________________________________________________________ SUSE - a Novell business
-- To unsubscribe, e-mail: yast-devel+unsubscribe@opensuse.org For additional commands, e-mail: yast-devel+help@opensuse.org
On 28.10.2009, at 12:33, josef reidinger wrote:
Robert Lihm napsal(a):
On 28.10.2009, at 10:15, Martin Schmidkunz wrote:
Just a note, fieldset *must* have id and all ids in html page (not only in fieldset but all) must be unique for valid xhtml code.
Thanks for the note!
Sorry, but as I know, there is no requirement for IDs in fieldsets. Could you provide a source for this information? My google research was negativ.
It reports tidy which we use to validate result, but maybe problem is just empty id (id=""). I check it tomorrow when I came to work.
Ah! Yes, I guess this is the problem :-)
Thanx :-)
If you want to use headlines in a form, use <fieldset>. Form elements are separated by putting each form element into a single paragraph.
What is advantage of usage <p> over <div>?
I`d like to pass that question to an expert :-) Robert, could you please comment on this? Thanks!
1. I would say, it's correct from the semantic point of view. It's a common way to do it. 2. <p> has standard behaviour which allows me to write less CSS :-D
IMHO it makes the code more readable. A never ending <div>- structure is much harder to scann -visually- then a form => fieldset => p => whatEver hierarchy.
Does this answer your question?
Yes, thanks.
Every time again, mate! Robert
Josef
--- Robert Lihm, Webdesigner - openSUSE Boosters Team SUSE LINUX Products GmbH, Maxfeldstr. 5, D-90409 Nuernberg Tel: +49-911-74053-0 - rlihm@suse.de ____________________________________________________________ SUSE LINUX Products GmbH, GF: Markus Rex, HRB 16746 (AG Nürnberg) ____________________________________________________________ SUSE - a Novell business -- To unsubscribe, e-mail: yast-devel+unsubscribe@opensuse.org For additional commands, e-mail: yast-devel+help@opensuse.org
participants (3)
-
josef reidinger -
Martin Schmidkunz -
Robert Lihm