表单 Form

表单组件

默认样式

姓名

年龄

文本框

复选框

选择

作者

作者

作者

开关

单选框

1

2

2

2

动态选择

提交

显示代码

<div class="open-container">
		<form class="form" action="" >
			<div class="open-form-item">
				<label class="open-label">姓名</label>
				<input class="open-input" name="input" type="text" placeholder="文本框">
			</div>
			<div class="open-form-item">
				<label class="open-label">年龄</label>
				<input class="open-input open-input-error" name="text" type="text" placeholder="文本框">
			</div>
			<div class="open-form-item">
				<label class="open-label">文本框</label>
				<textarea class="open-textarea" type="textarea" name="content" placeholder="文本框"></textarea>
			</div>
			<div class="open-form-item">
				<label class="open-label">复选框</label>
				<div class="open-checkbox-group">
					<div class="open-checkbox">
						<input type="checkbox" id="name" name="checkbox[1]" value="1" class="open-check" title="复选框">
						<label class="open-check-label" for="name">选择</label>
					</div>
					<div class="open-checkbox">
						<input type="checkbox" id="author" name="checkbox[2]" value="2" class="open-check" checked>
						<label class="open-check-label" for="author">作者</label>
					</div>
					<div class="open-checkbox">
						<input type="checkbox" id="authors" name="checkbox[3]" value="3" class="open-check" checked disabled>
						<label class="open-check-label" for="authors">作者</label>
					</div>
					<div class="open-checkbox">
						<input type="checkbox" id="authors" name="checkbox[4]" value="4" class="open-check" disabled>
						<label class="open-check-label" for="authors">作者</label>
					</div>
				</div>
			</div>
			<div class="open-form-item">
				<label class="open-label">开关</label>
				<div class="open-checkbox-group">
					<div class="open-switchbox">
						<input type="checkbox" name="switch1" id="switch" class="open-switch">
						<label class="open-switch-label" for="switch">
							<span class="open-switch-slider"></span>
						</label>
					</div>
					<div class="open-switchbox">
						<input type="checkbox" name="switch2" class="open-switch" disabled>
						<label class="open-switch-label" for="switch">
							<span class="open-switch-slider"></span>
						</label>
					</div>
				</div>
			</div>
			<div class="open-form-item">
				<label class="open-label">单选框</label>
				<div class="open-radio-group">
					<div class="open-radiobox">
						<input type="radio" id="1" name="radio[1]" value="1" class="open-radio" title="复选框" checked>
						<label class="open-radio-label" for="1">1</label>
					</div>
					<div class="open-radiobox">
						<input type="radio" id="2" name="radio[1]" value="2" class="open-radio">
						<label class="open-radio-label" for="2">2</label>
					</div>
					<div class="open-radiobox">
						<input type="radio" id="2" name="radio[1]" value="3" class="open-radio" checked disabled>
						<label class="open-radio-label" for="2">2</label>
					</div>
					<div class="open-radiobox">
						<input type="radio" id="2" name="radio[1]" value="4" class="open-radio" disabled>
						<label class="open-radio-label" for="2">2</label>
					</div>
				</div>
			</div>
			<div class="open-form-item open-col-5">
				<label class="open-label">动态选择</label>
				<div id="select" class=""></div>
			</div>
			<div class="open-form-item">
				<label class="open-label"></label>
				<div class="open-btn" id="form-submit" >提交</div>
			</div>
		</form>
	</div>