BootStrap2学习日记12---注册表单

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

<form method="" action="" class="form-horizontal">
<frameset>
<div class="control-group">
<label class="control-label" for="tb_userName">UserName:</label>
<div class="controls">
<input id="tb_userName" placeholder="Please input your user name." type="text" />
<p class="help-block">Please enter a user name you want to register.</p>
</div>
</div>
<div class="control-group">
<label class="control-label" for="tb_password">Password:</label>
<div class="controls">
<input id="tb_password" placeholder="Please input your password." type="text" />
<p class="help-block">Please enter a password you want to register.</p>
</div>
</div>
</frameset>
<div class="form-actions">
<button type="submit" class="btn btn-primary">submit</button>
</div>
</form>

先看Bootstrap下表单的效果

添加一些分组元素后代码如下:

<form method="" action="" class="form-horizontal">
<fieldset>
<div class="control-group">
<label class="control-label" for="tb_userName">UserName:</label>
<div class="controls">
<input id="tb_userName" placeholder="Please input your user name." type="text" />
<p class="help-block">Please enter a user name you want to register.</p>
</div>
</div>
<div class="control-group">
<label class="control-label" for="tb_password">Password:</label>
<div class="controls">
<input id="tb_password" placeholder="Please input your password." type="text" />
<p class="help-block">Please enter a password you want to register.</p>
</div>
</div>
</fieldset>
<div class="form-actions">
<button type="submit" class="btn btn-primary">submit</button>
</div>
</form>