# 文字标签+输入框
绘制表单提交数据是常用的业务逻辑.本例实现一个最基础的文字标签+输入框的示例.
通过查阅[label组件-bi.label](http://fanruan.design/fineui-doc/index.html#/docs/components/label)和[输入框-bi.text_editor](http://fanruan.design/fineui-doc/index.html#/docs/components/textEditor),和[水平垂直居中布局-bi.vertical_adapt](http://fanruan.design/fineui-doc/index.html#/docs/components/layout)布局,我们组件一个水平方向垂直居中的标签+输入框
## js
```
     // 创建一个文字+输入框组件
    var LabelEditor = BI.inherit(BI.Widget, {
        props: {
            baseCls: "plugin-label-editor"
        },

        render: function () {
            var self = this;
            return {
                type: "bi.vertical_adapt",  //  首先是垂直居中布局容纳两个子元素
                items: [
                    {
                        type: "bi.label",  //  label文字标签
                        text: "姓名:",
                        height: 24
                    }, {
                        type: "bi.text_editor",  //  输入框
                        width: 200,
                        height: 24,
                        watermark: "请输入内容",
                        listeners: [
                            {
                                eventName: "EVENT_CONFIRM",  //  监听输入框组件的输入完成事件,然后获取输入框的值抛送给外部.
                                action: function () {
                                    self.fireEvent("EVENT_CONFIRM", this.getValue());
                                }
                            }
                        ]
                    }
                ]
            };
        }
    });
    BI.shortcut("dec.plugin.label_editor", LabelEditor);
```