elmau
/
docs.liberaforms.org
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
docs.liberaforms.org/src/en/forms/elements.md

3.3 KiB
Raw Blame History

Form elements

A form contains elements. Elements are the building blocks of a form.

There are two basic types of elements:

  1. Fields: Fields solicit information from the user.
  2. Texts: Texts only display text. They can be used to orientate the user.

1. Fields

There are different types of fields. Short texts, long texts, checkboxes, dates, etc.

Fields share these common options:

  • Required: The form will not submit if this element is not complete.
  • Label: A short text. This is the new element's name.
  • Help text: A longer text. Use this to a description.

Text Field

Displays a Text field. Text fields are short, one line texts.


Use this element to solicit information like a Name, Postcode, etc.

Text Area

Displays a Textarea field.


Use this element to solicit extended information like an Opinion.

Select

Displays a dropdown list of selectable options.

Early morning session Early afternoon session Evening session

Checkbox Group

Displays a group of checkboxes. Multiple options may be selected.

  Early morning session
  Early afternoon session
  Evening session

  • Inline: Display the options horizontally.
  • Options: Define selectable options. See Multiple options.

Radio Group

Displays a group of radios. Only one option may be selected.

 
 
 

  • Inline: Display the options horizontally.
  • Options: Define selectable options. See Multiple options.

Date Field

Displays a Date field.

Number

Displays a Number field.

Multiple options

The left column contains the text the user will see. The right column contains the value that will be saved in the database.

Select element options

For example, you may wish to display an option called 'Early afternoon session'. That is clear for the user of your form, but you only really need to save the word 'afternoon' in the database.

Using short names for the database will make it easier later when reading spreadsheets for example.

2. Texts

These elements only display text. They do not solicit information.

Header

Displays a line of text to the user.

  • Label: The text to be displayed.
  • Type: The size of the text. h1 biggest, h6 smallest.

Paragraph

Displays a paragraph of text to the user.

  • Content: The text to be displayed.