Form elements and their properties 

Text 

A single-line text field, e.g. for entering short information such as name, address, location. This element has the basic settings.

Textarea 

A multi-line text field, e.g. for the free input of continuous text. This allows the user to provide a short text such as a message. This element has the basic settings.

Password 

A single-line text field for entering a password. The browser "hides" the text input, i.e. the entered characters are not visible. This element has the basic settings.

Special elements 

Sometimes it is better to use special elements instead of simple text elements. Mobile devices such as smartphones display on-screen keyboards. If you use the "Email address" element the form field on the device will contain a "@" character in a central position and a validator will be triggered that checks for the input format "firstname.lastname@example.org".

Email address 

A single-line field for entering an email address. This element has the basic settings. In addition, the field has an Email validator (this is the only validator available for this form element).

Telephone number 

A single-line text field for entering a phone number. This element has the basic settings.

URL 

A single-line text field for entering a URL. A URL is typically an internet address, such as that of your website. This element has the basic settings

Number 

A single-line text field for entering a number. A user can increase and decrease the number in preconfigured steps using visual controls in the browser. This element has the basic settings. By default, the field has a Number validator. Additional settings:

• Step: Here you can enter a number that defines the step size. The step size is the amount by which a number is increased or decreased in the frontend.

Date 

A single-line text field for entering a date. Most modern browsers will also display a calendar from which the user can select the date. This element has the basic settings. Additional settings:

• Frequency: default value "1" means that the user can select every day.

Checkbox 

A simple checkbox. This element has the basic settings.

Single selectbox 

An element to create a drop-down list. This element has the basic settings. Additional settings:

• First option: Define the "empty option", i.e. the first element of the selectbox. You can use this to provide additional guidance for the user.

• Choices: A tool to insert and manage options.

  • Label: Name of the option.
  • Value: Value of the option. The system automatically sets the "Value" to the "Label". You can leave it like this if you are unsure of what you are doing.
  • Selected: Check this to pre-select an option in the frontend.
  • [ + ]: Adds a new line for a new option.

Radio buttons 

An element to display one or more radio buttons. This element has the basic settings. Additional settings:

• Choices: A tool to insert and manage the options.

  • Label: Name of the option.
  • Value: Value of the option. The system automatically sets the "Value" to the "Label". You can leave it like this if you are unsure of what you are doing.
  • Selected: Check this to pre-select an option in the frontend.
  • [ + ]: Adds a new line for a new option.

Multi checkbox 

An element to create one or more checkboxes. This element has the basic settings. Additional settings:

• Choices: A tool to insert and manage the options.

  • Label: Name of the option.
  • Value: Value of the option. The system automatically sets the "Value" to the "Label". You can leave it like this if you are unsure of what you are doing.
  • Selected: Check this to pre-select an option in the frontend.
  • [ + ]: Adds a new line for a new option.

Multi select 

An element to create a multiple selection. This element has the basic settings. Additional settings:

• First option: Define the "empty option", i.e. the first element of the select. You can use this to provide additional guidance for the user.

• Choices: A tool to insert and manage the options.

  • Label: Name of the option.
  • Value: Value of the option. The system automatically sets the "Value" to the "Label". You can leave it like this if you are unsure of what you are doing.
  • Selected: Check this to pre-select an option in the frontend.
  • [ + ]: Adds a new line for a new option.

Country select 

An element to create a country selectbox. This element has the basic settings Additional settings:

• First option: Define the "empty option", i.e. the first element of the select. You can use this to provide additional guidance for the user.
• Prioritized countries: A multi-selection of country names, which should be listed as the top options in the form element.
• Only countries: Restrict the countries to be rendered in the selection.
• Exclude countries: Define which countries should not appear in the selection.

File upload 

An element to upload a file to the File > Filelist module. This element has the basic settings. Additional settings:

• Allowed Mime Types: Select the allowed file extensions a user is able to upload.
• Storage path for uploads: Select the storage path in your TYPO3 installation. This is where the uploaded file will be saved.

Date picker 

A single-line text field to select a date using a calendar. A JavaScript library is used for this purpose. This form element is an alternative to the Date element, which is also supported by older browsers (e.g. Internet Explorer 11). However, it has limited accessibility. This element has the basic settings. Additional settings:

• Date format: select date format (e.g. d.m.Y or Y-m-d or d-m-Y)

  • d: day
  • m: month
  • Y: year

• Enable date selection: Check this to display a calendar.
• Show time selection: Check this to display two dropdowns for 'Hour' and 'Minute' respectively.

Hidden 

A field that is not visible in the frontend. The form element is inside the red rectangle in the image. Such a field might be needed for technical functionality, e.g. to add hidden values to a form. This element has the basic settings. Additional settings:

• Value: Here you can set a value for the element.

Image upload 

An element to upload an image to File > Filelist. This element has the basic settings. Other settings:

• Allowed Mime Types: Select the file extensions a user is allowed to upload.
• Storage path for uploads: Select the storage path in your TYPO3 installation. This is where the uploaded file will be saved.

Advanced password 

The element is analogous to the Password form element. A single-line text field is displayed for entering a password. The browser "hides" the text input, i.e. the entered characters are not visible. Another field is displayed below it so that the user has to repeat the password to prevent typing errors. This field is useful for registration forms. This element has the basic settings. Additional settings:

• Confirmation label: Label for the confirmation field.

Static text 

A field for static text. This text cannot be formatted, which means you can't insert links or highlight text. Instead, the text is output in the style of your website. The settings for this element are:

• Heading: Heading for the element.
• Text: Content for the element.

Content element 

You can display any content elements that are on your website. The settings for this element are:

• Content element uid: ID of the content element you want to display. You can either enter the ID manually or select it via the page tree. To do this, click on the "Page content" button.
• [ Page content ]: Modal which displays the page tree. You can select a page and the content element.

Fieldset 

This container groups form elements based on content. This is important for screen readers and helps you to improve the accessibility of your form. For example, in an "Address" fieldset you could have street, house number, postal code and city form elements. The settings for this element are:

• Field group name: Heading for the field group, e.g. "Address".

Grid 

Use this container element to place fields next to each other (create a visual structure).

The additional settings apply to the content elements inside the grid:

• Configuration Grid Area:

  • Areas: xs (Very small), sm (Small), md (Medium), lg (Large), xl (Extra large), xxl (Extra extra large).
  • These are the "breakpoints". These are ranges of resolutions or adaptations to different screen sizes. Smartphones, for example, have a low resolution range (xs or sm) and desktop monitors have a high resolution range (lg, xl or xxl). Use this to abstractly control how many elements are displayed next to each other in which resolution.

• Number of columns for grid area "xx":

  • Enter a number for the selected area.
  • The number determines how much space the field takes up on the different screen sizes and therefore how many elements are displayed next to each other.