CKSource

Inserting forms to your documents is an advanced feature that requires both knowledge of HTML and access to a server that would 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.

Form Element

The form 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 to your document, press the 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.

Form Properties dialog window in CKEditor

Below is an overview of all Form Properties dialog window elements:

• Name – the name of the form (name attribute).
• Action – the location of the application that processes the form data (action attribute).
• Id – the unique identifier for a form element in the document (id attribute).
• Encoding – the parameter that specifies how the form data should be encoded before sending to the server (enctype attribute).
• Target – the window where the results will be displayed after you send the form to the server (target attribute). You can choose between New Window (_blank), Topmost Window (_top), Same Window (_self), or Parent Window (_parent).
• Method – the way the data should be sent to the server (method attribute). You can choose between GET and POST.

Once you configure the form and click the OK button, the form area will be visible in CKEditor editing area as a frame with a red dotted border.

A form frame visible in the editing area of CKEditor

Since the form element is an empty container you need to add some form controls to make it usable. To do this, place the cursor inside the form frame and use further CKEditor form toolbar buttons.

Important 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

A checkbox is a form element that lets you select an item from the list and send your selection to the server when you are submitting the form. Checkboxes are usually used in groups and they differ from another form element, the radio button, in that more than one item can be selected at a time. To insert a checkbox to a document in CKEditor, place the cursor inside the form element and press the toolbar button. The Checkbox Properties dialog window that will open lets you set the name and value of a checkbox as well as decide whether it should be selected by default.

Checkbox Properties dialog window in CKEditor

Below is an overview of all Checkbox Properties dialog window elements:

• Name – the name of the checkbox element (name attribute).
• Value – the value of the checkbox element (value attribute).
• Selected – the parameter that specifies the default appearance of the checkbox — whether it is selected or not (checked attribute).

Once you configure the checkbox and click the OK button, the checkbox will be visible in CKEditor editing area and you will be able to add some text that describes the checkbox option.

A checkbox added to a form in CKEditor

Radio Button

A radio button is a form element that lets you select one item from the list and send your selection to the server when you are submitting the form. Radio buttons are usually used in groups and they differ from another form element, the checkbox, in that only one item can be selected at a time. To insert a radio button to a document in CKEditor, place the cursor inside the form element and press the toolbar button. The Radio Button Properties dialog window that will open lets you set the name and value of a radio button as well as decide whether it should be selected by default.

Radio Button Properties dialog window in CKEditor

Below is an overview of all Radio Button Properties dialog window elements:

• Name – the name of the radio button element (name attribute).
• Value – the value of the radio button element (value attribute).
• Selected – the parameter that specifies the default appearance of the radio button — whether it is selected or not (checked attribute).

Once you configure the radio button and click the OK button, the radio button will be visible in CKEditor editing area and you will be able to add some text that describes the radio button option.

A radio button added to a form in CKEditor

Text Field

A text field is a form element that lets you enter text into a single-line field and send your input to the server when you are submitting the form. Text fields differ from another form element, the textarea, in that they are single-line fields and thus are meant for shorter entries.

A text field element comes in two variants. The first one lets you enter the text and see it as you type. The second one is used for entering passwords and obscures the typed characters with an asterisk (*), a bullet (•), or another symbol used by the browser.

To insert a text field to a document in CKEditor, place the cursor inside the form element and press the toolbar button. The Text Field Properties dialog window that will open lets you set the name, value, type, and size of a text field.

Text Field Properties dialog window in CKEditor

Below is an overview of all Text Field Properties dialog window elements:

• Name – the name of the text field element (name attribute).
• Value – the value of the text field element (value attribute). This text will be visible in the text field when the form is loaded in the browser.
• Character Width – the width of the text field specified as the number of characters that will fit in the field (size attribute). If omitted, the text field will have a default size determined by the browser.
• Maximum Characters – the limit of characters that may be entered into the text field (maxlength attribute). If omitted, the length of text that you enter into the field will be unlimited and once you exceed the size of the box, the text will scroll to the right.
• Type – the parameter that specifies whether the form field will be used for plain text (type="text" attribute) or passwords (type="password" attribute).

Once you configure the text field and click the OK button, the text field will be visible in CKEditor editing area with the default value shown either as plain text or a series of asterisks/bullets.

Two text fields added to a form in CKEditor

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.