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/components/ui/icons.html)

Then

🟢 Requirement satisfied
└── 🟢 Or
    ├── 🔴 This user reviewed pull request: alexiscolin
    └── 🟢 This user reviewed pull request: gfanton

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
        └── 🟢 Not (🔴 This label is applied to pull request: review/triage-pending)

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 76.12613% with 53 lines in your changes missing coverage. Please review.

Files with missing lines	Patch %	Lines
gno.land/pkg/gnoweb/markdown/ext_forms.go	85.26%	25 Missing and 3 partials ⚠️
gno.land/pkg/gnoweb/handler.go	13.79%	25 Missing ⚠️

📢 Thoughts on this report? Let us know!

[alexiscolin]

Regarding a #3899 form implementation, it would need a modification of the realm to handle the query, like:

router.HandleFunc("/", func(res *mux.ResponseWriter, req *mux.Request) {
		hasDenom, hasAddr := req.Query.Has("denom"), req.Query.Has("addr")
		switch {
		case hasAddr && hasDenom:
			denom := req.Query.Get("denom")
			addr := req.Query.Get("addr")
			res.Write(renderAddressBalance(denom, std.Address(addr)))

		case hasDenom:
			denom := req.Query.Get("denom")
			totalSupply := TotalSupply(denom)
			res.Write(renderCoinInfo(denom, totalSupply))

		default: // default rendering
			res.Write(renderHomepage())
		}
	})

cc @notJoon

[notJoon]

Regarding a #3899 form implementation, it would need a modification of the realm to handle the query, like:

@alexiscolin
Checked. Thank you for letting me know 👍

[leohhhn]

Can you please add an example of how to use this? preferably in r/docs/markdown?

[gfanton]

Besides my comments, I was thinking that since we ultimately fall back on ||| for columns, we could keep things markdown-friendly ?

syntax idea:

<gno-form>
@input[My Username](username)
@input_password[My Password](password)
@input_<type>[<placeholder>](<name>) # or maybe the other way around ?
@submit[Login]
</gno-form>

Im not against keeping html style but i think we could go for a more markdown syntax.

wdyt ?

[gfanton]

error should be for something not recoverable, i suggest you simply override the previous value if duplicate and ignore attribute if it doest not exist.

[gfanton]

Context makes sense for columns because you have to track tags between other markdown components. For your specific case, it's a single block, so you have to use Continue + Close to create your markdown component.

[moul]

Suggested change

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

Wouldn't this make sense in GNO and standard HTML? What is the default behavior in HTML when we don't specify the method and action of a <form>?

If we pursue this, I suggest using the original W3C HTML but with filtered parameters. For instance, we could disable all the parameters of <form> for now, and include only the name, placeholder, type, and value for ainputandtextarea` elements.

Regarding the submit functionality, I believe we can add support for the submit input type. However, I suggest establishing a default behavior when there is no submit button, such as responding to the "Enter" key or applying changes when the user leaves the field.

As a reminder to readers, this original PR only supports GET forms. This allows for more flexible interaction with realms rendering. However, we currently do not permit forging transactions using HTML forms; this capability is only available through wallets at this time or by using txlink from the Render function. We will consider TX builders from forms in the future.

[leohhhn]

Would be great if we could also specify the render path for the form, apart from the query params. This would allow us to go to a specific page within the same realm, ie :user?name=alexis (although it's doable with queries as well, its ugly).