<!-- 使用 form 标签包裹 -->
<form action="">
<!-- 基础表单结构 -->
<div class="field">
<label class="label"><span class="required">*</span>用户名:</label>
<p class="control">
<input class="input" type="email" placeholder="请输入邮箱或手机号码">
</p>
</div>
<div class="field">
<label class="label"><span class="required">*</span>密码:</label>
<!-- 输入框如需要 icon，使用 has-icon 类名及以下结构 -->
<p class="control has-icon">
<input class="input" type="email" placeholder="请输入您的密码">
<span class="icon is-small"><i class="iconfont icon-id"></i></span>
</p>
</div>
<div class="field">
<label class="label"><span class="required">*</span>填写留言</label>
<p class="control">
<!-- 使用对应输入框类型的类名 -->
<textarea class="textarea" placeholder="请输入您的意见与建议"></textarea>
</p>
</div>
<div class="field">
<label class="label">是否接受回访？</label>
<p class="control">
<label class="radio">
<input type="radio" name="question">
我接受
</label>
<label class="radio">
<input type="radio" name="question">
不要打扰我
</label>
</p>
</div>
<!-- 使用 is-grouped 类名让按钮水平排列 -->
<div class="field is-grouped mt">
<p class="control">
<button class="btn brand">提交</button>
</p>
<p class="control">
<button class="btn is-link">取消</button>
</p>
</div>
</form>
<form action="">
<!-- 水平表单结构 -->
<div class="field is-horizontal">
<div class="field-label is-normal">
<label class="label"><span class="required">*</span>姓名:</label>
</div>
<div class="field-body">
<div class="field">
<p class="control">
<input class="input" type="text" placeholder="请输入您的姓名">
</p>
</div>
</div>
</div>
<div class="field is-horizontal">
<!-- 默认情况下需要使用 is-normal 类名来让表单水平对齐 -->
<div class="field-label is-normal">
<label class="label">项目角色:</label>
</div>
<div class="field-body">
<div class="field is-narrow">
<div class="control">
<div class="select">
<select>
<option value="">选择所属项目角色</option>
<option value="guest">Guest</option>
<option value="master">Master</option>
<option value="developer">Developer</option>
</select>
</div>
</div>
</div>
</div>
</div>
<div class="field is-horizontal">
<div class="field-label is-normal">
<label class="label"><span class="required">*</span>问题:</label>
</div>
<div class="field-body">
<div class="field">
<p class="control">
<textarea class="textarea" placeholder="请输入问题"></textarea>
</p>
</div>
</div>
</div>
<div class="field is-horizontal">
<div class="field-label">
<!-- 依然需要保留空的结构 -->
</div>
<div class="field-body">
<div class="field">
<div class="control">
<button class="btn brand">提交问题</button>
</div>
</div>
</div>
</div>
</form>
如果需要使用表单验证，使用下面的调用方法，更多参数请查看 Parsley 文档
<!-- html 结构 -->
<form action="" data-parsley-validate>
<input type="text" data-parsley-type="email" required>
</form>
<!-- js 初始化 -->
require(['jquery', 'parsleyjs/dist/parsley', 'parsleyjs/dist/i18n/zh_cn']);