siwi-form
Version:
siwi form by siwi
182 lines (175 loc) • 7.09 kB
HTML
<html lang="zh">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="./normalize.css" rel="stylesheet">
<link href="./siwi-layout.css" rel="stylesheet">
<link href="../dist/siwi-form.css" rel="stylesheet">
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
background-color: #f2f3f5;
}
.bg {
background-color: white;
}
</style>
</head>
<body>
<div class="sw flex-row justify-content-center">
<div class="col-8 bg">
<h1 style="text-align:center">form-demo</h1>
<form class="sw form">
<h1>inline-field</h1>
<div class="inline-field">
<label>用户名</label>
<input type="" name="" value="">
</div>
<div class="inline-field">
<label>描述我</label>
<textarea name="" id=""></textarea>
</div>
<div class="fields">
<div class="inline-field">
<label>用户名</label>
<input type="" name="" value="">
</div>
<div class="inline-field">
<label>用户名</label>
<input type="" name="" value="">
</div>
<div class="inline-field">
<label>用户名</label>
<input type="" name="" value="">
</div>
</div>
<div class="fields">
<div class="inline-field col-4">
<label>用户名</label>
<input type="" name="" value="">
</div>
<div class="inline-field col-6">
<label>用户名</label>
<input type="" name="" value="">
</div>
<div class="inline-field col-6">
<label>用户名</label>
<input type="" name="" value="">
</div>
</div>
<h1>field</h1>
<div class="field">
<label>用户名</label>
<input type="" name="" value="">
</div>
<div class="field">
<label>密码</label>
<input type="" name="" value="">
</div>
<div class="field">
<label>描述</label>
<textarea rows="" cols=""></textarea>
</div>
<div class="fields">
<div class="field">
<label>用户名</label>
<input type="" name="" value="">
</div>
<div class="field">
<label>密码</label>
<input type="" name="" value="">
</div>
<div class="field">
<label>用户名</label>
<input type="" name="" value="">
</div>
<div class="field">
<label>密码</label>
<input type="" name="" value="">
</div>
</div>
<div class="fields">
<div class="field col-4">
<label>用户名</label>
<input type="" name="" value="">
</div>
<div class="field col-3">
<label>密码</label>
<input type="" name="" value="">
</div>
<div class="field col-5">
<label>用户名</label>
<input type="" name="" value="">
</div>
<div class="field col-4">
<label>密码</label>
<input type="" name="" value="">
</div>
</div>
<h1>radio</h1>
<div class="field">
<label>爱好</label>
<div class="radio">
<input type="radio" name="aihao" value="">
<label for="">嫦娥</label>
<input type="radio" name="aihao" value="">
<label for="">嫦娥</label>
<input type="radio" name="aihao" value="">
<label for="">嫦娥</label>
</div>
</div>
<div class="inline-field">
<label>爱好</label>
<div class="radio">
<input type="radio" name="aihao" value="">
<label for="">嫦娥</label>
<input type="radio" name="aihao" value="">
<label for="">嫦娥</label>
<input type="radio" name="aihao" value="">
<label for="">嫦娥</label>
</div>
</div>
<h1>chexkbox</h1>
<div class="field">
<label>爱好</label>
<div class="checkbox">
<input type="checkbox" name="aihao" value="">
<label for="">嫦娥</label>
<input type="checkbox" name="aihao" value="">
<label for="">嫦娥</label>
<input type="checkbox" name="aihao" value="">
<label for="">嫦娥</label>
</div>
</div>
<div class="inline-field">
<label>爱好</label>
<div class="checkbox">
<input type="checkbox" name="aihao2" value="">
<label for="">嫦娥</label>
<input type="checkbox" name="aihao2" value="">
<label for="">嫦娥</label>
<input type="checkbox" name="aihao2" value="">
<label for="">嫦娥</label>
</div>
</div>
<h1>select</h1>
<div class="field">
<label for="">选择样式</label>
<select>
<option value="">嫦娥嫦娥A</option>
<option value="">嫦娥嫦娥B</option>
<option value="">嫦娥嫦娥C</option>
</select>
</div>
</form>
<div style="height:100px;">
</div>
</div>
</div>
</body>
</html>