ant-design/components/form/demo/advanced-search-form.md

order	title
10	zh-CN en-US 高级搜索 Advanced search

zh-CN

三列栅格式的表单排列方式，常用于数据表格的高级搜索。

有部分定制的样式代码，由于输入标签长度不确定，需要根据具体情况自行调整。

en-US

Three columns layout is often used to advanced searching of data table.

Because the width of label is not definite, you need to adjust the custom stlye case by case.

import { Form, Input, Row, Col, Button, DatePicker } from 'antd';
const FormItem = Form.Item;

ReactDOM.render(
  <Form horizontal className="ant-advanced-search-form">
    <Row gutter={16}>
      <Col sm={8}>
        <FormItem
          label="Search name"
          labelCol={{ span: 10 }}
          wrapperCol={{ span: 14 }}
        >
          <Input placeholder="Please input the search name" size="default" />
        </FormItem>
        <FormItem
          label="Long search name"
          labelCol={{ span: 10 }}
          wrapperCol={{ span: 14 }}
        >
          <DatePicker size="default" />
        </FormItem>
        <FormItem
          label="Search name"
          labelCol={{ span: 10 }}
          wrapperCol={{ span: 14 }}
        >
          <Input placeholder="Please input the search name" size="default" />
        </FormItem>
      </Col>
      <Col sm={8}>
        <FormItem
          label="Search name"
          labelCol={{ span: 10 }}
          wrapperCol={{ span: 14 }}
        >
          <Input placeholder="Please input the search name" size="default" />
        </FormItem>
        <FormItem
          label="Long search name"
          labelCol={{ span: 10 }}
          wrapperCol={{ span: 14 }}
        >
          <DatePicker size="default" />
        </FormItem>
        <FormItem
          label="Search name"
          labelCol={{ span: 10 }}
          wrapperCol={{ span: 14 }}
        >
          <Input placeholder="Please input the search name" size="default" />
        </FormItem>
      </Col>
      <Col sm={8}>
        <FormItem
          label="Search name"
          labelCol={{ span: 10 }}
          wrapperCol={{ span: 14 }}
        >
          <Input placeholder="Please input the search name" size="default" />
        </FormItem>
        <FormItem
          label="Long search name"
          labelCol={{ span: 10 }}
          wrapperCol={{ span: 14 }}
        >
          <DatePicker size="default" />
        </FormItem>
        <FormItem
          label="Search name"
          labelCol={{ span: 10 }}
          wrapperCol={{ span: 14 }}
        >
          <Input placeholder="Please input the search name" size="default" />
        </FormItem>
      </Col>
    </Row>
    <Row>
      <Col span={12} offset={12} style={{ textAlign: 'right' }}>
        <Button type="primary" htmlType="submit">Search</Button>
        <Button>Clear</Button>
      </Col>
    </Row>
  </Form>
, mountNode);

/* custom style */

.ant-advanced-search-form {
  padding: 16px 8px;
  background: #f8f8f8;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
}

/* becasue the label width is not definite, you need to adjust it to center by yourself */
.ant-advanced-search-form > .ant-row {
  position: relative;
  left: -6px;
}

.ant-advanced-search-form .ant-btn + .ant-btn {
  margin-left: 8px;
}