Field Reference

Complete reference for all Formdown field types, attributes, and patterns.

Field Types

Text Input Fields

Example:

@name: [text required]              # Standard text
@email: [email required]            # Email with validation
@email: @[]                         # Shorthand email
@password: [password minlength=8]   # Password field
@phone: tel:[]                      # Shorthand phone
@age: #[min=18 max=100]            # Number with constraints

Date and Time Fields

Example:

@birth_date: [date max="2010-12-31"]
@birth_date: date:[]                 # Shorthand
@meeting_time: time:[]               # Time only
@appointment: dt[]                   # Date and time
@birth_month: [month]               # Month picker

Text Area

Example:

@description: [textarea rows=4]
@description: T4[]                  # Shorthand with 4 rows
@bio: T[]                          # Default textarea

Selection Fields

Example:

# Radio buttons (single choice)
@size: [radio options="S,M,L,XL"]
@size{S,M,L,XL}: r[]               # Shorthand

# Single checkbox
@newsletter: [checkbox]
@newsletter: c[]                   # Shorthand

# Checkbox group (multiple choice)
@interests: [checkbox options="Web,Mobile,AI"]
@interests{Web,Mobile,AI}: c[]     # Shorthand

# Select dropdown
@country: [select options="USA,Canada,UK"]
@country{USA,Canada,UK}: s[]       # Shorthand

Special Input Types

Example:

@avatar: [file accept="image/*"]
@avatar: F[]                          # Shorthand
@volume: [range min=0 max=100 step=5]
@volume: R[min=0 max=100 step=5]      # Shorthand
@theme_color: [color value="#3366cc"]
@theme_color: C[]                     # Shorthand
@birth_month: [month]
@birth_month: M[]                     # Shorthand
@week_picker: [week]
@week_picker: W[]                     # Shorthand

Action Fields

Example:

@submit_form: [submit label="Send Message"]
@clear_form: [reset label="Clear All"]
@preview: [button label="Preview Form"]

Universal Attributes

All field types support these attributes:

Validation Attributes

Example:

@username: [text required minlength=3 maxlength=20]
@age: [number required min=18 max=120]
@phone: [tel pattern="\\(\\d{3}\\)\\d{3}-\\d{4}"]
@rating: [range min=1 max=5 step=1]

Selection Field Options

Options Attribute

For radio, checkbox groups, and select fields:

# Basic options
@size: [radio options="Small,Medium,Large"]

# Options with values
@country: [select options="us:United States,ca:Canada,uk:United Kingdom"]

# Shorthand syntax
@size{Small,Medium,Large}: r[]
@country{us:United States,ca:Canada,uk:United Kingdom}: s[]

Layout Options

For radio and checkbox groups:

Custom Labels

Three Ways to Define Labels

Label Generation Rules

Required Fields

Syntax Options

Example:

# These are equivalent
@email*: @[]
@email: [email required]

# Combined with custom labels
@user_email(Email Address)*: @[]
@user_email: [email required label="Email Address"]

Shorthand Reference

Type Markers

Content Patterns

Complex Examples

# Registration form with shorthand
@username*{^[a-zA-Z0-9_]{3,20}$}: [placeholder="3-20 characters"]
@email*: @[]
@password*{^(?=.*[A-Z])(?=.*[a-z])(?=.*\\d).{8,}$}: ?[]
@age: #[min=18 max=100]
@gender{male,female,other}: r[]
@interests{Web,Mobile,AI,Gaming}: c[]
@newsletter(Subscribe to updates): c[]
@submit: [submit label="Create Account"]

HTML Output

Generated Structure

@email(Email Address): [email required class="form-control"]

Renders to:

<div class="formdown-field">
    <label for="email">Email Address *</label>
    <input type="email" 
           id="email" 
           name="email" 
           required 
           class="form-control">
</div>

CSS Classes

Data Collection

Form data is collected using field names as keys:

@first_name: []
@email_address: @[]
@age: #[]
@interests{Web,Mobile}: c[]

Collected data:

{
  "first_name": "John",
  "email_address": "john@example.com",
  "age": 25,
  "interests": ["Web", "Mobile"]
}

Best Practices

Field Naming

• Use snake_case for consistency: first_name, email_address
• Avoid starting with numbers: user_1 not 1st_user
• Be descriptive: phone_number not phone

Label Strategy

• Use parentheses for simple custom labels: @field(Label):
• Use label= attribute for complex labels with quotes
• Let smart generation handle simple cases: @first_name: []

Validation

• Always mark required fields: @field*: or required
• Use appropriate input types: @[] for email, #[] for numbers
• Add constraints: min, max, pattern as needed

Shorthand Usage

• Use shorthand for common patterns: @email*: @[]
• Mix shorthand and full syntax as needed
• Prioritize readability over brevity