Watch the walkthrough
Generate a compact form, set name and email validation, inspect the generated submission function, test success and fallback feedback, and check desktop/tablet/phone layouts.
Watch tutorial (11:03)
Configure a page form to collect input and submit an action.
Recorded with an earlier Twidget interface. Names, control locations and available options may differ; use the linked documentation for current guidance.
Watch tutorial (1:58)
Connect forms and a table to task endpoints, then test create, update, delete, validation and error recovery.
Watch tutorial (20:27)Browse all video tutorials
Page forms are essential components in web applications that facilitate data collection from users. They streamline user interaction by providing a structured way to input data, which can then be processed for various purposes such as updating content or storing information in a database.
Key Concepts
Form Element: The foundational structure that encapsulates user inputs and defines the boundaries for data collection.
Input Types: Forms can utilize several input types, including:
Text Input: For single-line text entries.
Dropdowns: For selecting one option from a predefined list.
Checkboxes: For multiple selections or binary choices.
Submit Button: Initiates form submission, triggering any associated actions or data processing. The button does not need to be contained within the form element itself; however, it must be clearly associated with the form submission process.
Form Submission: Only inputs nested within the form are included in the submission payload. Actions can also be triggered independent of input locations.
Main Components and Workflow
Form Construction: Users define a form by adding various input types and a submission button. Each input is assigned a meaningful field name for identification.
Data Handling: Upon form submission, a predefined function is executed, using the values collected from the form to update variables on the page, such as a displayed text element.
User Interaction: Users can fill out the form and submit their data multiple times, with process updates visually reflected on the page through the associated text elements.
Summary
Page forms within the Twidget platform are versatile tools for retrieving and processing user data. By integrating form elements with backend functions, developers can create dynamic web experiences that respond to user input with real-time data updates.
