Forms Basic

基础表单

Reach for manual form controls when you want exact field layout or when the data shape does not justify a generated form.

当你需要精确控制字段布局，或数据结构不值得生成式表单时，就直接使用手写表单控件。

paw.Formpaw.Inputpaw.Checkboxpaw.Selectpaw.MultiSelectpaw.BitMask

Covered APIs

涵盖 API

API 接口	Description 说明
`Form`	The top-level <form> wrapper. It defaults to POST and a two-column responsive layout. 最顶层的 <form> 包装器，默认使用 POST 和两列响应式布局。
`Input + InputTypeHidden/InputTypePassword`	Manual text, hidden, password, file, date, time, and numeric inputs. 手写文本、隐藏、密码、文件、日期、时间和数值输入。
`Checkbox`	Single boolean checkbox input. 单个布尔复选框输入。
`Textarea`	Multi-line text input with configurable height. 支持配置高度的多行文本输入。
`Select + SelectOption`	Single-select control and its option type. 单选下拉控件及其选项类型。
`MultiSelect`	Bootstrap-based multi-select control for []string style input. 基于 Bootstrap 的多选控件，适合 []string 风格输入。
`BitMask + BitMaskOption`	Multi-checkbox editor for bitmask-style flags. 用于位掩码标记的多复选框编辑器。
`TimeFormat, TimeFormatDate, TimeFormatHourMinute`	Shared formatting constants for datetime-local, date, and time inputs. datetime-local、date 和 time 输入共用的格式化常量。

Minimal Example: Manual controls inside Form

最小示例：Form 中的手写控件

The default Form layout automatically wraps a flat list into responsive rows.

Form 默认布局会自动把平铺列表包成响应式行。

paw.Form{
	Url: "/manual-submit",
	Body: paw.List{
		paw.Input{Name: "ID", Type: paw.InputTypeHidden, Value: "42"},
		paw.Input{Name: "Name", Label: "Name", Value: "Ada Lovelace"},
		paw.Input{Name: "Password", Label: "Password", Type: paw.InputTypePassword},
		paw.Checkbox{Name: "Enabled", Label: "Enabled", Checked: true},
		paw.Textarea{Name: "Notes", Label: "Notes", Height: 120},
		paw.Select{
			Name:  "Role",
			Label: "Role",
			Options: []paw.SelectOption{
				{Value: "admin"},
				{Value: "editor"},
				{Value: "viewer"},
			},
		},
	},
}

Advanced Example: Custom layout with multiselect, bitmask, and time inputs

进阶示例：使用多选、位掩码和时间输入的自定义布局

Disable the default layout when you want to own the row structure yourself.

当你想完全掌控行结构时，关闭默认布局。

Regions

Permissions

Read

Write

Publish

Published at

Go live date

Daily cutoff

now := time.Now()

paw.Form{
	Method:               http.MethodGet,
	Url:                  "/FormsBasic",
	DisableDefaultLayout: true,
	Body: paw.List{
		paw.Row{
			ColumnMax: 2,
			Columns: paw.List{
				paw.MultiSelect{...},
				paw.BitMask{...},
			},
		},
		paw.Row{
			ColumnMax: 3,
			Columns: paw.List{
				paw.Input{Type: "datetime-local", Value: now.Format(paw.TimeFormat)},
				paw.Input{Type: "date", Value: now.Format(paw.TimeFormatDate)},
				paw.Input{Type: "time", Value: now.Format(paw.TimeFormatHourMinute)},
			},
		},
	},
}

Notes and Related Docs

说明与相关文档

Notes

说明

When DisableDefaultLayout is false, Form wraps a flat body into its default responsive two-column layout.

当 DisableDefaultLayout 为 false 时，Form 会把平铺的 body 自动包成默认的两列响应式布局。

For GET forms, Form moves existing query parameters into hidden inputs before rendering the action URL.

对于 GET 表单，Form 会在渲染 action URL 之前，把已有 query 参数搬进隐藏输入项。

Use generated forms for large CRUD screens; keep manual forms for the places where the UI shape is the real source of truth.

大型 CRUD 页面优先使用生成式表单；当 UI 形状本身才是主要约束时，再保留手写表单。

Notes

Related Pages