Horizontal Placement of Input Elements

In our example, if you would like to place your radio buttons (or any other input elements) horizontally rather than vertically, how would you do it?

The most straightforward way is to break up the hashed collection literal in #renderOn: into three segments…

renderOn: html
formInputs removeAll.
html form id: 'myForm1'; with: [
html table with: [
#{'Username'->{'Username:'. 'email'}.
'Password'->{'Password:'. 'password'}.
'RememberMe'->{'Remember me'. 'checkbox'}}
keysAndValuesDo: [ :key :value |
self renderInput: key
label: value first
type: value second
on: html ].
html tr with: [
html label with: 'Sex:'.
html td with: [
#{'Male'->{'Male'. 'radio'}.
'Female'->{'Female'. 'radio'}.
'Yes'->{'Yes'. 'radio'}}
keysAndValuesDo: [ :key :value |
self renderHorizontal: key
label: value first
type: value second
on: html ]]].
#{'Comment'->{'Comment:'. 'textarea'}.
'Country'->{'Country:'. 'select'}}
keysAndValuesDo: [ :key :value |
self renderInput: key
label: value first
type: value second
on: html ]].
html p: [
html input
type: 'submit';
value: 'Collect Input Field Values';
onClick: [ self collectValues ]]]

Then you can render the radio buttons as follows:

renderHorizontal: name label: inputLabel type: type on: html
| factory input |
factory := inputFactories at: name
ifAbsent: [inputFactories at: '_default'].
input := factory value: html value: name value: type.
input ifNotNil: [formInputs add: input].
html label with: inputLabel,' | '

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store