Form controls: types & attributes

In this section you will find full definition of all the controls which can be used in form. Before individual element description, some common information concerned with all the elements.

Common features. Any form control has parameters 'sameLine' (boolean) and 'id' (string).

sameLine answers for the control placement. The default value is 'false' - the control will be placed in a new row, under all the existing controls.
'true' value places control with the previous one in the same row.

id is the identification name. Used for referring to the control.

{ view:"form", id:"topForm", data:[{ type:"text", id:"field_b", sameLine:true, label: 'Arrival', value: "Guatemala", position: "label-left", inputWidth: 250, labelWidth: 100}
]}

formbutton

A normal button.

  • value - (string) the button's text
  • width - (integer) the width of the button
  • align - (left, right or center) the alignment of the text within the control
{ view:"form", id:"topForm", data:[{type:"formbutton", id: "findButton", value: 'Find flight', align:"center", width: 300 }
]}

calendar

A control area that contains label and pop-up calendar.

  • label - (string) the text label of the control
  • labelWidth - (integer) the width of the label
  • labelAlign - (left, right or center) the alignment of the label within the defined width
  • width - (integer) the width of the control
{ view:"form", id:"topForm", data:[{type:"calendar", id: "field_f", label: 'Date', labelAlign: "left", labelWidth: 100 }
]}

checkbox

A check box.

  • label - (string) the text label of the control
  • value - (boolean:true/false or 0/1) the initial value of the control (the default value is 0 - check box is not checked)
  • position - (label-left, label-right) the position of the label relative to the check box
  • labelWidth - (integer) the width of the label
  • labelAlign - (left, right or center) the alignment of the label within the defined width
{ view:"form", id:"topForm", data:[{ type:"checkbox", id: "field_j", label:"find hotels", labelWidth: 150, value: 1, position: "label-right"},
]}

combo

A combo box.

  • label - (string) the text label of the control
  • value - (string) the id of the initial option
  • y_count (integer)- the number of the select options
  • width - (integer) the width of the control
  • inputWidth - (integer) the width of the input field
  • labelWidth - (integer) the width of the label
  • align - (left, right or center) the alignment of the selected value within the defined width
  • labelAlign - (left, right or center) the alignment of the label within the defined width
  • data - specifies select options of the control
    • id - (string) the identification name of the option
    • value - (string) the value of the option
{ view:"form", id:"topForm", data:[{ type:"combo",id: "field_m", label: 'Combo', value:"1", y_count:"3", data:[
										{ id:"1", value:"One"   }, 
										{ id:"2", value:"Two"   }, 
										{ id:"3", value:"Three" }
                                                                                ]}
]}

counter

A control area which contains a label and a counter.

  • label - (string) the text label of the control
  • value - (integer) the initial value of the control
  • step - (integer) the difference between two successive values of the control
  • min - (integer) the minimum value of the control
  • max - (integer) the maximum value of the control
  • width - (integer) the width of the control
  • valueWidth - (integer or “auto”) the width of the field which represents the current value
  • labelWidth - (integer) the width of the label
  • position - (label-left, label-right) the position of the label relative to the field which represents the current value
  • labelAlign - (left, right or center) the alignment of the label within the defined width
{ view:"form", id:"topForm", data:[{ type:"counter", id:"field_c", label: 'Quantity', step: 10, valueWidth: "auto", value: 150, min: 100, max: 200, labelWidth: 100, position: "label-left", labelAlign: "left"}
]}

radio

A block of the radio buttons (can contain only one radio button).

  • value - (string) the initial value of the control (sets the value of the button which will be checked initially)
  • position - (label-left, label-right) the position of the labels relative to the radio buttons
  • labelWidth - (integer) the width of the labels
  • labelAlign - (left, right or center) the alignment of the labels within the defined width
  • data - specifies radio buttons of the control
    • label - (string) the text label of the radio button
    • value - (string) the value of the radio button
{ view:"form", id:"topForm", data:[{ type:"radio", id:"field_l", position: "label-left", labelWidth: 90, labelAlign: "left",  value:"a2", data:[
									{ label:"option 1", value: "a1" },
									{ label:"option 2", value: "a2" }
								        ] }
]}

list

A dropdown list.

  • label - (string) the text label of the control
  • value - (string) the id of the initial option
  • y_count (integer)- the number of the select options
  • width - (integer) the width of the control
  • inputWidth - (integer) the width of the input field
  • labelWidth - (integer) the width of the label
  • align - (left, right or center) the alignment of the selected value within the defined width
  • labelAlign - (left, right or center) the alignment of the label within the defined width
  • data - specifies select options of the control
    • id - (string) the identification name of the option
    • value - (string) the value of the option
{ view:"form", id:"topForm", height: 400, data:[{ type:"list", id: "field_e", label: 'Type', value: "1", y_count:"3", align: "right", labelAlign: "right", data:[
									 	                                          { id:"1", value:"One"   },
									                                                  { id:"2", value:"Two"   },
										                                          { id:"3", value:"Three" }]}
]}

text

A control area which contains a label and a text input field.

  • label - (string) the text label of the control
  • value - (string) the inputted text
  • width - (integer) the width of the control
  • position - (label-left, label-right) the position of the label relative to input field
  • inputWidth - (integer) the width of the input field
  • labelWidth - (integer) the width of the label
  • align - (left, right or center) the alignment of the input field within the defined width
  • labelAlign - (left, right or center) the alignment of the label within the defined width
{ view:"form", id:"topForm", data:[{type:"text", id:"field_a", label: 'from', value: "Moscow", position: "label-left", inputWidth: 250, labelWidth: 100, align: "center", labelAlign: "center"}
]}

toggle

A control area that contains label and a toggle (left and right buttons).

  • options - (string array) the text labels of the buttons
  • label - (string) the text label of the control
  • value(s) - (string (string array)) the value(s) which the button(s) will return
  • width(s) - (integer(integer array) the width of the button(s)
  • align(s) - (left, right or center) the alignment of the button(s) text within the defined width
  • position - (label-left, label-right) the position of the label relative to the toggle
  • labelWidth - (integer) the width of the label
  • labelAlign - (left, right or center) the alignment of the label within the defined width
{ view:"form", id:"topForm", data:[{ type:"toggle", id: "field_g", options: ["Roundtrip","Oneway"], label: "label", values: ["left", "right"], widths: [150, 80], aligns: ["right", "left"], position: "label-right", labelWidth: 70, labelAlign: "left"}
]}