Form 表单

具有数据收集、校验和提交功能的表单，包含复选框、单选框、输入框、下拉选择框等元素。

表单

我们为 form 提供了以下两种排列方式：

  • 水平排列：.ant-form-horizontal 类可以实现 label 标签和表单控件的水平排列;
  • 行内排列：.ant-form-inline 类可使其表现为 inline-block 级别的控件。

表单域

表单一定会包含表单域，表单域可以是输入控件，标准表单域，标签，下拉菜单，文本域等。

在这里，我们使用 .ant-form-item 类来表示表单域，它包含了一个标签和一个输入控件。

为了获得更好的排列，请将 label 标签和 <input>、<textarea>、<select> 控件包裹在 .ant-form-item 中。

组件演示 

var Checkbox = antd.Checkbox;
var Radio = antd.Radio;
var RadioGroup = antd.Radio.Group;

React.render(
<form className="ant-form-horizontal">
  <div className="ant-form-item ant-form-item-compact">
    <label htmlFor="userName" className="col-6" required>用户名：</label>
    <div className="col-6">
      <p className="ant-form-text">大眼萌 minion</p>
    </div>
  </div>
  <div className="ant-form-item">
    <label htmlFor="password" className="col-6" required>密码：</label>
    <div className="col-14">
      <input className="ant-input" type="password" id="password" placeholder="请输入密码"/>
    </div>
  </div>
  <div className="ant-form-item ant-form-item-compact">
    <label  className="col-6" required>您的性别：</label>
    <div className="col-14">
      <RadioGroup value="male">
        <Radio value="male">男的</Radio>
        <Radio value="female">女的</Radio>
      </RadioGroup>
    </div>
  </div>
  <div className="ant-form-item">
    <label htmlFor="remark" className="col-6" required>备注：</label>
    <div className="col-14">
      <textarea className="ant-input" id="remark" placeholder="随便写"></textarea>
      <p className="ant-form-explain">随便写点什么</p>
    </div>
  </div>
  <div className="ant-form-item ant-form-item-compact">
    <div className="col-14 col-offset-6">
      <label>
        <Checkbox /> 同意
      </label>
    </div>
  </div>
  <div className="row">
    <div className="col-16 col-offset-6">
      <input type="submit" className="ant-btn ant-btn-primary" value="确 定" />
    </div>
  </div>
</form>
, document.getElementById('components-form-demo-horizontal-form'));
水平排列的表单

为 <form> 标签添加 .ant-form-horizontal 类(这让 .ant-form-item 表现为栅格系统中的 row)，并结合使用我们提供的 栅格系统，可以实现 label 标签和表单控件的水平排列。

如需将一行静态文本和 <label> 标签置于同一行，则只需为标签添加 .ant-form-text 类即可。

为 label 标签添加 required 属性，表示该项必选。

注意：在我们的设计里，表单域(.ant-form-item) 为静态文本、checkbox、radio以及input[type="file"]的，其高度不同于一般的表单域，需要在 .ant-form-item 类后再加上 .ant-form-item-compact。

禁用的表单控件


<form class="ant-form-horizontal">
  <div class="ant-form-item">
    <label class="col-5">禁用的输入框：</label>
    <div class="col-12">
      <input class="ant-input" type="text" value="我是禁用的" disabled>
    </div>
  </div>
</form>

禁用的 fieldset


大眼萌 minion

<form class="ant-form-horizontal">
  <fieldset disabled>
    <div class="ant-form-item ant-form-item-compact">
      <label for="userName" class="col-5" required>用户名：</label>
      <div class="col-12">
        <p class="ant-form-text">大眼萌 minion</p>
      </div>
    </div>
    <div class="ant-form-item">
      <label for="password" class="col-5" required>密码：</label>
      <div class="col-12">
        <input class="ant-input" type="password" id="password" value="123456"/>
      </div>
    </div>
    <div class="row">
      <div class="col-12 col-offset-5">
        <input type="submit" class="ant-btn ant-btn-primary" value="确 定" />
      </div>
    </div>
  </fieldset>
</form>
禁用状态

1) 单独为输入框设置 disabled 属性；

2) 为 <fieldset> 设置 disabled 属性，可以禁用 <fieldset> 中包含的所有控件。

不带反馈图标的校验提示


请输入数字和字母组合

带图标的校验提示（水平排列的表单）


信息审核中...
请输入数字和字母组合
<h4>不带反馈图标的校验提示</h4>
<br />
<form class="ant-form-horizontal">
  <div class="ant-form-item has-error">
    <label for="error" class="col-5">失败校验：</label>
    <div class="col-12">
      <input class="ant-input" type="text" id="error" value="无效选择"/>
      <div class="ant-form-explain">请输入数字和字母组合</div>
    </div>
  </div>
  <div class="ant-form-item has-warning">
    <label for="warning" class="col-5">警告校验：</label>
    <div class="col-12">
      <input class="ant-input" type="text" id="warning" value="前方高能预警"/>
    </div>
  </div>
</form>

<h4>带图标的校验提示（水平排列的表单）</h4>
<br />
<form class="ant-form-horizontal">
    <div class="ant-form-item">
      <label class="col-5" for="validating">校验中：</label>
      <div class="col-12">
          <div class="has-feedback is-validating">
            <input class="ant-input" type="text" id="validating" value="我是被校验的内容"/>
        <div class="ant-form-explain">信息审核中...</div>
          </div>
      </div>
    </div>

    <div class="ant-form-item">
      <label class="col-5" for="input1">成功校验：</label>
      <div class="col-12">
          <div class="has-feedback has-success">
            <input class="ant-input" type="text" id="input1" value="我是正文"/>
          </div>
      </div>
    </div>

    <div class="ant-form-item">
      <label class="col-5" for="input2">失败校验：</label>
      <div class="col-12">
          <div class="has-feedback has-error">
            <input class="ant-input" type="text" id="input2" value="无效选择"/>
        <div class="ant-form-explain">请输入数字和字母组合</div>
          </div>
      </div>
    </div>

    <div class="ant-form-item">
      <label class="col-5" for="input3">警告校验：</label>
      <div class="col-12">
          <div class="has-feedback has-warning">
            <input class="ant-input" type="text" id="input3" value="前方高能预警"/>
          </div>
      </div>
    </div>
</form>
校验提示

我们为表单控件的校验状态定义了样式，共有三种校验状态类：

.has-success .has-error .has-warning, 分别代表校验成功、校验失败、有警告。

将以上三种校验状态类添加到这些控件的父级元素即可。

另外为输入框添加反馈图标，可以更好地反馈当前的校验状态，使用 .has-feedback 类包裹 input 输入框即可，在这里校验状态类就要和 .has-feedback 类同级。

注意: 反馈图标只能使用在文本输入框 <input class="ant-input"> 元素上。

<div class="row">
  <div class="ant-input-group">
    <div class="col-6">
      <input class="ant-input ant-input-lg" type="text" id="largeInput" placeholder="大尺寸"/>
    </div>
    <div class="col-6">
      <input class="ant-input" type="text" id="defaultInput" placeholder="默认尺寸"/>
    </div>
    <div class="col-6">
      <input class="ant-input ant-input-sm" type="text" id="smallInput" placeholder="小尺寸"/>
    </div>
  </div>
</div>
Input 尺寸

我们为定义了 .ant-input 类的输入框提供了三种尺寸：大（-lg）、中(默认)、小（-sm），往类名添加以上后缀即可。

但是在 <form> 表单里面，我们只使用大尺寸， 即高度为 32px，作为唯一的尺寸。

var Checkbox = antd.Checkbox;

React.render(
<form className="ant-form-inline">
  <div className="ant-form-item">
    <label htmlFor="userName">账户：</label>
    <input className="ant-input" type="text" id="userName" placeholder="请输入账户名" />
  </div>
  <div className="ant-form-item">
    <label htmlFor="password2">密码：</label>
    <input className="ant-input" type="password" id="password2" placeholder="请输入密码" />
  </div>
  <div className="ant-form-item">
    <label className="ant-checkbox-inline">
      <Checkbox /> 记住我
    </label>
  </div>
  <input type="submit" className="ant-btn ant-btn-primary" value="登 录" />
</form>
, document.getElementById('components-form-demo-inline-form'));
行内排列的表单

你可以为 <form> 标签添加 .ant-form-inline 类可使其表现为 inline-block 级别的控件。

var Select = antd.Select;
var Option = Select.Option;
var Checkbox = antd.Checkbox;
var Radio = antd.Radio;
var RadioGroup = antd.Radio.Group;

function handleSelectChange(value) {
  console.log('selected ' + value);
}

React.render(
<form className="ant-form-horizontal">
  <div className="ant-form-item">
    <label htmlFor="control-input" className="col-6">输入框：</label>
    <div className="col-14">
      <input type="text" className="ant-input" id="control-input" placeholder="Please enter..." />
    </div>
  </div>
  <div className="ant-form-item">
    <label htmlFor="control-textarea" className="col-6">文本域：</label>
    <div className="col-14">
      <textarea className="ant-input" id="control-textarea"></textarea>
    </div>
  </div>
  <div className="ant-form-item">
    <label className="col-6">Select 选择器：</label>
    <div className="col-14">
      <Select size="large" defaultValue="lucy" style={{width:200}} onChange={handleSelectChange}>
        <Option value="jack">jack</Option>
        <Option value="lucy">lucy</Option>
        <Option value="disabled" disabled>disabled</Option>
        <Option value="yiminghe">yiminghe</Option>
      </Select>
    </div>
  </div>
  <div className="ant-form-item ant-form-item-compact">
    <label className="col-6">Checkbox 多选框：</label>
    <div className="col-18">
      <label className="ant-checkbox-vertical">
        <Checkbox />选项一
      </label>
      <label className="ant-checkbox-vertical">
        <Checkbox />选项二
      </label>
      <label className="ant-checkbox-vertical">
        <Checkbox disabled={true} />选项三（不可选）
      </label>
    </div>
  </div>
  <div className="ant-form-item ant-form-item-compact">
    <label className="col-6">Checkbox 多选框：</label>
    <div className="col-18">
      <label className="ant-checkbox-inline">
        <Checkbox />选项一
      </label>
      <label className="ant-checkbox-inline">
        <Checkbox />选项二
      </label>
      <label className="ant-checkbox-inline">
        <Checkbox />选项三
      </label>
    </div>
  </div>
  <div className="ant-form-item ant-form-item-compact">
    <label className="col-6">Radio 单选框：</label>
    <div className="col-18">
      <RadioGroup value="b">
        <Radio value="a">A</Radio>
        <Radio value="b">B</Radio>
        <Radio value="c">C</Radio>
        <Radio value="d">D</Radio>
      </RadioGroup>
    </div>
  </div>
</form>
, document.getElementById('components-form-demo-form-controls'));
表单控件

展示所有支持的表单控件。

注： 输入框：只有正确设置了 type 属性的输入控件才能被赋予正确的样式。

var Select = antd.Select;
var Option = Select.Option;

React.render(
<form className="ant-form-horizontal">
  <div className="ant-form-item">
    <label className="col-6" htmlFor="site1">标签输入框：</label>
    <div className="col-16">
      <div className="ant-input-group">
        <span className="ant-input-group-addon" id="basic-addon1">Http://</span>
        <input type="text" id="site1" className="ant-input" defaultValue="mysite.com" />
      </div>
    </div>
  </div>
  <div className="ant-form-item">
    <label className="col-6" htmlFor="site3">标签输入框：</label>
    <div className="col-16">
      <div className="ant-input-group">
        <span className="ant-input-group-addon" id="basic-addon3">Http://</span>
        <input type="text" className="ant-input" id="site3" defaultValue="mysite" />
        <span className="ant-input-group-addon" id="basic-addon4">.com</span>
      </div>
    </div>
  </div>
  <div className="ant-form-item">
    <label className="col-6" htmlFor="site4">select 标签输入框：</label>
    <div className="col-16">
      <div className="ant-input-group">
        <input type="text" className="ant-input" id="site4" placeholder="www.mysite" />
        <div className="ant-input-group-wrap">
          <Select defaultValue=".com" style={{width:70}}>
            <Option value=".com">.com</Option>
            <Option value=".jp">.jp</Option>
            <Option value=".cn">.cn</Option>
            <Option value=".org">.org</Option>
          </Select>
        </div>
      </div>
    </div>
  </div>
  <div className="ant-form-item">
    <label className="col-6" htmlFor="certNo1">输入身份证：</label>
    <div className="col-16">
      <div className="ant-input-group">
        <div className="col-6">
          <input className="ant-input" type="text" id="certNo1" />
        </div>
        <div className="col-6">
          <input className="ant-input" type="text" id="certNo2" />
        </div>
        <div className="col-6">
          <input className="ant-input" type="text" id="certNo3" />
        </div>
        <div className="col-6">
          <input className="ant-input" type="text" id="certNo4" />
        </div>
      </div>
    </div>
  </div>
  <div className="ant-form-item">
    <label className="col-6" htmlFor="tel1">电话号码：</label>
    <div className="col-16">
      <div className="row">
        <div className="col-4">
          <input className="ant-input" type="text" id="tel1" defaultValue="086" />
        </div>
        <div className="col-2">
          <p className="ant-form-split">--</p>
        </div>
        <div className="col-18">
          <div className="ant-input-group">
            <div className="col-8">
              <input className="ant-input" type="text" id="tel1" />
            </div>
            <div className="col-8">
              <input className="ant-input" type="text" id="tel2" />
            </div>
            <div className="col-8">
              <input className="ant-input" type="text" id="tel3" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</form>
, document.getElementById('components-form-demo-inputs'));
Input 输入框集合

带标签的输入框：使用 .ant-input-group 类并结合 .ant-input-group-addon 类可以创建带标签的输入框。

var Select = antd.Select;
var Option = Select.Option;
var InputNumber = antd.InputNumber;
var Datepicker = antd.Datepicker;
var Switch = antd.Switch;
var Menu = antd.Menu;
var Dropdown = antd.Dropdown;
var Slider = antd.Slider;

var menu = <Menu>
  <Menu.Item>
    <a target="_blank" href="http://www.alipay.com/">.net</a>
  </Menu.Item>
  <Menu.Item>
    <a target="_blank" href="http://www.taobao.com/">.jp</a>
  </Menu.Item>
  <Menu.Item>
    <a target="_blank" href="http://www.tmall.com/">.org</a>
  </Menu.Item>
</Menu>;

function handleSelectChange(value) {
  console.log('selected ' + value);
}

function onInputNumberChange(v){
  console.log('changed',v);
}

React.render(
<form className="ant-form-horizontal">
  <div className="ant-form-item">
    <label className="col-8" required>InputNumber 数字输入框：</label>
    <div className="col-10">
      <InputNumber size="large" min={1} max={10} defaultValue={3} onChange={onInputNumberChange} style={{width:100}}/>
      <span className="ant-form-text"> 台机器</span>
    </div>
  </div>
  <div className="ant-form-item ant-form-item-compact">
    <label className="col-8" required>
      <i className="anticon anticon-exclamation-circle" style={{color: '#f60'}}></i> 我是标题：
    </label>
    <div className="col-10">
      <p className="ant-form-text">唧唧复唧唧木兰当户织呀</p>
      <p className="ant-form-text">
        <a href="javascript:;">链接文字</a>
      </p>
    </div>
  </div>
  <div className="ant-form-item">
    <label htmlFor="" className="col-8" required>Switch 开关：</label>
    <div className="col-10">
      <Switch />
    </div>
  </div>
  <div className="ant-form-item">
    <label htmlFor="" className="col-8" required>Slider 滑动输入条：</label>
    <div className="col-10">
      <Slider marks={["A","B","C","D","E","F","G"]} />
    </div>
  </div>
  <div className="ant-form-item">
    <label htmlFor="" className="col-8" required>Select 选择器：</label>
    <div className="col-16">
      <Select size="large" defaultValue="lucy" style={{width:200}} onChange={handleSelectChange}>
        <Option value="jack">jack</Option>
        <Option value="lucy">lucy</Option>
        <Option value="disabled" disabled>disabled</Option>
        <Option value="yiminghe">yiminghe</Option>
      </Select>
    </div>
  </div>
  <div className="ant-form-item">
    <label htmlFor="" className="col-8" required>Datepicker 日期选择框：</label>
    <div className="col-6">
      <Datepicker />
    </div>
    <div className="col-1">
      <p className="ant-form-split">-</p>
    </div>
    <div className="col-6">
      <Datepicker />
    </div>
  </div>
  <div className="ant-form-item has-error">
    <label htmlFor="" className="col-8" required>Datepicker 校验：</label>
    <div className="col-6">
      <Datepicker />
    </div>
    <div className="col-1">
      <p className="ant-form-split">-</p>
    </div>
    <div className="col-6">
      <Datepicker />
    </div>
    <div className="col-19 col-offset-8">
      <p className="ant-form-explain">请输入正确选项</p>
    </div>
  </div>
</form>
, document.getElementById('components-form-demo-mix'));
表单组合

集中营，展示和表单相关的其他 ant-design 组件。