LogoLogo
Try it outResourcesAPIsAddOnsBook a demo
  • Getting Started
    • Introduction to Beefree SDK
      • Create an Application
      • Installation and Fundamentals
        • Configuration parameters
          • Configuration Reload
          • Workspaces
          • Debugging the Beefree SDK Editor
        • Methods and Events
        • Authorization Process
        • How the UID parameter works
        • Set up two-factor authentication
        • Naming conventions
      • Development Applications
      • Manage Users
      • Manage Subscriptions
      • Installation and Fundamentals
    • Tracking Message Changes
    • Sample Code
    • Release Candidate Environment
  • Visual Builders
    • Email Builder
    • Page Builder
      • Integrating Page Builder
      • Embedding videos in a page
    • Popup Builder
      • Popup Builder - Getting Started
      • Testing and Integrating
      • Setting layout and size
        • Advanced settings
    • AI-Driven Design Creation
  • APIs
    • Content Services API
      • Authentication
      • Export
      • Convert
      • Row Processing
      • AI Collection
      • Brand Style
    • Template Catalog API
      • Authentication
      • Templates
      • Categories
      • Collections
      • Designers
      • Tags
    • HTML Importer API
      • Authentication
      • Import HTML
  • Forms
    • Form Block
    • Integrating and using the Form block
      • Passing forms to the builder
      • Form structure and parameters
      • Form layout customization
      • Allowed form fields
      • Edit form field modal
  • Rows
    • Reusable Content
      • Create Reusable Content
        • Pre-build Reusable Content
          • Implement Custom Rows
        • Save Reusable Content
          • Implement Hosted Saved Rows
          • Implement Self-hosted Saved Rows
            • Self-hosted Saved Rows Concepts and Tutorial
      • Sync Reusable Content
        • Implement Synced Rows
        • Initialize Edit Single Row Mode
      • Manage Reusable Content
    • Storage for Reusable Content
      • Hosted Saved Rows
      • Self-Hosted Saved Rows
  • File manager
    • File manager application overview
      • Mime Types and Groups
  • Server-side configurations
    • Server-side options
      • Toolbar options
      • Storage options
        • Configure your AWS S3 bucket
        • Connect your file storage system
      • Content options
      • Services options
      • Undo & Changes history
      • Custom JavaScript Libraries Injection
  • Other Customizations
    • Advanced options
      • Special Links and Merge Tags
      • Content Dialog
      • Custom Color Palette
      • Font management
      • Roles and Permissions
      • Smart Merge Tags
      • Commenting
      • Custom Attributes
      • Meta Tags
      • Custom Languages
      • Display Conditions
      • Advanced Permissions
      • Custom File Picker
      • Custom Headers
    • Appearance
      • Content Defaults
      • Custom Sidebar Position
      • Content Tile Sorting
      • Content Tile Grouping
      • Loading Spinner Theme
      • Custom Tab Layout
      • Themes
      • Custom CSS
        • Change Log
    • AMP for Email
    • Collaborative Editing
      • Co-editing Integration Guide
    • Mobile Design Mode
    • Multi-language Templates
    • Cards Style and Image Round Corners
    • Hover Effect for Buttons
    • Content Area Padding
    • Line Height
  • Data Structures
    • Getting Started
    • Schema Catalog
    • Simple Schema
      • Template Schema
      • Definitions Schema
      • Row Schema
      • Column Schema
      • Title Schema
      • Image Schema
      • Button Schema
      • Paragraph Schema
      • HTML Schema
      • Menu Schema
      • List Schema
      • Icon Schema
      • Divider Schema
    • Row Metadata
    • Form Validation Schema
    • Comments Schema
      • Change Schema for Comments
  • Builder AddOns
    • AddOns
      • AddOns Overview
      • Partner AddOns
        • Partner AddOns directory
        • Installing Partner AddOns
        • DeepL
        • Stability AI
        • Azure AI Vision - Image Analysis
          • Alternate Text Generation with AI
          • AI Alt Text Bulk Generation
        • AI Writing Assistant
          • Available Providers
            • OpenAI
            • Azure OpenAI
            • Anthropic
          • AI Providers and Data Security
          • AI-Generated Meta Tag Fields
          • Token Upselling
          • Apply a Brand Tone
        • Custom AI Writing Assistant
      • Custom AddOns
        • AddOn Development
        • Contribute to the Partner AddOn Marketplace
      • AddOns Configuration
      • AddOn FAQs
  • Resources
    • Error Management
      • onWarning
      • Beefree SDK Editor Errors
      • File System Provider errors
      • JSON Parser errors
      • Template Validation and Update
      • Template validation and update errors
    • Scheduled maintenances
Powered by GitBook
LogoLogo

Policies

  • Privacy & Cookies
  • Terms of Services
  • GDPR Compliance
  • Trust Center

Contact Us

  • Submit a request
  • Book a demo
  • Report a security issue

Resources

  • Developer website
  • Create a Developer Account

© Bee Content Design, Inc. San Francisco, CA | Part of Growens

On this page
  • Global Attributes
  • Unique Attributes
  • Checkbox Field
  • Color Field
  • Datalist Field
  • Date Field
  • Datetime-Local Field
  • Email Field
  • File Field
  • Hidden Field
  • Image Field
  • Label Field
  • Month Field
  • Number Field
  • Password Field
  • Radio Field
  • Range Field
  • Select Field
  • Search Field
  • Submit Field
  • Tel Field
  • Text Field
  • Textarea Field
  • Time Field
  • URL Field
  • Week Field

Was this helpful?

Export as PDF
  1. Forms
  2. Integrating and using the Form block

Allowed form fields

This page provides a comprehensive list of HTML form field types, detailing their unique attributes and options, along with global attributes that apply to all fields.

PreviousForm layout customizationNextEdit form field modal

Last updated 7 months ago

Was this helpful?

Global Attributes

The following global attributes are applicable across all field types. They define essential properties related to accessibility, content structure, behavior, and presentation. Reference the Global attributes and Attributes sub-sections of the to try out the attributes and learn more about their specifications.

List of Global Attributes and their corresponding explanations:

  • accesskey: Defines a shortcut key to activate or focus an element.

  • class: Assigns one or more class names to an element, used for styling and script interaction.

  • contenteditable: Indicates whether the content of the element is editable.

  • dir: Specifies the text direction (ltr, rtl, or auto).

  • disabled: Disables an element, making it not selectable.

  • readonly: Prevents modification of the element’s content while still allowing interaction.

  • draggable: Allows the element to be dragged.

  • hidden: Hides the element.

  • id: Assigns a unique identifier to an element.

  • name: Specifies the name of the form control. Reference the mdn web docs on the name attribute to try it and learn more about its specifications.

  • itemid: Provides a unique identifier for items when using microdata.

  • itemprop: Specifies properties for microdata.

  • itemref: References other items related to the current item for microdata.

  • itemscope: Defines the scope of an item for microdata.

  • itemtype: Defines the type of an item for microdata.

  • lang: Declares the language of the element’s content.

  • tabindex: Defines the tab order for focusable elements.

  • title: Provides additional information about an element, often used as a tooltip.

  • value: Specifies the value of the input element.

Unique Attributes

Checkbox Field

The checkbox field allows users to select multiple options from a list. It is often used to toggle between two states, like "checked" or "unchecked."

Unique Attributes:

  • checked (boolean): Specifies whether the checkbox is selected by default.

Available Options:

  • options: An array of options, each with:

    • value (string)

    • label (string)

Color Field

The color field allows users to select a color from a color picker.

Unique Attributes:

  • autocomplete (string): Specifies if the browser should provide autocomplete suggestions.

  • list (string): Refers to a <datalist> that provides predefined color options.

  • required (boolean): Specifies that the field must be filled before form submission.

Datalist Field

The datalist field provides a list of predefined options for other input fields, enhancing usability by offering suggestions.

Unique Attributes:

No unique attributes.

Available Options:

  • options: An array of options, each with:

    • value (string)

Date Field

The date field allows users to select a date, displayed as a date picker.

Unique Attributes:

  • autocomplete (string): Specifies if the browser should suggest previously entered dates.

  • max (string): Sets the maximum date allowed.

  • min (string): Sets the minimum date allowed.

  • required (boolean): Specifies that a date must be selected before submission.

  • step (string): Specifies the granularity of selectable dates (e.g., steps in days).

Datetime-Local Field

The datetime-local field allows users to input both a date and a time.

Unique Attributes:

  • autocomplete (string)

  • max (string): Sets the maximum allowed date and time.

  • min (string): Sets the minimum allowed date and time.

  • required (boolean): Requires a date and time before form submission.

  • step (string): Specifies the granularity of selectable times (e.g., steps in minutes).

Email Field

The email field is used for inputting one or more email addresses.

Unique Attributes:

  • autocomplete (string)

  • maxlength (string): Specifies the maximum number of characters allowed.

  • minlength (string): Specifies the minimum number of characters required.

  • multiple (boolean): Allows multiple email addresses.

  • placeholder (string): Displays a hint to the user.

  • required (boolean): Requires an email address before form submission.

  • size (string): Sets the visible width of the input.

File Field

The file field allows users to upload one or more files from their device.

Unique Attributes:

  • accept (string): Specifies the types of files accepted by the server (e.g., image/png).

  • capture (string): Allows capturing images/audio from the camera/microphone if supported.

  • multiple (boolean): Allows selecting multiple files.

  • required (boolean): Specifies that at least one file must be uploaded.

Hidden Field

The hidden field stores data that the user cannot see or interact with but is submitted with the form.

Unique Attributes:

  • autocomplete (string)

Image Field

The image field creates a graphical submit button using an image.

Unique Attributes:

  • alt (string): Provides alternate text if the image cannot be displayed.

  • height (string): Specifies the image URL.

  • src (string): Defines the height of the image (in pixels).

  • width (string): Defines the width of the image (in pixels).

Label Field

The label field associates a text label with a form control, improving accessibility.

Unique Attributes:

No unique attributes.

Month Field

The month field allows users to select a month and year without choosing a specific day.

Unique Attributes:

  • autocomplete (string)

  • max (string): Specifies the latest allowed month.

  • min (string): Specifies the earliest allowed month.

  • required (boolean): Ensures a selection is made before form submission.

  • step (string): Defines the interval for month selection.

Number Field

The number field allows users to input numeric values.

Unique Attributes:

  • autocomplete (string)

  • max (number): Sets the maximum allowed value.

  • min (number): Sets the minimum allowed value.

  • required (boolean): Requires a numeric value before submission.

  • step (number): Specifies the allowed increment for numbers.

Password Field

The password field allows users to input masked text (e.g., passwords).

Unique Attributes:

  • autocomplete (string)

  • maxlength (string): Limits the number of characters allowed.

  • minlength (string): Sets the minimum number of characters required.

  • pattern (string): Specifies a regular expression for validation.

  • placeholder (string): Provides a hint to the user.

  • required (boolean): Specifies that the field must be filled.

  • size (string): Defines the visible width of the input.

Radio Field

The radio field allows users to select one option from a group.

Unique Attributes:

  • checked (boolean): Indicates whether the radio button is selected by default.

  • required (boolean): Specifies that one option must be selected before form submission.

Available Options:

  • options: An array of options, each with:

    • value (string)

    • label (string)

Range Field

The range field allows users to select a numeric value within a range, often displayed as a slider.

Unique Attributes:

  • autocomplete (string)

  • max (number): Sets the maximum allowed value.

  • min (number): Sets the minimum allowed value.

  • step (number):Defines the granularity of the range (e.g., steps in increments of 1 or 10).

Select Field

The select field creates a dropdown list that allows users to choose one or more options.

Unique Attributes:

  • autocomplete (string)

  • multiple (boolean): Allows multiple selections if set to true.

  • required (boolean): Specifies that the user must select at least one option.

  • size (string): Defines the number of visible options in the dropdown.

Available Options:

  • options: An array of options, either:

    • option elements, with:

      • value (string)

      • label (string)

    • optgroup elements, containing groups of options.

Search Field

The search field allows users to enter search queries with specialized input handling.

Unique Attributes:

  • autocomplete (string)

  • dirname (string): Submits the text directionality of the search field with the form.

  • maxlength (string): Limits the number of characters allowed in the input.

  • minlength (string): Specifies the minimum number of characters.

  • placeholder (string): Provides a hint about the expected input.

  • required (boolean): Ensures that a search term is entered before submission.

Submit Field

The submit field creates a button that submits the form data.

Unique Attributes:

  • data-sitekey (string): Used in conjunction with reCAPTCHA to verify form submissions.

  • data-callback (string): Defines a JavaScript function to be executed after submission.

  • data-action (string): Defines an action to be associated with the submit button.

  • width (string): Defines the width of the submit button.

Tel Field

The tel field allows users to enter telephone numbers.

Unique Attributes:

  • autocomplete (string)

  • maxlength (string): Limits the number of characters allowed.

  • minlength (string): Sets the minimum number of characters required.

  • pattern (string): Provides a pattern for validation (e.g., for formatting telephone numbers).

  • placeholder (string): Displays a hint about the expected input.

  • required (boolean): Specifies that a telephone number must be entered before submission.

  • size (string): Defines the visible width of the input.

Text Field

The text field allows users to input text.

Unique Attributes:

  • autocomplete (string)

  • maxlength (string): Limits the number of characters allowed.

  • minlength (string): Specifies the minimum number of characters.

  • pattern (string): Provides a regular expression for validation.

  • placeholder (string): Displays a hint for the expected input.

  • required (boolean): Ensures that a value is entered before form submission.

  • size (string): Specifies the visible width of the text input.

Textarea Field

The textarea field allows for multi-line text input, offering more space than the text field.

Unique Attributes:

  • autocomplete (string)

  • cols (number): Defines the visible width of the textarea in characters.

  • rows (number): Defines the visible height of the textarea in lines.

  • maxlength (string): Limits the number of characters allowed.

  • minlength (string): Sets the minimum number of characters required.

  • placeholder (string): Provides a hint about the expected input.

  • spellcheck (string): Enables or disables spell checking.

  • wrap (string): Controls text wrapping behavior (e.g., "hard" or "soft").

  • required (boolean): Specifies that input is mandatory before form submission.

Time Field

The time field allows users to input a time (hours, minutes, and optionally seconds).

Unique Attributes:

  • autocomplete (string)

  • max (string): Sets the latest allowable time.

  • min (string): Sets the earliest allowable time.

  • required (boolean): Requires a time to be entered before form submission.

  • step (string): Specifies the time granularity (e.g., steps in seconds).

URL Field

The url field is used for inputting valid URLs.

Unique Attributes:

  • autocomplete (string)

  • maxlength (string): Sets the maximum number of characters allowed.

  • minlength (string): Specifies the minimum number of characters required.

  • placeholder (string): Provides a hint for the expected input.

  • required (boolean): Ensures that a valid URL is entered before form submission.

Week Field

The week field allows users to select a specific week within a year.

Unique Attributes:

  • autocomplete (string)

  • max (string): Specifies the latest week that can be selected.

  • min (string): Specifies the earliest week that can be selected.

  • required (boolean): Requires a week to be selected before form submission.

  • step (string): Specifies the granularity of week selection.


The following sections list the unique attributes for each field type. Reference the to try out and learn more about unique attributes outlined in the subsequent sections.

Note: apply to each of the field types listed in the following sections.

HTML reference in mdn web docs
<input> types sub-section of the HTML Reference section of the mdn web docs
Global Attributes