表单

表单组件

输入框

  • Preview
  • Code

<input type="text" name="" placeholder="文本框" class="bny-input">
<br>
<textarea name="" placeholder="多行文本框" class="bny-textarea"></textarea>

前缀/后缀
v2.0.8+

  • Preview
  • Code
@

.bnyui.com 
<div class="bny-input-group">
    <span class="bny-input-prefix">@</span>
    <input type="text" class="bny-input" placeholder="用户名">
</div>
<div class="bny-input-group">
    <input type="text" class="bny-input" placeholder="网址">
    <span class="bny-input-suffix">.bnyui.com</span>
</div>

图标前缀/后缀
v2.0.8+

  • Preview
  • Code

<div class="bny-input-group">
    <span class="bny-input-prefix"><i class="bny-icon icon-search"></i></span>
    <input type="text" class="bny-input" placeholder="搜索...">
</div>
<div class="bny-input-group">
    <input type="text" class="bny-input" placeholder="邮箱">
    <span class="bny-input-suffix"><i class="bny-icon icon-mail"></i></span>
</div>

按钮后缀
v2.0.8+

  • Preview
  • Code

<div class="bny-input-group">
    <input type="text" class="bny-input" placeholder="输入关键字">
    <span class="bny-input-suffix">
        <button class="bny-btn" color="blue">搜索</button>
    </span>
</div>
<div class="bny-input-group">
    <span class="bny-input-prefix">
        <button class="bny-btn" model="border">检查</button>
    </span>
    <input type="text" class="bny-input" placeholder="域名">
</div>

前缀 + 后缀组合
v2.0.8+

  • Preview
  • Code
￥ .00

http:// 
<div class="bny-input-group">
    <span class="bny-input-prefix">￥</span>
    <input type="text" class="bny-input" placeholder="0.00">
    <span class="bny-input-suffix">.00</span>
</div>
<div class="bny-input-group">
    <span class="bny-input-prefix">http://</span>
    <input type="text" class="bny-input" placeholder="example.com">
    <span class="bny-input-suffix">
        <button class="bny-btn" color="green">前往</button>
    </span>
</div>

尺寸变体
v2.0.8+

  • Preview
  • Code


<div class="bny-input-group" size="sm">
    <span class="bny-input-prefix"><i class="bny-icon icon-search"></i></span>
    <input type="text" class="bny-input" placeholder="size=sm">
</div>
<div class="bny-input-group">
    <!-- 默认尺寸 -->
    <span class="bny-input-prefix"><i class="bny-icon icon-search"></i></span>
    <input type="text" class="bny-input" placeholder="默认">
</div>
<div class="bny-input-group" size="lg">
    <span class="bny-input-prefix"><i class="bny-icon icon-search"></i></span>
    <input type="text" class="bny-input" placeholder="size=lg">
</div>

禁用态
v2.0.8+

  • Preview
  • Code

￥ .00 
<!-- 通过 input disabled 触发 -->
<div class="bny-input-group">
    <span class="bny-input-prefix"><i class="bny-icon icon-search"></i></span>
    <input type="text" class="bny-input" placeholder="禁用" disabled>
</div>
<!-- 通过容器 data-disabled 声明 -->
<div class="bny-input-group" data-disabled="true">
    <span class="bny-input-prefix">￥</span>
    <input type="text" class="bny-input" placeholder="0.00">
    <span class="bny-input-suffix">.00</span>
</div>

尺寸变体

  • Preview
  • Code





<input class="bny-input" size="sm">
<input class="bny-input">  <!-- 默认 -->
<input class="bny-input" size="lg">
<select class="bny-select" size="sm">...</select>
<select class="bny-select">...</select>
<select class="bny-select" size="lg">...</select>

选择框

  • Preview
  • Code
<select name="" class="bny-select">
<option >请选择</option>
<option value="1">选项1</option>
<option value="2">选项2</option>
<option value="3">选项3</option>
</select>

单选框

  • Preview
  • Code
<label>
    <input type="radio" name="radio" class="bny-radio">
    选项1
</label>
<label>
    <input type="radio" name="radio" class="bny-radio">
    选项2
</label>
<label>
    <input type="radio" disabled name="radio" class="bny-radio">
    选项3
</label>

复选框

  • Preview
  • Code
<label>
    <input type="checkbox" name="checkbox" class="bny-checkbox">
    选项1
</label>
<label>
    <input type="checkbox" name="checkbox" class="bny-checkbox">
    选项2
</label>
<label>
    <input type="checkbox" disabled name="checkbox" class="bny-checkbox">
    选项3
</label>

开关框

  • Preview
  • Code
<label>
    <input type="checkbox" name="switch" class="bny-switch">
</label>
<label>
    <input type="checkbox" disabled name="switch" class="bny-switch">
</label>

滑块

  • Preview
  • Code
<label>
    <input type="range" name="slider" class="bny-slider">
</label>
<label>
    <input type="range" disabled name="slider" class="bny-slider">
</label>

表单集合

  • Preview
  • Code
6 到 12 位字符 
<form hx-ext="bny-form">
    <div class="form-item">
        <label>文本框</label>
        <div class="input-group">
            <input type="text" name="text" class="bny-input">
        </div>
    </div>
    <div class="form-item">
        <label>验证手机</label>
        <div class="input-group">
            <input type="text" name="text" class="bny-input">
            <button class="bny-btn">获取验证码</button>
        </div>
    </div>
    <div class="form-item">
        <label>自定义验证</label>
        <div class="input-group">
            <input type="password" name="password" class="bny-input">
            <span>6 到 12 位字符</span>
        </div>
    </div>
    <div class="form-item">
        <label>单行选择框</label>
        <div class="input-group">
            <select name="select" class="bny-select">
                <option value="1">选项1</option>
                <option value="2">选项2</option>
                <option value="3">选项3</option>
            </select>
        </div>
    </div>
    <div class="form-item">
        <label>假设联动选择</label>
        <div class="input-group">
            <select name="select" class="bny-select">
                <option value="1">选项1</option>
                <option value="2">选项2</option>
                <option value="3">选项3</option>
            </select>
            <select name="select" class="bny-select">
                <option value="1">选项1</option>
                <option value="2">选项2</option>
                <option value="3">选项3</option>
            </select>
            <select name="select" class="bny-select">
                <option value="1">选项1</option>
                <option value="2">选项2</option>
                <option value="3">选项3</option>
            </select>
        </div>
    </div>
    <div class="form-item">
        <label>复选框</label>
        <div class="input-group">
            <label>
                <input type="checkbox" name="checkbox" class="bny-checkbox">
                选项1
            </label>
            <label>
                <input type="checkbox" name="checkbox" class="bny-checkbox">
                选项2
            </label>
            <label>
                <input type="checkbox" disabled name="checkbox" class="bny-checkbox">
                选项3
            </label>
        </div>
    </div>
    <div class="form-item">
        <label>单选框</label>
        <div class="input-group">
            <label>
                <input type="radio" name="radio" class="bny-radio">
                选项1
            </label>
            <label>
                <input type="radio" name="radio" class="bny-radio">
                选项2
            </label>
            <label>
                <input type="radio" disabled name="radio" class="bny-radio">
                选项3
            </label>
        </div>
    </div>
    <div class="form-item">
        <label>开关框</label>
        <div class="input-group">
            <input type="checkbox" name="switch" class="bny-switch">
        </div>
    </div>
    <div class="form-item">
        <label>滑块</label>
        <div class="input-group">
            <input type="range" name="slider" class="bny-slider">
        </div>
    </div>
    <div class="form-item">
        <label>普通文本域</label>
        <div class="input-group">
            <textarea name="textarea" class="bny-textarea"></textarea>
        </div>
    </div>
</form>

API

CSS 类

类名说明
bny-input输入框，支持 placeholder / disabled / focus
bny-textarea多行文本框，可拖动调整高度
bny-select下拉选择框，带自定义箭头
bny-radio单选框，支持 checked / disabled
bny-checkbox复选框，支持 checked / disabled
bny-switch开关，滑动切换，支持 checked / disabled
bny-slider滑块，自定义 thumb 样式
[hx-ext~="bny-form"]表单容器，统一 label + form-item 布局