Form fields

processed with Commons Bootstrap 5 + Tabler 1.0
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