Form fields

processed with Commons Bootstrap 3
Documentation / Form fields

Form fields (macro input)

Text fields
Name.help
<@formGroup labelKey='Text' helpKey='Name.help' mandatory=true>
	<@input type='text' name='name' value='' />
</@formGroup>
						
Text.help
<@formGroup labelKey='Textarea' helpKey='Text.help' mandatory=true>
	<@input type='textarea' name='text' value='' />
</@formGroup>
						
Email field
Email.help
<@formGroup labelKey='Email' helpKey='Email.help' mandatory=true>
	<@input type='email' name='email' value='' />
</@formGroup>
						
Password field
Password.help
<@formGroup labelKey='Password' helpKey='Password.help' mandatory=true>
	<@input type='password' name='password' value='' />
</@formGroup>
						
Number field
Number.help
<@formGroup labelKey='Number' helpKey='Number.help' mandatory=true>
	<@input type='number' name='elapsed_time' value='0' />
</@formGroup>
						
Select field
Select.help
<@formGroup labelKey='IdForeign' helpKey='Select.help' mandatory=true>
	<@select name='id_foreign' items=id_foreigns_list default_value='0' />
</@formGroup>
						
Simple text field

example@example.com

RegisteredEmail.help
<@formGroup labelKey='Simple text' helpKey='RegisteredEmail.help'>
	<@staticText>
		example@example.com
	</@staticText>
</@formGroup>
						
Date fields
DateCreated.help
<@formGroup labelKey='Date' helpKey='DateCreated.help' mandatory=true>
	<@inputGroup>
		<@inputGroupItem type='text'>
			<@icon style='calendar' />
		</@inputGroupItem>
		<@input type='date' name='date_created' id='date_created' value='' />
	</@inputGroup>
</@formGroup>
						
DateTime.help
<@formGroup labelKey='DateTime' helpKey='DateTime.help' mandatory=true>
	<@inputGroup>
		<@input type='datetime' name='datetime' id='datetime' value='' />
		<@inputGroupItem type='text'>
			<@icon style='calendar' />
		</@inputGroupItem>
	</@inputGroup>
</@formGroup>
						
DateRange.help
<@formGroup labelKey='DateRange' helpKey='DateRange.help' mandatory=true>
	<@row>
		<@columns xs=12 sm=6>
			<@inputGroup>
				<@input type='daterange' name='date_range' id='date_range'  dateRangeEndId='date_range_end' value='' />
				<@inputGroupItem type='text'>
					<@icon style='calendar' />
				</@inputGroupItem>
			</@inputGroup>
		</@columns>
		<@columns xs=12 sm=6>
			<@inputGroup>
				<@input type='date' name='date_range_end' id='date_range_end' value='' />
				<@inputGroupItem type='text'>
					<@icon style='calendar' />
				</@inputGroupItem>
			</@inputGroup>
		</@columns>
	</@row>
</@formGroup>
						
DateTimeRange.help
<@formGroup labelKey='DateTimeRange' helpKey='DateTimeRange.help'>
	<@inputGroup>
		<@inputGroupItem type='text'>
			<@icon style='calendar' />
		</@inputGroupItem>
		<@input type='datetimerange' name='datetime_range' id='datetime_range'  dateRangeEndId='datetime_range' value='' />
	</@inputGroup>
</@formGroup>
						
Time.help
<@formGroup labelKey='Time' helpKey='Time.help'>
	<@inputGroup>
		<@input type='time' name='time' id='time' value='' />
		<@inputGroupItem type='text'>
			<@icon style='clock' />
		</@inputGroupItem>
	</@inputGroup>
</@formGroup>
						

Checkbox and radio fields (macros checkBox and radioButton)

Checkbox fields
checkboxes1.help
<@formGroup labelKey='Checkboxes (vertical)' helpKey='checkboxes1.help'>
	<@checkBox labelKey='Checkbox 1' name='checkbox1' id='checkbox1' value='1' />
	<@checkBox labelKey='Checkbox 2' name='checkbox2' id='checkbox2' value='2' />
	<@checkBox labelKey='Checkbox 3' name='checkbox3' id='checkbox3' value='3' />
</@formGroup>
						
checkboxes2.help
<@formGroup labelKey='Checkboxes (horizontal)' helpKey='checkboxes2.help'>
	<@checkBox orientation='inline' labelKey='Checkbox 4' name='checkbox4' id='checkbox4' value='4' />
	<@checkBox orientation='inline' labelKey='Checkbox 5' name='checkbox5' id='checkbox5' value='5' />
	<@checkBox orientation='inline' labelKey='Checkbox 6' name='checkbox6' id='checkbox6' value='6' />
</@formGroup>
						
Radio button fields
Radio1.help
<@formGroup labelKey='Radio (vertical)'>
	<@radioButton labelFor='radio_0' labelKey='Radio1.help' name='radio' id='radio_0' value='0' />
	<@radioButton labelFor='radio_1' labelKey='Radio2.help' name='radio' id='radio_1' value='1' />
	<@radioButton labelFor='radio_2' labelKey='Radio3.help' name='radio' id='radio_2' value='2' />
</@formGroup>
						
Radio2.help
<@formGroup labelKey='Radio (inline)' helpKey='Radio2.help'>
	<@radioButton orientation='inline' labelFor='radio_3' labelKey='Radio 3' name='radio' id='radio_3' value='3' />
	<@radioButton orientation='inline' labelFor='radio_4' labelKey='Radio 4' name='radio' id='radio_4' value='4' />
	<@radioButton orientation='inline' labelFor='radio_5' labelKey='Radio 5' name='radio' id='radio_5' value='5' />
</@formGroup>
						

# Parameters documentation



# Macro input


Parameter Value Default
name* string none
id string none
type string: text, textarea, password, email, file, number, search, color, range, datalist, date, datetime, daterange, datetimerange, time, hidden, tel text
value string none
class string none
size string: sm, lg none
inputSize integer 0
maxlength integer 0
placeHolder string none
rows integer 4
cols integer 40
richtext boolean false
tabIndex string none
disabled boolean false
readonly boolean false
pattern string none
title string none
min integer 0
max integer 0
params string none
mandatory boolean false
language string .locale
minDate string none
defaultDate string none
defaultTime string none
time_24hr boolean true
minTime string none
maxTime string none
format string none
showFormat string none
dateRangeEndId string none
dateParams sequence none
showFileUrl boolean false
fileURL string none
fileName string none
datalist string none

# Macro checkbox


Parameter Value Default
name* string none
id string none
labelKey string none
labelFor string none
orientation string: vertical, horizontal vertical
value string none
title string none
disabled boolean false
readonly boolean false
checked boolean false
mandatory boolean false
params string none

# Macro radio button


Parameter Value Default
name* string none
id string none
labelKey string none
labelFor string none
orientation string: vertical, horizontal vertical
value string none
title string none
disabled boolean false
readonly boolean false
checked boolean false
params string none

# Macro input group


Parameter Value Default
id string none
class string none
size string none
params string vertical

# Macro input group item


Parameter Value Default
id string none
pos string: prepend, append append
type string: btn/text btn
params string vertical

# Macro select


Parameter Value Default
name* string none
id string name
class string none
items hash none
default_value hash none
size string: sm, lg none
sort boolean false
multiple integer 0
params string none
title string none

# Macro staticText


Parameter Value Default
inForm boolean true
color string none
id string none
params string none