AppML Forms — Creating and Customizing Data Entry Interfaces

In this tutorial, you will learn about AppML Forms. We cover key concepts, practical examples, and best practices to help you master this topic.

AppML forms are the primary way users enter and edit data. They are automatically generated from your model but fully customizable through form-specific configuration and templates.

What You'll Learn

You will configure form layouts, add client and server-side validation, create dependent dropdowns, implement file uploads, and build multi-step data entry workflows.

Why It Matters

Forms are where users interact with your data. Well-designed forms reduce input errors, improve data quality, and make your application feel professional. AppML handles the boilerplate while you customize the experience.

Real-World Use

Durga Antivirus Pro uses an AppML form for threat report submissions. The form includes dependent dropdowns for threat category and subcategory, file upload for sample files, and real-time validation of hash values.

flowchart LR
    A[Model Definition] --> B[Form Generator]
    B --> C[Field Inputs]
    B --> D[Validation Rules]
    B --> E[Submit Handling]
    C --> F[HTML Form]
    D --> F
    E --> G[Database]
    style B fill:#1e293b,color:#fff
    style F fill:#0f172a,color:#fff

Basic Form Configuration

By default, AppML generates a form for every model with all non-key fields as inputs.

<view type="detail" table="products">
  <form>
    <field ref="name" label="Product Name"/>
    <field ref="price" label="Price" type="number" step="0.01"/>
    <field ref="category" label="Category" type="dropdown">
      <option value="Electronics">Electronics</option>
      <option value="Clothing">Clothing</option>
      <option value="Books">Books</option>
    </field>
    <field ref="description" label="Description" type="textarea" rows="5"/>
    <field ref="active" label="Active Product" type="checkbox"/>
  </form>
</view>

Expected output: A form with text input for name, number input for price, dropdown for category, textarea for description, and checkbox for active status.

Form Validation

Add validation rules directly in the form configuration.

<form>
  <field ref="email" label="Email Address"
    required="true"
    pattern="^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$"
    message="Please enter a valid email address"/>
  <field ref="age" label="Age"
    type="number"
    min="18"
    max="120"
    required="true"/>
  <field ref="website" label="Website URL"
    type="url"/>
</form>

Expected output: The browser validates the email format, age range, and URL format before submission. Server-side validation provides additional protection.

Dependent Dropdowns

Create dropdowns that change their options based on other field values.

<form>
  <field ref="country" label="Country" type="dropdown" id="country">
    <option value="US">United States</option>
    <option value="CA">Canada</option>
    <option value="UK">United Kingdom</option>
  </field>
  <field ref="state" label="State/Province" type="dropdown"
    depends_on="country">
    <option value="" depends="US">Select State</option>
    <option value="CA" depends="US">California</option>
    <option value="NY" depends="US">New York</option>
    <option value="TX" depends="US">Texas</option>
    <option value="ON" depends="CA">Ontario</option>
    <option value="BC" depends="CA">British Columbia</option>
    <option value="LDN" depends="UK">London</option>
    <option value="MAN" depends="UK">Manchester</option>
  </field>
</form>

Expected output: Selecting a country filters the state dropdown to show only relevant options. Changing the country resets the state selection.

File Uploads

Handle file uploads through the form with automatic validation.

<form enctype="multipart/form-data">
  <field ref="avatar" label="Profile Photo" type="file"
    accept="image/*"
    max_size="2097152"
    path="/uploads/avatars/"/>
  <field ref="resume" label="Resume PDF" type="file"
    accept=".pdf"
    max_size="5242880"/>
</form>

Expected output: File picker filtered by accepted types. Files larger than the max size are rejected. Uploaded files are stored in the specified path.

Multi-Step Form Layout

Break long forms into steps for better user experience.

<form>
  <step title="Basic Information">
    <field ref="name" label="Full Name"/>
    <field ref="email" label="Email"/>
  </step>
  <step title="Address">
    <field ref="address" label="Street Address"/>
    <field ref="city" label="City"/>
    <field ref="zip" label="Postal Code"/>
  </step>
  <step title="Preferences">
    <field ref="newsletter" label="Subscribe to newsletter" type="checkbox"/>
    <field ref="theme" label="Preferred Theme" type="dropdown"/>
  </step>
</form>

Expected output: A wizard-style form with step navigation. Users fill one section at a time with Previous and Next buttons.

Common Mistakes

1. Not setting the enctype for file uploads: Forms with file inputs must have enctype="multipart/form-data" or the upload fails silently.

2. Overloading forms with too many fields: Forms with more than 15 fields on one page overwhelm users. Use multi-step forms or sections.

3. Forgetting client-side validation patterns: Pattern attributes for email, URL, and phone number are regex. Test them to ensure they match your data requirements.

4. Not handling nullable fields properly: Fields that can be null in the database should not be marked required. Configure default values instead.

5. Using text inputs for controlled data: Fields with a fixed set of valid values should use dropdowns or radio buttons, not free-text inputs.

Practice Questions

1. How do you add client-side validation to an AppML form field?

Use attributes like required, pattern, min, max, and type on the field element.

2. What attribute creates a dependent dropdown that filters options based on another field?

The depends_on attribute on the field element, combined with depends on each option.

3. How do you configure file upload limits in AppML forms?

Use the max_size attribute on the file field, specified in bytes.

4. What is the purpose of multi-step forms?

They break long forms into manageable sections, reducing user overwhelm and improving completion rates.

5. How do you change a text input to a dropdown in AppML forms?

Set type="dropdown" on the field and provide <option> child elements.

Challenge

Create a multi-step registration form with dependent dropdowns (country-state-city), file upload for profile photo, and validation for email and phone number. Test with different country selections to verify the dependency chain works.

Frequently Asked Questions

Mini Project

Build a job application form with three steps: personal information, work experience (with repeatable sections), and document upload. Include dropdowns for country, state, and job position with dependencies, and validate email, phone, and file size.

What's Next

Continue to AppML Events to learn how to handle custom business logic through AppML event handlers.