Form Basic

响应式布局

paw.Paw 默认支持响应式布局,宽屏情况下,默认一行显示 2 个控件,窄屏情况下一行只显示 1 个控件;

你现在可以改变浏览器窗口大小试试看下面的 Form 会怎么变化!


paw.Form{
	Method:    http.MethodGet, //不填写时,默认使用 http.MethodPost
	Multipart: true,           //当这个 form 需要提交文件时,Multipart 需要设置为 true
	Url:       "/action",
	Body: paw.List{
		paw.Input{
			Name:  "name",
			Label: "input text",
			Value: "tom",
		},
		paw.Input{
			Name:  "name",
			Label: "input password",
			Type:  "password",
			Value: "******",
		},
		paw.Textarea{
			Name:   "name",
			Label:  "textarea",
			Value:  "textarea",
			Height: 200,
		},
		paw.Select{
			Name:  "name",
			Label: "select",
			Options: []paw.SelectOption{
				{
					Name:  "Option 1",
					Value: "1",
				},
				{
					Name:     "Option 2, Disabled",
					Value:    "2",
					Disabled: true,
				},
				{
					Name:  "Option 3",
					Value: "3",
				},
			},
		},
	},
	SubmitBtnText: "提交 Form",
},
Form Input

下面是一些常见类型 input,关于 input 有哪些可能的 type 详见 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input


paw.Input{
	Name:  "Name0",
	Label: "普通文本输入框",
	Value: "abc",
},
paw.Input{
	Name:     "Name1",
	Label:    "Readonly 的样子",
	Value:    "abc",
	Readonly: true,
},
paw.Input{
	Name:  "Name2",
	Type:  "password",
	Label: "密码",
	Value: "abc",
},
paw.Input{
	Name:  "Name2",
	Type:  "datetime-local",
	Label: "时间",
	Value: time.Now().Format(paw.TimeFormat),
},
paw.Input{
	Name:  "Name3",
	Type:  "number",
	Label: "整数",
	Value: "1",
},
paw.Input{
	Name:  "Name3",
	Type:  "number",
	Label: "浮点",
	Value: "1.00",
	Step:  0.01, //可以按照需要设置精度
},
Form Checkbox
Form Generating

直接从 struct 生成 Form 控件!

这是 Paw 最核心的功能!

你可以使用类似 GORM 的方式,通过一个 struct 来生成对应的 Form 控件:


//这个 struct 同时也可以用来定义 GORM 中的 Model 
type User struct {
	Name     string    `paw:"" pawLabel:"姓名"` //凡带有 paw:"" 则会自动生成 UI
	Age      int       `paw:"" pawLabel:"年龄"` // pawLabel 可以设置控制显示的名称
	Gender   string    `paw:"select" pawLabel:"性别"`
	Height   float64   `paw:"" pawLabel:"身高"`
	Note     string    `paw:"textarea" pawLabel:"备注"`
	Password string    `paw:"password" pawLabel:"密码"`
	Birthday time.Time `paw:"" pawLabel:"生日"`
	Id       string    `paw:"hidden"`
}

// user 对象每个字段的值都会自动生成到控件的 value 中
user := &User{
	Name:     "degas",
	Age:      3,
	Gender:   "男",
	Height:   175,
	Note:     "😊",
	Password: "123",
	Birthday: time.Now().Add(-time.Hour * 24 * 365 * 30),
	Id:       "123",
}

//调用 paw.Gen 即可生成控件,随后可以通过 SelectOptions 设置 select 的 options
paw.Gen(user).SelectOptions(map[string][]paw.SelectOption{
	"Gender": {
		{Name: "男", Value: "男"},
		{Name: "女", Value: "女"},
	},
})

生成只读控件用于显示详细信息

😊

//只需要链式调用 Readonly 即可让所有生成的表单控件只读,方便展示信息
paw.Gen(user).Readonly()

支持类型

Paw 目前支持的 struct 字段类型为:

string, int, int64, float64, time.Time

Paw 支持 Golang 的 Type Embedding https://go.dev/doc/effective_go#embedding


type Item struct {
	Id   string `paw: ""`
	Name string `paw:""`
}

type editRequest struct {
	Item     `paw:""` //embedding
	EditNote string `paw:"textarea" pawLabel:"修改备注"`
}
Form Textarea
type Model struct {
	Config1 string `paw:"textarea"`
	Config2 string `paw:"textarea:100"` // ":100" will set the height of the textarea to 100px
}

The "<textarea>" HTML element represents a multi-line plain-text editing control, useful when you want to allow users to enter a sizeable amount of free-form text, for example a comment on a review or feedback form.

If the autocomplete attribute is not specified on a <textarea> element, then the browser uses the autocomplete attribute value of the <textarea> element's form owner. The form owner is either the <form> element that this <textarea> element is a descendant of or the form element whose id is specified by the form attribute of the input element. For more information, see the autocomplete attribute in <form>.