r04/form.html · 约 2988 字符
1<!DOCTYPE html>
2<html lang="zh-CN">
3<head>
4<meta charset="utf-8">
5<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
6<title>表单组件</title>
7<link rel="stylesheet" href="style.css">
8</head>
9<body>
10<div class="app">
11 <header class="top">
12 <div class="top-title">表单组件</div>
13 <div class="sub">🎨 UI Kit</div>
14 </header>
15 <main class="main">
16
17<div class="card">
18 <h3><span class="dot"></span>Input 输入框</h3>
19 <div class="field"><label>用户名</label><input class="input" placeholder="请输入用户名"></div>
20 <div class="field"><label>简介</label><textarea class="input" placeholder="一句话介绍自己"></textarea></div>
21</div>
22<div class="card">
23 <h3><span class="dot"></span>Switch 开关</h3>
24 <div class="cell"><div class="tt">接收推送通知</div><div class="sw on" data-sw></div></div>
25 <div class="cell"><div class="tt">允许定位</div><div class="sw" data-sw></div></div>
26 <div class="cell"><div class="tt">夜间模式</div><div class="sw" data-sw></div></div>
27</div>
28<div class="card">
29 <h3><span class="dot"></span>Radio & Checkbox</h3>
30 <div class="opt sel" data-opt><div class="mk"></div>选项 A（默认选中）</div>
31 <div class="opt" data-opt><div class="mk"></div>选项 B</div>
32 <div class="opt chk sel" data-chk><div class="mk"></div>我已阅读并同意条款</div>
33 <div class="opt chk" data-chk><div class="mk"></div>订阅每周精选</div>
34</div>
35<div class="card">
36 <h3><span class="dot"></span>Slider 滑块</h3>
37 <div class="field"><label>音量：<b id="vol">60</b></label><input class="range" type="range" min="0" max="100" value="60" id="rng"></div>
38 <div class="field"><label>亮度：<b id="bri">80</b></label><input class="range" type="range" min="0" max="100" value="80"></div>
39 <button class="btn btn-primary btn-block">提交表单</button>
40</div>
41
42 </main>
43 <nav class="nav">
44 <a href="index.html" class="">🏠<span>总览</span></a>
45 <a href="basic.html" class="">🧩<span>组件</span></a>
46 <a href="form.html" class="on">📝<span>表单</span></a>
47 <a href="feedback.html" class="">💬<span>反馈</span></a>
48 <a href="about.html" class="">ℹ️<span>说明</span></a>
49 </nav>
50</div>
51<script>
52document.querySelectorAll('[data-sw]').forEach(function(el){el.addEventListener('click',function(){el.classList.toggle('on');});});
53document.querySelectorAll('[data-opt]').forEach(function(el){el.addEventListener('click',function(){document.querySelectorAll('[data-opt]').forEach(function(x){x.classList.remove('sel');});el.classList.add('sel');});});
54document.querySelectorAll('[data-chk]').forEach(function(el){el.addEventListener('click',function(){el.classList.toggle('sel');});});
55var rng=document.getElementById('rng'),vol=document.getElementById('vol');
56if(rng){rng.addEventListener('input',function(){vol.textContent=rng.value;});}
57</script>
58</body>
59</html>