Semantic-UI表单字段内容

Semantic-UI是一款基于语义化设计的UI框架，提供了丰富的表单字段组件，包括输入框、下拉框、单选框、复选框等。

输入框

Semantic-UI提供了多种输入框组件，常用的有文本输入框、密码输入框、搜索框等。它们都具有相似的属性和方法，主要包括以下内容：

• type：输入框类型，可选text（文本输入框）、password（密码输入框）等；
• placeholder：输入框占位符；
• value：输入框的值；
• onChange：输入框内容变化事件；
• onBlur：输入框失焦事件；
• onFocus：输入框获取焦点事件。

下面是一个例子：

<div class="ui input">
  <input type="text" placeholder="请输入文本" onChange={handleChange} />
</div>

下拉框

下拉框是表单中经常用到的组件之一，Semantic-UI提供了<select>元素和<Dropdown>组件两种方式实现下拉框。它们的主要属性和方法如下：

• options：下拉框选项，数组类型，每个选项包含text和value两个属性；
• value：选中的值；
• onChange：选中值变化事件。

下面是一个使用<select>元素的例子：

<div class="ui selection dropdown">
  <input type="hidden" name="gender" value={value} />
  <i class="dropdown icon"></i>
  <div class="text">{value || '请选择'}</div>
  <div class="menu">
    <div class="item" data-value="male">男</div>
    <div class="item" data-value="female">女</div>
  </div>
</div>

下面是一个使用<Dropdown>组件的例子：

<Dropdown
  options={[
    { text: '男', value: 'male' },
    { text: '女', value: 'female' },
  ]}
  value={value}
  onChange={handleChange}
/>

单选框和复选框

单选框和复选框是表单中常用的组件之一，Semantic-UI提供了<input>元素和<Checkbox>组件两种方式实现。它们的主要属性和方法如下：

• type：选框类型，可选radio（单选框）和checkbox（复选框）；
• label：选框标签；
• checked：选框是否选中；
• onChange：选中状态变化事件。

下面是一个使用<input>元素的例子：

<div class="field">
  <div class="ui radio checkbox">
    <input type="radio" name="size" value="small" checked={value === 'small'} onChange={handleChange} />
    <label>小</label>
  </div>
  <div class="ui radio checkbox">
    <input type="radio" name="size" value="medium" checked={value === 'medium'} onChange={handleChange} />
    <label>中</label>
  </div>
  <div class="ui radio checkbox">
    <input type="radio" name="size" value="large" checked={value === 'large'} onChange={handleChange} />
    <label>大</label>
  </div>
</div>

下面是一个使用<Checkbox>组件的例子：

<Checkbox label="同意协议" checked={value} onChange={handleChange} />

总结

通过以上介绍，我们可以看到，Semantic-UI提供了丰富的表单字段组件，使用简单，兼容性良好，可以大大提高开发效率。