Zingy Docs
Visit our websiteTry a DemoPricingContact
  • Introduction
  • 🎛️Dashboard
    • Overview
    • Apps
    • Account Profile
    • Billing - View Invoices
    • Billing - Payment Methods
    • Billing - Subscription
  • 💻App Editor
    • App Components
    • App Editor Tour
    • App Settings
    • App Users
    • App User Groups
    • Publishing your App
    • Pages and Forms
      • Create a Page
      • Create a Structured Page
      • What is a Structured Page ?
      • Create a Form
      • Page Editor
      • Working with Forms
    • Page Editor
      • Page Editor Tour
      • Adding Page Content
      • Adding Content to Structured Pages
      • Working with Page Elements
      • Page Element Settings
      • Responsive Design
      • Padding and Margin
      • Editing Text
      • Using AI Wiz in the Page Editor
      • Built-in elements
        • Link
        • Image
        • Spacer
        • Flexible Area
        • Layout Container
        • Layout Row
        • Layout Column
        • 1 Column
        • 2 Columns
        • 3 Columns
        • Add Column
        • Table
        • Table Row
        • Table Column Cell
        • Table Heading Cell
        • Table (3 cols)
        • Table (4 cols)
        • Input
        • Checkbox
        • Toggle Switch
        • Dropdown
        • Multi-line
        • Label
        • Button
        • Button Group
        • Input Group
        • Button Toolbar
        • Menubar Holder
        • Menubar Collapsible
        • Menubar
        • Menubar Item
        • Menubar Item Link
        • Menubar Style1
        • Menubar Style2
        • Menu Item
        • Popup Menu
        • Popup Menu Item
        • Menubar Popup Menu
        • Popup Menu Style1
        • Popup Menu Style2
        • Popup Menu Separator
        • Card
        • Card Group
        • Card Style1
        • Card Style2
        • Card Style3
        • Alert
        • Badged Text
        • Collapsible Area
        • Data Table
        • Stripe Payment
        • Form
        • Menubar Login Info
        • Data Design
      • Working with Forms
      • Using Forms
      • Page Preview
    • Page Settings
    • Page Flow
      • Block Anatomy
      • Toolbox Blocks
        • Set Content
        • Get Content
        • Badged Text
        • Alert Text
        • Status Animation
        • Set Style
        • Set CSS
        • Set Input Value
        • Get Input Value
        • Set Toggle Switch State
        • Get Toggle Switch State
        • Set Input Feedback
        • Enable/Disable Element
        • Set Element Attribute
        • Get Element Attribute
        • Get Element by Name
        • Element
        • URL Parameter Value
        • Navigate Page
        • Timer
        • Timer Repeat
        • Show Popup Form
        • Show Information Popup
        • Show Confirmation Popup
        • Popup Form Data
        • Collapsible Area Action
        • Mouse/Keyboard Action
        • Event Action
        • Action/Event Info
        • Show Menu
        • Menu Text
        • Menu Index
        • Write Log Message
        • Log Category
        • Data Table Action Menu Customize
        • Data Table Attach Form
        • Data Table Add Action
        • Data Table Load Next Page
        • Data Table Load Prev Page
        • Data Table Refresh
        • Data Table Custom Query
        • Data Table : Table Name
        • Data Table : Data
        • Content from Data Design
        • Set Content in Data Design
        • Get Content in Data Design
        • Get Element Attribute in Data Design
        • Set Element Attribute in Data Design
        • Set Style in Data Design
        • Set CSS in Data Design
        • Set Input Value in Data Design
        • Get Input Value in Data Design
        • Get Toggle Switch State in Data Design
        • Set Toggle Switch State in Data Design
        • Set Input Feedback in Data Design
        • Enable/Disable Element in Data Design
        • Initialize Toggle Switch in Data Design
        • Event Action in Data Design
        • Collapsible Area Action in Data Design
        • Data Record Count
        • Data Record at Index
        • Data Record Loop
        • Data Record Info
        • Data Record Loop Index
        • Data Record ID
        • Data Table Name
        • Data Query Name
        • Data Read
        • Data Read Next
        • Data Read Previous
        • Data Lookup
        • Data Lookup with ID
        • Data Status
        • Data Add Record
        • Data Update Record with ID
        • Data Delete Record with ID
        • Data Input Popup
        • Lock/Unlock Form
        • Save Form with Data
        • Reset Form
        • Set Form Event Status
        • Set Form Event Status Message
        • Form Submit Complete
        • Set Field Input Value
        • Get Field Input Value
        • Form Data
        • Form in Edit Mode
        • Form Events
        • Execute Connection Command
        • Execute API Call
        • Connection Data
        • Connection Error
        • API Call Connection
        • Connection
        • Connection Command
        • Cloud Flow Invoke Hook
        • Cloud Flow : URL of Web Hook
        • HTTP Post
        • HTTP Get
        • HTTP Data
        • HTTP Error
        • Date
        • Custom Code
        • Date from Text
        • Get Object Property
      • Coding in Page Flow
      • Zingy API For Page Flow
      • References
        • Value Types
        • Popup Customization
        • Prerequisite for Dynamic Content block examples
        • Prerequisite for Data examples
    • Dynamic Content
    • Data
      • Database Tables
      • Database Queries
      • Data Tool
    • Cloud Flow
      • Cloud Flow Editor
      • Block Anatomy
      • Toolbox Blocks
        • Data Update Records
        • Data Delete Records
      • Coding in Cloud Flow
      • SDK/Library Integration
    • Media
    • Connections
      • Services
        • Stripe
        • Sendgrid
        • Twilio
        • API Call
        • API Key
Powered by GitBook
On this page
  • Options
  • Type
  • Title
  • Place Holder
  • Initial Value
  • Autocomplete
  • Numeric/Range Min
  • Numeric/Range Max
  • Form Field Name
  • Mandatory
  • Form Control
  • Form Control Size
  1. App Editor
  2. Page Editor
  3. Built-in elements

Input

PreviousTable (4 cols)NextCheckbox

Last updated 1 year ago

Use the Input element to interact with users and accept data.

This element is also part of the and composite elements, where the Type is set to Checkbox (see below).

If you are designing a Form, you can use the automatically created Data Field Input elements to accept data from the user. See for more information. The Input element is a part of the Data Field Input composite elements.


Options

Type

Controls the type and design of the element.

The possible values are:

  • Text:

    Accepts any general input.

  • Date

    Accepts a date in the format set in the user's locale. e.g. MM/DD/YYYY/etc. Most modern browsers will show a date picker to allow the user to conveniently pick a date.

  • Date/Time

    Accepts a date and time in the format set in the user's locale e.g. MM/DD/YYYY/etc. Most modern browsers will show a date and time picker.

  • Time

    Accepts the time in the format set in the user's locale. Most modern browsers will show a time picker.

  • Week

  • Month

  • URL

    Accepts a URL.

  • Number

    Accepts a numeric value. You can use this in conjunction with Numeric/Range Min and Numeric/Range Max settings.

  • Phone

    Accepts a phone number.

  • Email

    Accepts an email address.

  • Password

    Accepts a password.

  • Color Picker

    Shows a color picker.

  • Range

    Use this in conjunction Numeric/Range Min and Numeric/Range Max settings to show a slider.

  • Checkbox

Title

Enter the text you want displayed in the tooltip shown by the browser when a user hovers over the element.

Place Holder

Enter the text you want displayed inside the element as a hint to the user. The place holder appears only when the element is empty and automatically disappears when the user types inside the element.

Initial Value

If you want the element to already have an entered value, you set it here.

Autocomplete

Allows you to provide a hint to the browser's autocomplete functionality.

Possible values are:

  • Default

    Use the browser's default behavior for the current user.

  • off

    Suggest the browser to not use autocomplete for this element.

  • on

    Suggest the browser to use autocomplete for this element.

Numeric/Range Min

For elements with the Type setting of Numeric or Range, you can specify the minimum allowed value.

Numeric/Range Max

For elements with the Type setting of Numeric or Range, you can specify the maximum allowed value.

Form Field Name

If you are implementing a completely custom HTML form on your page, use this to set the value of the name attribute for this element.

Mandatory

Form Control

Form Control Size

Use this in conjunction with the Form Control setting. Control the size of the input element.

The settings for this element are described below:

Allows the user to select a week. For more information see . Safari and Firefox browsers do not support this currently.

Allows the user to select a month. For more information see . Safari and Firefox browsers do not support this currently.

Shows a checkbox. This is used internally by the and composite elements.

Set this to yes If you want to make sure a valid data is entered for this element. This is used in and can also be used if you are implementing a completely custom HTML form on your page.

This is used in and adds a consistent design/style to your input element. Additionally this also enables so that you can communicate whether the value is valid or invalid. Use this in conjunction with the Form Control Size setting.

💻
here
here
Checkbox
Toggle Switch
forms
forms
feedback control for the element
Checkbox
Toggle Switch
Working with Forms
Options tab
Input Element