bricks/examples/form.html
2023-09-14 10:28:07 +08:00

168 lines
3.0 KiB
HTML

<html>
<head>
<link rel="stylesheet" href="/bricks/css/bricks.css">
</head>
<body>
<script src="/bricks/bricks.js"></script>
<script>
const opts =
{
"widget": {
"widgettype":"VBox",
"options":{"height":"100%"},
"subwidgets":[
{
"widgettype":"HBox",
"options":{"height":"auto"},
"subwidgets":[
{
"widgettype":"Text",
"options":{
"otext":"Please change Font size",
"i18n":true
}
},
{
"widgettype":"Button",
"options":{
"label":"A",
"width":"auto",
"item_rate":1.4
},
"binds":[
{
"wid":"self",
"event":"click",
"actiontype":"script",
"target":"app",
"script":"bricks_app.textsize_bigger()"
}
]
},
{
"widgettype":"Button",
"options":{
"label":"A",
"width":"auto",
"item_rate":0.8
},
"binds":[
{
"wid":"self",
"event":"click",
"actiontype":"script",
"target":"app",
"script":"bricks_app.textsize_smaller()"
}
]
}
]
},
{
"widgettype":"Form",
"options":{
"submit_url":"/ttt/ttt.dspy",
"title":"Test hahah Form",
"description":"test input implemented",
"fields":[
{
"uitype":"email",
"name":"email",
"label":"Email",
'required':true
},
{
"uitype":"tel",
"name":"tel",
"pattern":"{\d}3-{\d}4-{\d}4",
"label":"Tel",
'required':true
},
{
"uitype":"file",
"name":"file",
"label":"File",
'required':true
},
{
"uitype":"str",
"minlength":3,
"length":30,
"value":"tlegre",
"name":"name",
"label":"Name",
'required':true
},
{
"uitype":"int",
"minlength":3,
"length":30,
"value":12432,
"name":"integer",
"label":"Integer",
'required':true
},
{
"uitype":"float",
"dec_length":3,
"length":25,
"name":"float",
"label":"Float"
},
{
"uitype":"date",
"name":"date",
"label":"Date",
'required':true
},
{
"uitype":"password",
"minlength":3,
"length":30,
"name":"password",
"label":"Password",
'required':true
},
{
"uitype":"checkbox",
"name":"checkbox",
"label":"CheckBox",
"value":2,
"dataurl":"test_code.json",
'required':true
},
{
"uitype":"audio",
"name":"audio",
"label":"Audio",
'required':true
},
{
"uitype":"code",
"name":"code",
"label":"Code",
"value":2,
"dataurl":"test_code.json",
'required':true
},
{
"uitype":"text",
"name":"text",
"value":"This is a test",
"label":"Text",
'required':true
}
]
}
}
]
}
}
;
const app = new BricksApp(opts);
app.run();
</script>
</body>
</html>