feat(gnoweb): form - input md extension

examples/gno.land/r/docs/markdown/markdown.gno

@@ -356,6 +356,103 @@ My Image ![Alt](/public/imgs/gnoland.svg)
 
 ---
 
+### Forms
+
+Gno-Flavored Markdown introduces a secure form system that integrates directly with realms. The system uses custom HTML-like tags that are rendered with proper styling and validation.
+
+#### Basic Usage
+
+Create a form using the ±<gno-form>± tag and add inputs with ±<gno-input>±:
+
+±±±markdown
+<gno-form>
+  <gno-input name="name" placeholder="Enter your name" />
+  <gno-input name="email" placeholder="Enter your email" />
+</gno-form>
+±±±
+
+<gno-form>
+  <gno-input name="name" placeholder="Enter your name" />
+  <gno-input name="email" placeholder="Enter your email" />
+</gno-form>
+
+#### Form Structure
+
+1. **Form Container**
+   - Must start with ±<gno-form>± and end with ±</gno-form>±
+   - Optional attributes:
+     - ±path±: Render path after form submission (e.g. ±path="user"± will redirect to ±:user?[params]±)
+   - Form data is always sent as query parameters
+   - Cannot be nested (forms inside forms are not allowed)
+   - Automatically includes a header showing the realm name
+
+2. **Input Fields**
+   - Created with ±<gno-input>± tag
+   - Required attributes:
+     - ±name±: Unique identifier for the input (required)
+     - ±type±: Type of input (optional, defaults to "text")
+     - ±placeholder±: Hint text shown in the input (optional, defaults to "Enter value")
+   - Supported input types:
+     - ±type="text"± (default): For text input
+     - ±type="number"±: For numeric values only (with browser validation)
+     - ±type="email"±: For email addresses (with basic browser validation)
+     - ±type="tel"±: For phone numbers (no specific validation)
+     - ±type="password"±: For password input (masked characters)
+   - Note: Input validation is handled by the browser's HTML5 validation
+   - Any other type will default to "text"
+   - Each input must have a unique name
+   - Inputs are rendered with labels and proper styling
+
+#### Example Use Cases
+
+1. Form with Path and Query Parameters
+±±±markdown
+<gno-form path="user">
+  <gno-input name="username" type="text" placeholder="Enter username" />
+  <gno-input name="age" type="number" placeholder="Your age" />
+</gno-form>
+±±±
+
+<gno-form path="user">
+  <gno-input name="username" type="text" placeholder="Enter username" />
+  <gno-input name="age" type="number" placeholder="Your age" />
+</gno-form>
+
+This form will submit to ±:user?username=value&age=value± on the same realm.
+
+2. Form with Query Parameters Only
+±±±markdown
+<gno-form>
+  <gno-input name="recipient" type="text" placeholder="Enter recipient address" />
+  <gno-input name="email" type="email" placeholder="Your email" />
+  <gno-input name="pswd" type="password" placeholder="Your password" />
+</gno-form>
+±±±
+
+<gno-form>
+  <gno-input name="recipient" type="text" placeholder="Enter recipient address" />
+  <gno-input name="email" type="email" placeholder="Your email" />
+  <gno-input name="pswd" type="password" placeholder="Your password" />
+</gno-form>
+
+This form will submit to ±?recipient=value&email=value&pswd=value± on the same realm.
+
+#### Important Rules
+
+1. **Validation Rules**:
+   - Every ±<gno-input>± must have a ±name± attribute
+   - Duplicate attribute names are not allowed
+   - Forms must be properly closed
+   - Nested forms will not render
+
+2. **Security Features**:
+   - Forms are processed on the realm where they are defined
+   - Each form submission is associated with its realm
+   - The realm name is displayed in the form header
+   - Input validation is handled by the realm's smart contract
+
+--- 
+
 ### Alerts
 
 Alerts are a way to highlight important information in your markdown.
@@ -458,8 +555,6 @@ By default, the alert boxes are opened. The title is optional and if not provide
 > > [!NOTE]
 > > This is a scoped note
 
----
-
 ### Usernames
 
 XXX: TODO (add again this feature that was removed)

gno.land/pkg/gnoweb/frontend/css/input.css

@@ -258,6 +258,29 @@
     @apply grow shrink basis-52 lg:basis-44;
   }
 
+  .realm-view .gno-form {
+    @apply block border rounded pt-2 pb-4 px-4 my-12;
+  }
+  .realm-view .gno-form_header {
+    @apply flex justify-between text-gray-300 text-50 mb-6;
+  }
+  .realm-view .gno-form label {
+    @apply absolute top-0 left-2 -translate-y-1/2 text-gray-300 text-50 bg-light px-1 hidden;
+  }
+  .realm-view .gno-form_input {
+    @apply relative;
+  }
+  .realm-view .gno-form_input:has(input:focus) label,
+  .realm-view .gno-form_input:has(input:not(:placeholder-shown)) label {
+    @apply block;
+  }
+  .realm-view .gno-form input {
+    @apply block p-2 rounded-sm border-gray-200 focus:border-gray-300 hover:border-gray-300 text-gray-600 outline-none font-mono mb-4 w-full;
+  }
+  .realm-view .gno-form input[type="submit"] {
+    @apply bg-green-600 text-light border-green-600 cursor-pointer font-interVar mb-2 hover:opacity-90;
+  }
+
   /* Alert */
   .realm-view .gno-alert {
     @apply border-l-4 border-l-gray-300 px-4 py-3 text-gray-600 rounded my-10;

gno.land/pkg/gnoweb/handler.go

@@ -96,13 +96,15 @@
 func (h *WebHandler) ServeHTTP(w http.ResponseWriter, r *http.Request) {
 	h.Logger.Debug("receiving request", "method", r.Method, "path", r.URL.Path)
 
-	if r.Method != http.MethodGet {
+	switch r.Method {
+	case http.MethodGet:
+		w.Header().Add("Content-Type", "text/html; charset=utf-8")
+		h.Get(w, r)
+	case http.MethodPost:
+		h.Post(w, r)
+	default:
 		http.Error(w, "method not allowed", http.StatusMethodNotAllowed)
-		return
 	}
-
-	w.Header().Add("Content-Type", "text/html; charset=utf-8")
-	h.Get(w, r)
 }
 
 // Get processes a GET HTTP request.
@@ -169,6 +171,37 @@
 	}
 }
 
+// Post processes a POST HTTP request.
+func (h *WebHandler) Post(w http.ResponseWriter, r *http.Request) {
+	start := time.Now()
+	defer func() {
+		h.Logger.Debug("request completed",
+			"url", r.URL.String(),
+			"elapsed", time.Since(start).String())
+	}()
+
+	// Parse the form data
+	if err := r.ParseForm(); err != nil {
+		h.Logger.Error("failed to parse form", "error", err)
+		http.Error(w, "bad request", http.StatusBadRequest)
+		return
+	}
+
+	// Parse the URL
+	gnourl, err := weburl.ParseFromURL(r.URL)
+	if err != nil {
+		h.Logger.Warn("unable to parse url path", "path", r.URL.Path, "error", err)
+		http.Error(w, "invalid path", http.StatusNotFound)
+		return
+	}
+
+	// Use form data as query
+	gnourl.Query = r.PostForm
+
+	// Redirect to the new URL
+	http.Redirect(w, r, gnourl.EncodeWebURL(), http.StatusSeeOther)
+}
+
 // prepareIndexBodyView prepares the data and main view for the index.
 func (h *WebHandler) prepareIndexBodyView(r *http.Request, indexData *components.IndexData) (int, *components.View) {
 	aliasTarget, aliasExists := h.Aliases[r.URL.Path]

gno.land/pkg/gnoweb/handler_test.go

@@ -424,7 +424,7 @@ func TestIsHomePath(t *testing.T) {
 	assert.False(t, gnoweb.IsHomePath("/foo"))
 }
 
-// TestServeHTTPMethodNotAllowed verifies 405 for POST/PUT/etc methods.
+// TestServeHTTPMethodNotAllowed verifies 405 for HTTP methods.
 func TestServeHTTPMethodNotAllowed(t *testing.T) {
 	t.Parallel()
 
@@ -434,7 +434,7 @@ func TestServeHTTPMethodNotAllowed(t *testing.T) {
 	handler, err := gnoweb.NewWebHandler(logger, cfg)
 	require.NoError(t, err)
 
-	req := httptest.NewRequest(http.MethodPost, "/r/ex", nil)
+	req := httptest.NewRequest(http.MethodDelete, "/r/ex", nil)
 	rr := httptest.NewRecorder()
 	handler.ServeHTTP(rr, req)
 

gno.land/pkg/gnoweb/markdown/ext.go

@@ -74,6 +74,9 @@ func (e *GnoExtension) Extend(m goldmark.Markdown) {
 	// Add link extension
 	ExtLinks.Extend(m)
 
+	// Add form / inputs extension
+	ExtForms.Extend(m)
+
 	// If set, setup images filter
 	if e.cfg.imgValidatorFunc != nil {
 		ExtImageValidator.Extend(m, e.cfg.imgValidatorFunc)