ant-design/components/form/demo/inline-form.md
2016-07-31 09:53:51 +08:00

57 lines
1.2 KiB
Markdown

---
order: 1
title:
zh-CN: 平行排列
en-US: Inline form
---
## zh-CN
行内排列,常用于登录界面。
## en-US
Inline form is often used for login.
````jsx
import { Form, Input, Button, Checkbox } from 'antd';
const FormItem = Form.Item;
let Demo = React.createClass({
handleSubmit(e) {
e.preventDefault();
console.log('Received values of form:', this.props.form.getFieldsValue());
},
render() {
const { getFieldProps } = this.props.form;
return (
<Form inline onSubmit={this.handleSubmit}>
<FormItem
label="Account"
>
<Input placeholder="Please input the account"
{...getFieldProps('userName')}
/>
</FormItem>
<FormItem
label="Password"
>
<Input type="password" placeholder="Please input the password"
{...getFieldProps('password')}
/>
</FormItem>
<FormItem>
<Checkbox {...getFieldProps('agreement')}>Remember me</Checkbox>
</FormItem>
<Button type="primary" htmlType="submit">Submit</Button>
</Form>
);
},
});
Demo = Form.create()(Demo);
ReactDOM.render(<Demo />, mountNode);
````