Question

I’d like to have a form with several select controls in a horizontal (they are next to each other) layout and have labels on top of each select.

Like this:

Inline form fields with labels placed on top

How can I do that with css and using dform?

Answer 1

Here is the answer using dform. Thank you for negative voting.

css for span… display:inline-block
label and select… display : block

$('#myform').dform({
"action" : "dform.html",
"method" : "get",
"html" :
[
{
"type": "span",
"html": {
"type": "select",
"name": "Country",
"caption": "Country",
"class": "countries",
"options": {
"": "All",
"USA": {
"html": "USA",
"class": "active"
},
"Germany": {
"html": "Germany",
"class": "active"
},
"France": {
"html": "France",
"class": "active"
}
},
"selected": null
}
}
]
});