# FormGroup

表单元素布局方式，整齐的排列一组表单元素

示例:

- 单列, 如:

        <FormGroup>
            <Row single>
                <Col>
                    <Input type="text" placeholder="姓名" />
                </Col>
            </Row>
        </FormGroup>

- 多列, 如:

        <FormGroup>
            <Row>
                <Col>
                    <label>省</label>
                    <Input type="text" placeholder="省" />
                </Col>
                <Col>
                    <label>市</label>
                    <Input type="text" placeholder="市" />
                </Col>
            </Row>
        </FormGroup>

### 方法

### 属性

- classPrefix
- componentTag

### 事件

Extends Component
Defined in: `src/FormGroup.js:6`
Module: 表单组件

Available since 0.1.0

## Constructor

### FormGroup

`FormGroup ()`

Defined in `src/FormGroup.js:6`

Available since 0.1.0

#### Example:

    import React, { Component } from "react";
    import {FormGroup,Row,Col,Input} from "phoenix-ui";
    import Code from "./code/code";

    export default class formgroup extends Component{

        constructor(props,context){

            super(props,context);

            this.state = {
                name:""
            };
        }

        setValue(key,e){
            let o ={};
            o[key || e.target.name] = e.target.value;
            this.setState(o);
        }

        render(){
            return(
                <div>
                    <h2 className="comp-title">FormGroup</h2>
                    <h3 className="comp-type">单列</h3>
                    <FormGroup>
                        <Row single>
                            <Col>
                                <Input type="text" placeholder="姓名" />
                            </Col>
                        </Row>
                        <Row single>
                            <Col>
                                <Input type="text" placeholder="用户名" />
                            </Col>
                        </Row>
                    </FormGroup>
                    <Code target="form-group-single" />

                    <h3 className="comp-type">多列</h3>
                    <FormGroup>
                        <Row>
                            <Col>
                                <label>地址</label>
                                <Input type="text" placeholder="地址" />
                            </Col>
                        </Row>
                        <Row>
                            <Col>
                                <label>省</label>
                                <Input type="text" placeholder="省" />
                            </Col>
                            <Col>
                                <label>市</label>
                                <Input type="text" placeholder="市" />
                            </Col>
                        </Row>
                    </FormGroup>
                    <Code target="form-group-multiple" />

                    <FormGroup>
                        <Row>
                            <Col>
                                <a href="javascript:;" className="ph-navigate-right">
                                    <label><span className="color-error">*</span>性别</label>
                                    <input type="text" placeholder="男/女" disabled/>
                                </a>
                            </Col>
                        </Row>
                    </FormGroup>
                    <Code target="form-group-a" />

                    <FormGroup>
                        <Row>
                            <Col>
                                <label>兴趣爱好</label>
                                <Input type="checkbox" label="篮球" />
                                <Input type="checkbox" label="足球" />
                                <Input type="checkbox" label="乒乓球" />
                            </Col>
                        </Row>
                        <Row>
                            <Col>
                                <label>喜欢的水果</label>
                                <div style={{textAlign: "right"}}>
                                    <Input type="radio" label="苹果" name="fruit" />
                                    <Input type="radio" label="香蕉" name="fruit" />
                                </div>
                            </Col>
                        </Row>
                    </FormGroup>
                    <Code target="form-group-input" />
                </div>
            );
        }
    }

## 属性

### `classPrefix`

String

Defined in `src/FormGroup.js:48`

样式前缀

Default:

`'form-group'`

### `componentTag`

String

Defined in `src/FormGroup.js:55`

标签tagName