CKEditor 3.x/Users Guide/Rich Text/Forms - Revision history

Anna: Final proof-reading

2010-12-13T13:06:06Z

Final proof-reading

Anna: Dialog windows template added

2010-12-10T11:25:00Z

Dialog windows template added

Anna: Note format modified

2010-12-10T10:32:33Z

Note format modified

Anna: Custom title, links corrected

2010-12-02T17:59:24Z

Custom title, links corrected

Anna: moved CKEditor 3.x/Users Guide/Common Tasks/Forms to CKEditor 3.x/Users Guide/Rich Text/Forms: User's Guide structure change

2010-12-02T07:44:30Z

moved CKEditor 3.x/Users Guide/Common Tasks/Forms to CKEditor 3.x/Users Guide/Rich Text/Forms: User's Guide structure change

Anna: Minor rewording

2010-11-16T07:27:45Z

Minor rewording

Anna: Hidden Field section added

2010-11-15T14:05:30Z

Hidden Field section added

Anna: Image Button section added

2010-11-15T13:52:36Z

Image Button section added

Anna: Button section added

2010-11-15T12:39:38Z

Button section added

Anna: /* Text Field */ Text field size corrected

2010-11-15T12:33:58Z

‎Text Field: Text field size corrected

@@ Line 23: / Line 23: @@
 [[Image:CKEditor_form_example.png|frame|center|A form frame visible in the editing area of CKEditor]]
-Since the form element is just a container you need to add some form controls to make it usable. To do so, place the cursor inside the form frame and use further CKEditor form toolbar buttons.
 <note>A form cannot be nested in another form or overlap with it, so you cannot start a new form inside the previous one.
@@ Line 82: / Line 83: @@
 * '''Type''' &ndash; the parameter that specifies whether the form field will be used for plain text  (<code>type="text"</code> attribute) or passwords (<code>type="password"</code> attribute).
-Once you configure the text field and click the '''OK''' button, the text field will be visible in CKEditor [[CKEditor_3.x/Users Guide/Interface/Editing Area|editing area]] with the default value shown either as plain text or a series of asterisks/bullets.
+Once you configure the text field and click the '''OK''' button, the text field will be visible in CKEditor [[CKEditor_3.x/Users Guide/Interface/Editing Area|editing area]] with the default value shown either as plain text, or a series of asterisks/bullets.
 [[Image:CKEditor_textfield_example.png|frame|center|Two text fields added to a form in CKEditor]]

@@ Line 1: / Line 1: @@
 {{#CUSTOMTITLE:Creating Forms}}
 __TOC__
-Adding forms into your documents is an advanced feature that requires both knowledge of HTML and access to a server that will process the data sent via the form. Due to these prerequisites the form toolbar might be disabled by the system administrator and not available in the installation of CKEditor that you are using.
+Adding forms into your documents is an advanced feature that requires both knowledge of HTML and access to a server that will process the data sent via the form. Due to these prerequisites the form [[CKEditor 3.x/Users Guide/Interface/Toolbar|toolbar]] might be disabled by the system administrator and not available in the installation of CKEditor that you are using.
 == Form Element ==

@@ Line 23: / Line 23: @@
 Since the form element is just a container you need to add some form controls to make it usable. To do so, place the cursor inside the form frame and use further CKEditor form toolbar buttons.
-<ins>'''Important note:'''</ins> A form cannot be nested in another form or overlap with it, so you cannot start a new form inside the previous one.
+<note>A form cannot be nested in another form or overlap with it, so you cannot start a new form inside the previous one.
 == Checkbox ==

@@ Line 1: / Line 1: @@
 __TOC__
 Adding forms into your documents is an advanced feature that requires both knowledge of HTML and access to a server that will process the data sent via the form. Due to these prerequisites the form toolbar might be disabled by the system administrator and not available in the installation of CKEditor that you are using.
@@ Line 165: / Line 166: @@
-The '''Image Button Properties''' dialog window includes three tabs that group image button options: '''Image Info''', '''Upload''', and '''Advanced'''. Since the configuration options for an image button match the settings for normal images inserted into documents, please refer to the [[CKEditor_3.x/Users_Guide/Common_Tasks/Inserting_Images|Inserting Images]] section of the [[CKEditor_3.x/Users_Guide|CKEditor 3.x User's Guide]].
+The '''Image Button Properties''' dialog window includes three tabs that group image button options: '''Image Info''', '''Upload''', and '''Advanced'''. Since the configuration options for an image button match the settings for normal images inserted into documents, please refer to the [[CKEditor 3.x/Users Guide/Rich Text/Images|Inserting Images]] section of the User's Guide.
 Once you configure the image button element and click '''OK''', the image button will be visible in CKEditor [[CKEditor_3.x/Users Guide/Interface/Editing Area|editing area]].

@@ Line 1: / Line 1: @@
 __TOC__
-Inserting forms into your documents is an advanced feature that requires both knowledge of HTML and access to a server that will process the data sent from the form. Due to these prerequisites the form toolbar might be disabled by the system administrator and not available in the installation of CKEditor that you are using.
+Adding forms into your documents is an advanced feature that requires both knowledge of HTML and access to a server that will process the data sent via the form. Due to these prerequisites the form toolbar might be disabled by the system administrator and not available in the installation of CKEditor that you are using.
 == Form Element ==
-The <code>form</code> element is a container for all form contents, which means that all form controls (for example checkboxes, text fields, or buttons) must be placed inside it. To insert the form into your document, press the [[Image:CKEditor_form.png|Form]] toolbar button. The '''Form Properties''' dialog window that will open lets you set basic form settings that control the form's interaction with the server.
+The <code>form</code> element is a container for all form contents, which means that all form controls (for example checkboxes, text fields, or buttons) must be placed inside it. To insert the form into your document, press the [[Image:CKEditor_form.png|Form]] toolbar button. The '''Form Properties''' dialog window that will open lets you configure basic form settings that control the form's interaction with the server.
 [[Image:CKEditor_form_properties.png|frame|center|Form Properties dialog window in CKEditor]]
@@ Line 108: / Line 108: @@
 == Selection Field ==
-A selection field is a form element that lets you select one or more items from the scrollable list and send your selection to the server when you are submitting the form. Selection fields usually contain numerous options and depending on the settings, you can either limit the selection to one item or choose multiple items, holding the Ctrl key while selecting them with a mouse or an Arrow key on your keyboard.
+A selection field is a form element that lets you select one or more items from the scrollable list and send your selection to the server when you are submitting the form. Selection fields usually contain numerous options and depending on the settings, you can either limit the selection to one item or choose multiple items, by holding the ''Ctrl'' key while selecting them with a mouse or an ''Arrow'' key on your keyboard.
 To insert a selection field into a document in CKEditor, place the cursor inside the form element and press the [[Image:CKEditor_selectionfield.png|Selection Field]] toolbar button. The '''Selection Field Properties''' dialog window that will open lets you set the name of a selection field as well as the number and content of available options.

← Older revision	Revision as of 07:44, 2 December 2010
(No difference)

← Older revision		Revision as of 14:05, 15 November 2010
Line 170:		Line 170:

	[[Image:CKEditor_imagebutton_example.png\|frame\|center\|Image button added to a form in CKEditor]]		[[Image:CKEditor_imagebutton_example.png\|frame\|center\|Image button added to a form in CKEditor]]
		+
		+
		+	== Hidden Field ==
		+	A hidden field is a special form element in that it does not allow any interaction with the user and is hidden from view. At the same time its value is sent to the server when the form is being submitted.
		+
		+	To insert a hidden field into a document in CKEditor, place the cursor inside the form element and press the [[Image:CKEditor_hiddenfield.png\|Hidden Field]] toolbar button. The '''Hidden Field Properties''' dialog window that will open lets you set the name and value of a hidden field.
		+
		+	[[Image:CKEditor_hiddenfield_properties.png\|frame\|center\|Hidden Field Properties dialog window in CKEditor]]
		+
		+
		+	Below is an overview of all '''Hidden Field Properties''' dialog window elements:
		+	* '''Name''' – the name of the hidden field element (<code>name</code> attribute).
		+	* '''Value''' – the value of the hidden field element (<code>value</code> attribute).
		+
		+	Once you configure the hidden field and click the '''OK''' button, the hidden field will be visible in CKEditor [[CKEditor_3.x/Users Guide/Interface/Editing Area\|editing area]] as a small icon. Note, however, that as the name suggests, it will be hidden while in preview mode.
		+
		+	[[Image:CKEditor_hiddenfield_example.png\|frame\|center\|A hidden field added to a form in CKEditor]]

← Older revision		Revision as of 13:52, 15 November 2010
Line 156:		Line 156:

	The figure above shows three buttons added to a form. The first one is a '''Button''' type with an arbitrary text, the second one is a '''Submit''' type submitting the form to the server, and the third one is a '''Reset''' type resetting the form input fields to their initial values.		The figure above shows three buttons added to a form. The first one is a '''Button''' type with an arbitrary text, the second one is a '''Submit''' type submitting the form to the server, and the third one is a '''Reset''' type resetting the form input fields to their initial values.
		+
		+	== Image Button ==
		+	An image button is a form element that gives the user a visual cue for completing a form action. It is a clickable image that functions just like a standard button but has a customized appearance.
		+
		+	To insert an image button into a document in CKEditor, place the cursor inside the form element and press the [[Image:CKEditor_imagebutton.png\|Image Button]] toolbar button. The '''Image Button Properties''' dialog window that will open lets you configure the URL and display options of the custom image button.
		+
		+	[[Image:CKEditor_imagebutton_properties.png\|frame\|center\|Image Button Properties dialog window in CKEditor]]
		+
		+
		+	The '''Image Button Properties''' dialog window includes three tabs that group image button options: '''Image Info''', '''Upload''', and '''Advanced'''. Since the configuration options for an image button match the settings for normal images inserted into documents, please refer to the [[CKEditor_3.x/Users_Guide/Common_Tasks/Inserting_Images\|Inserting Images]] section of the [[CKEditor_3.x/Users_Guide\|CKEditor 3.x User's Guide]].
		+
		+	Once you configure the image button element and click '''OK''', the image button will be visible in CKEditor [[CKEditor_3.x/Users Guide/Interface/Editing Area\|editing area]].
		+
		+	[[Image:CKEditor_imagebutton_example.png\|frame\|center\|Image button added to a form in CKEditor]]

← Older revision		Revision as of 12:39, 15 November 2010
Line 133:		Line 133:

	[[Image:CKEditor_selectionfield_example.png\|frame\|center\|A selection field with one option selected added to a form in CKEditor]]		[[Image:CKEditor_selectionfield_example.png\|frame\|center\|A selection field with one option selected added to a form in CKEditor]]
		+
		+
		+	== Button ==
		+	A button is a form element that gives the user a visual cue for completing a form action.
		+
		+	Form button element comes in three variants. The first one is a standard button with arbitrary text. The second one is a submit button that submits the form data to the server. The third one is a reset button that resets the form elements to their default values.
		+
		+	To insert a button into a document in CKEditor, place the cursor inside the form element and press the [[Image:CKEditor_button.png\|Button]] toolbar button. The '''Button Properties''' dialog window that will open lets you set the name, value, and type of the button element.
		+
		+	[[Image:CKEditor_button_properties.png\|frame\|center\|Button Properties dialog window in CKEditor]]
		+
		+
		+	Below is an overview of all '''Button Properties''' dialog window elements:
		+	* '''Name''' – the name of the button element (<code>name</code> attribute).
		+	* '''Text (Value)''' – the text displayed on the button (<code>value</code> attribute).
		+	* '''Type''' – the button type. Possible options are '''Button''' (standard button with arbitrary text; <code>type="button"</code> attribute), '''Submit''' (a button that submits the form data to the server; <code>type="submit"</code> attribute), and '''Reset''' (a button resetting the form fields to their default values; <code>type="reset"</code> attribute.
		+
		+	Once you configure the button element and click '''OK''', the button will be visible in CKEditor [[CKEditor_3.x/Users Guide/Interface/Editing Area\|editing area]] with the text specified in the '''Text (Value)''' field.
		+
		+	[[Image:CKEditor_button_example.png\|frame\|center\|Buttons of three different types added to a form in CKEditor]]
		+
		+
		+	The figure above shows three buttons added to a form. The first one is a '''Button''' type with an arbitrary text, the second one is a '''Submit''' type submitting the form to the server, and the third one is a '''Reset''' type resetting the form input fields to their initial values.

← Older revision		Revision as of 12:33, 15 November 2010
Line 82:		Line 82:


−	The figure above shows two text fields added to a form. The first one is a '''Text''' type with character width set to 50 and the second one is a '''Password''' type with a default character width set by the browser.	+	The figure above shows two text fields added to a form. The first one is a '''Text''' type with character width set to 60 and the second one is a '''Password''' type with a default character width set by the browser.

	==Textarea ==		==Textarea ==