Form
Landmark формы с вспомогательными элементами FormItem.
github.com/fastygo/templ/ui
Landmark формы с вспомогательными элементами FormItem.
Вход
import "github.com/fastygo/templ/ui"
templ Example() {
@ui.Form(ui.FormProps{Class: "max-w-sm"}) {
@ui.FormItem(ui.FormItemProps{}) {
@ui.Label(ui.LabelProps{HTMLFor: "login-email"}) {
Email
}
@ui.Input(ui.InputProps{ID: "login-email", Type: "email", Placeholder: "you@example.com"})
}
@ui.Button(ui.ButtonProps{Type: "submit"}) {
Войти
}
}
}
import "github.com/fastygo/templ/ui"
templ Example() {
@ui.Form(ui.FormProps{Class: "max-w-sm"}) {
@ui.FormItem(ui.FormItemProps{}) {
@ui.Label(ui.LabelProps{HTMLFor: "login-email"}) {
Email
}
@ui.Input(ui.InputProps{ID: "login-email", Type: "email", Placeholder: "you@example.com"})
}
@ui.Button(ui.ButtonProps{Type: "submit"}) {
Войти
}
}
}
В строку
import "github.com/fastygo/templ/ui"
templ Example() {
@ui.Form(ui.FormProps{Class: "max-w-md"}) {
@ui.Group(ui.GroupProps{Class: "flex items-end gap-2"}) {
@ui.Input(ui.InputProps{Placeholder: "Поиск"})
@ui.Button(ui.ButtonProps{}) {
Найти
}
}
}
}
import "github.com/fastygo/templ/ui"
templ Example() {
@ui.Form(ui.FormProps{Class: "max-w-md"}) {
@ui.Group(ui.GroupProps{Class: "flex items-end gap-2"}) {
@ui.Input(ui.InputProps{Placeholder: "Поиск"})
@ui.Button(ui.ButtonProps{}) {
Найти
}
}
}
}
API
Action · string — URL action формы
Method · string — GET | POST
FormItem · component — Группа label + control