---
title: 表单
category: widget
---
<h3>表单元件</h3>
{{#snippet}}
<div class="form-box">

	<div class="form-item">
		<label class="form-label" for="J_nickname">邮箱：</label>
		<div class="form-part">
			<input type="text" class="input-plain" maxlength="24" id="J_nickname" value="shifu.wang@dianping.com" disabled>
		</div>
	</div>

	<div class="form-item">
		<label class="form-label" for="J_nickname">昵称：</label>
		<div class="form-part">
			<input type="text" class="input-plain" maxlength="24" id="J_nickname" placeholder="请输入昵称" value="王师傅">
		</div>
		<div class="f-msg"><span class="msg-error">不要乱输入啊</span></div>
	</div>

	<div class="form-item">
		<label class="form-label">性别：</label>
		<div class="form-part">
			<input name="gender" id="J_male" type="radio" value="1">
			<label for="J_male">男</label>
			<input name="gender" id="J_female" type="radio" value="0">
			<label for="J_female">女</label>
		</div>
	</div>

	<div class="form-item">
		<label for="J_bio" class="form-label">自我介绍：</label>
		<div class="form-part">
			<textarea rows="5" class="textarea-plain" id="J_bio" placeholder="简单介绍下自己，让更多Dper了解你吧~~"></textarea>
		</div>
	</div>

	<div class="form-item">
		<label for="J_bio" class="form-label">活动区域：</label>
		<div class="form-part">
			<p>住处：<span>上海</span><a href="javascript:;" id="J_live">[修改]</a></p>
			<p>工作地：<span>中山公园</span><a href="javascript:;" id="J_work">[修改]</a></p>
		</div>
	</div>
{{/snippet}}