表单示例
展示各种表单组件的使用方法和组合使用场景。
完整表单示例
包含多种表单控件的完整表单。
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单示例</title>
<link rel="stylesheet" href="./sanoui.min.css">
</head>
<body>
<div style="padding: 20px; max-width: 800px; margin: 0 auto;">
<h1>用户信息表单</h1>
<form class="sa-form" id="userForm" style="max-width: 600px;">
<!-- 用户名 -->
<div class="sa-form-item">
<label class="sa-form-item__label">用户名</label>
<div class="sa-form-item__content">
<div class="sa-input"
data-prop="username"
data-placeholder="请输入用户名"
data-clearable="true"></div>
</div>
</div>
<!-- 密码 -->
<div class="sa-form-item">
<label class="sa-form-item__label">密码</label>
<div class="sa-form-item__content">
<div class="sa-input"
data-prop="password"
data-type="password"
data-show-password="true"
data-placeholder="请输入密码"></div>
</div>
</div>
<!-- 性别（单选框） -->
<div class="sa-form-item">
<label class="sa-form-item__label">性别</label>
<div class="sa-form-item__content">
<label class="sa-radio"
data-radio
data-label="男"
data-value="male"
data-name="gender"
data-checked="true">
</label>
<label class="sa-radio"
data-radio
data-label="女"
data-value="female"
data-name="gender"
style="margin-left: 20px;">
</label>
</div>
</div>
<!-- 爱好（复选框） -->
<div class="sa-form-item">
<label class="sa-form-item__label">爱好</label>
<div class="sa-form-item__content">
<label class="sa-checkbox"
data-checkbox
data-label="阅读"
data-value="reading">
</label>
<label class="sa-checkbox"
data-checkbox
data-label="运动"
data-value="sports"
style="margin-left: 20px;">
</label>
<label class="sa-checkbox"
data-checkbox
data-label="音乐"
data-value="music"
style="margin-left: 20px;">
</label>
</div>
</div>
<!-- 城市（下拉选择） -->
<div class="sa-form-item">
<label class="sa-form-item__label">城市</label>
<div class="sa-form-item__content">
<div class="sa-select"
data-select
data-options='[{"label":"北京","value":"beijing"},{"label":"上海","value":"shanghai"},{"label":"广州","value":"guangzhou"}]'
style="width: 200px;">
</div>
</div>
</div>
<!-- 生日（日期选择） -->
<div class="sa-form-item">
<label class="sa-form-item__label">生日</label>
<div class="sa-form-item__content">
<div class="sa-date-picker"
data-date-picker
data-placeholder="请选择生日"
style="width: 200px;">
</div>
</div>
</div>
<!-- 通知开关 -->
<div class="sa-form-item">
<label class="sa-form-item__label">接收通知</label>
<div class="sa-form-item__content">
<div class="sa-switch"
data-switch
data-checked="true"
data-labels='["关闭", "开启"]'>
</div>
</div>
</div>
<!-- 提交按钮 -->
<div class="sa-form-item">
<div class="sa-form-item__content">
<button type="submit" class="sa-button" data-button data-type="primary">提交</button>
<button type="button" class="sa-button" data-button id="resetBtn">重置</button>
</div>
</div>
</form>
</div>
<script src="./sanoui.min.js"></script>
<script>
const form = new SaForm('#userForm', {
rules: {
username: [
{ required: true, message: '请输入用户名' },
{ min: 3, max: 20, message: '用户名长度为 3-20 个字符' }
],
password: [
{ required: true, message: '请输入密码' },
{ min: 6, message: '密码至少 6 个字符' }
]
},
onSubmit: (values, valid) => {
if (valid) {
console.log('表单数据:', values);
// 提交表单
}
}
});
document.getElementById('resetBtn').addEventListener('click', () => {
form.resetFields();
});
SA.init('body');
</script>
</body>
</html>搜索表单示例
结合输入框、选择器和按钮的搜索表单。
html
<div style="padding: 20px; background: #f5f7fa; border-radius: 8px;">
<div style="display: flex; gap: 10px; flex-wrap: wrap; align-items: center;">
<!-- 关键词搜索 -->
<div class="sa-input"
data-placeholder="请输入关键词"
data-prefix-icon="search"
style="flex: 1; min-width: 200px; max-width: 300px;">
</div>
<!-- 分类选择 -->
<div class="sa-select"
data-select
data-placeholder="全部分类"
data-options='[{"label":"全部","value":""},{"label":"分类一","value":"1"},{"label":"分类二","value":"2"}]'
style="width: 150px;">
</div>
<!-- 日期范围 -->
<div class="sa-date-picker"
data-date-picker
data-placeholder="开始日期"
style="width: 150px;">
</div>
<span style="color: #909399;">至</span>
<div class="sa-date-picker"
data-date-picker
data-placeholder="结束日期"
style="width: 150px;">
</div>
<!-- 搜索按钮 -->
<button class="sa-button"
data-button
data-type="primary"
data-icon="search">
搜索
</button>
<!-- 重置按钮 -->
<button class="sa-button"
data-button>
重置
</button>
</div>
</div>
<script>
SA.init('body');
</script>