feat(gnoweb): form - input md extension

[alexiscolin]

This PR introduces secure and interactive form handling capabilities to Gno realms, enabling user input through markdown-based forms with built-in security measures.

Technical Implementation

HTTP Handler Enhancements

• Implemented POST request handling with form data processing in realms
• Automatic transformation of form data into query parameters
• GET request redirection for state management
• Integration with the mux package for internal realm argument modification

Markdown Extensions

• Introduced custom HTML tags:
  • <gno-form>: Container for form elements
  • <gno-input>: Text input fields (text only)
• Attribute Support:
  • Required name attribute for input identification
  • Optional placeholder for user guidance
• Automatic UI Components (for Security and UX):
  • Submit button generation
  • Input labels with placeholder fallback
  • Realm namespace display
  • Security tooltip

Security & UX Features

• Realm-specific form processing (no cross-realm submissions)
• Clear visual indication of form ownership
• Security tooltip explaining the local processing
• Automatic label generation with placeholder fallback
• Input validation and error handling

Validation Rules

• Required name attribute enforcement
• Nested form prevention
• Duplicate attribute detection
• Proper HTML tag closure verification

Example Implementation

<gno-form>
  <gno-input name="username" placeholder="Enter your name" />
  <gno-input name="email" placeholder="Enter your email" />
</gno-form>

When submitted, the form data is automatically transformed into query parameters and redirected as a GET request. The realm must implement the necessary logic to handle these parameters and update its state accordingly.

Security Considerations

• All form processing occurs within the realm's namespace
• No cross-realm form submissions allowed
• Input validation at both client and server levels
• Clear visual indicators of form ownership and security

[Gno2D2]

🛠 PR Checks Summary

All Automated Checks passed. ✅

Manual Checks (for Reviewers):

• IGNORE the bot requirements for this PR (force green CI check)

Read More

🤖 This bot helps streamline PR reviews by verifying automated checks and providing guidance for contributors and reviewers.

✅ Automated Checks (for Contributors):

🟢 Maintainers must be able to edit this pull request (more info)
🟢 Changes related to gnoweb must be reviewed by its codeowners
🟢 Pending initial approval by a review team member, or review from tech-staff

☑️ Contributor Actions:

1. Fix any issues flagged by automated checks.
2. Follow the Contributor Checklist to ensure your PR is ready for review.
   • Add new tests, or document why they are unnecessary.
   • Provide clear examples/screenshots, if necessary.
   • Update documentation, if required.
   • Ensure no breaking changes, or include BREAKING CHANGE notes.
   • Link related issues/PRs, where applicable.

☑️ Reviewer Actions:

1. Complete manual checks for the PR, including the guidelines and additional checks if applicable.

📚 Resources:

• Report a bug with the bot.
• View the bot’s configuration file.

Debug

Automated Checks

Maintainers must be able to edit this pull request (more info)

If

🟢 Condition met
└── 🟢 And
    ├── 🟢 The base branch matches this pattern: ^master$
    └── 🟢 The pull request was created from a fork (head branch repo: alexiscolin/gno)

Then

🟢 Requirement satisfied
└── 🟢 Maintainer can modify this pull request

Changes related to gnoweb must be reviewed by its codeowners

If

🟢 Condition met
└── 🟢 And
    ├── 🟢 The base branch matches this pattern: ^master$
    └── 🟢 A changed file matches this pattern: ^gno.land/pkg/gnoweb/ (filename: gno.land/pkg/gnoweb/frontend/css/input.css)

Then

🟢 Requirement satisfied
└── 🟢 Or
    ├── 🟢 Or
    │   ├── 🟢 And
    │   │   ├── 🟢 Pull request author is user: alexiscolin
    │   │   └── 🟢 This user reviewed pull request: gfanton (with state "APPROVED")
    │   └── 🔴 And
    │       ├── 🔴 Pull request author is user: gfanton
    │       └── 🔴 This user reviewed pull request: alexiscolin (with state "APPROVED")
    └── 🔴 And
        ├── 🔴 Not (🟢 Pull request author is user: alexiscolin)
        ├── 🟢 Not (🔴 Pull request author is user: gfanton)
        └── 🟢 Or
            ├── 🔴 This user reviewed pull request: alexiscolin (with state "APPROVED")
            └── 🟢 This user reviewed pull request: gfanton (with state "APPROVED")

Pending initial approval by a review team member, or review from tech-staff

If

🟢 Condition met
└── 🟢 And
    ├── 🟢 The base branch matches this pattern: ^master$
    └── 🟢 Not (🔴 Pull request author is a member of the team: tech-staff)

Then

🟢 Requirement satisfied
└── 🟢 If
    ├── 🟢 Condition
    │   └── 🟢 Or
    │       ├── 🟢 At least 1 user(s) of the organization reviewed the pull request (with state "APPROVED")
    │       ├── 🟢 At least 1 user(s) of the team tech-staff reviewed pull request
    │       └── 🔴 This pull request is a draft
    └── 🟢 Then
        └── 🟢 And
            ├── 🟢 Not (🔴 This label is applied to pull request: review/triage-pending)
            └── 🟢 At least 1 user(s) of the team tech-staff reviewed pull request

Manual Checks

**IGNORE** the bot requirements for this PR (force green CI check)

If

🟢 Condition met
└── 🟢 On every pull request

Can be checked by

• Any user with comment edit permission

[codecov]

Codecov Report

Attention: Patch coverage is 73.93365% with 55 lines in your changes missing coverage. Please review.

Files with missing lines	Patch %	Lines
gno.land/pkg/gnoweb/markdown/ext_forms.go	81.87%	27 Missing and 4 partials ⚠️
gno.land/pkg/gnoweb/handler.go	17.24%	24 Missing ⚠️

📢 Thoughts on this report? Let us know!

[zivkovicmilos]

@alexiscolin checking 🙏

[zivkovicmilos]

Looks good 💯

[zivkovicmilos]

@mvertes

I think you can provide the best feedback on this in the future (out of the scope for the PR), but this parser design we use for the tokens feels like it could use a bit of love. I'm not a huge fan of the current API, maybe we can improve it in the future -- just something to keep in mind 🙏