Format nice checkboxes
or radio buttons

Chong-ho (Alex) Yu, Ph.D., MCSE, CNE

Problem 1:

I don't want to recreate the list of checkboxes or radio buttons on the webpage. Therefore I import the pre-defined valuelist from File Maker Pro by inserting the following tag into the html page:

[FMP-VALUELIST: subject, LIST=subject] <INPUT TYPE=checkbox NAME='subject' VALUE='[FMP-ValueListItem]' [FMP-ValueListChecked]>[FMP-VALUELISTITEM: Always, HTML] [/FMP-VALUELIST] However, the value list is too long and thus it looks very ugly (see below). What can I do to reformat it?


The solution is very easy. Simply put a line break tag right after the first FMP valuelist tag (see line 2 in the following). Also, insert a multiple columns tag before and after the entire FMP valuelist tags.

	<multicol cols=2>
		[FMP-VALUELIST: subject, LIST=subject]<br> 
		<INPUT TYPE=checkbox NAME='subject' VALUE='[FMP-ValueListItem]' 

Now the checkbox list is very tidy.

Another way to overcome this problem is to create a customized list of radio buttons and checkboxes, then using the FMP-if tag to identify which option has been selected by the user (This tip is provided by Barnaby Wasson).

	<INPUT TYPE=checkbox NAME=subject VALUE="All subjects" 
		[fmp-if: FIELD: subject .eq. "All subjects"]CHECKED[/FMP-IF]>
		All subjects<BR>
	<INPUT TYPE=checkbox NAME=subject VALUE="administration" 
		[fmp-if: FIELD: subject .eq. "Administration"]CHECKED[/FMP-IF]>
	<INPUT TYPE=checkbox NAME=subject VALUE="Art/Music" 
		[fmp-if: FIELD: subject .eq. "Art/Music"]CHECKED[/FMP-IF]>
	<INPUT TYPE=checkbox NAME=subject VALUE="english/literature" 
		[fmp-if: FIELD: subject .eq. "English/Literature"]CHECKED[/FMP-IF]>

Problem 2:

The value list for the radio buttons is short. However, I use abbreviations and thus the choices are too close to each other and users may be confused (see the figure below):

FileMaker Pro

Again, the solution is easy. Put a spacer right after the first FMP valuelist tag as shown in the following code:

	[FMP-VALUELIST: q1, LIST=likert]
	<SPACER TYPE=horizontal SIZE=20>

Now the radio buttons are visualy apart from each other and confusion is avoided.


FMP Tips Contents

Other computer tips

Search Engine

Credit/Copyright ©

Simplified Navigation

Table of Contents

Contact Me