bootstrap学习笔记（三）--form

这一次主要是写注册和登陆页面。

先上注册页面：

<div class="container">
	<h2>注册</h2>
	<form class="form-horizontal">
		<div class="control-group">
			<label class="control-label" for="inputEmail">我的邮箱</label>
			<div class="controls">
				<input type="text" id="inputEmail" name="email">
				<span class="help-block">请输入一个常用的邮箱.</span>
			</div>
		</div>

		<div class="control-group">
			<label class="control-label" for="inputPassword">密码</label>
			<div class="controls">
				<input type="password" id="inputPassword" name="password">
				<span class="help-inline">输入6位字符.</span>
			</div>
		</div>

		<div class="control-group">
			<label class="control-label" for="inputPassword">确认密码</label>
			<div class="controls">
				<input type="password" id="inputPassword">
			</div>
		</div>

		<div class="control-group">
			<label class="control-label">兴趣</label>
			<div class="controls">
				<label class="checkbox inline">
					<input type="checkbox" value="football" name="ball" />足球
				</label>
				<label class="checkbox inline">
					<input type="checkbox" value="basketball" name="ball" />篮球
				</label>
				<label class="checkbox inline">
					<input type="checkbox" value="pingpang" name="ball" />乒乓球
				</label>
			</div>
		</div>

		<div class="control-group">
			<label class="control-label">性别</label>
			<div class="controls">
				<label class="radio inline">
					<input type="radio" value="1" name="sex" />男
				</label>
				<label class="radio inline">
					<input type="radio" value="2" name="sex" />女
				</label>
			</div>
		</div>

		<div class="control-group">
			<label class="control-label">生日</label>
			<div class="controls">
				<select name="birthday_year" class="span2">
					<option value="1988">1988</option>
					<option value="1989">1989</option>
					<option value="1990">1990</option>
					<option value="1991">1991</option>
					<option value="1992">1992</option>
				</select>
				<select name="birthday_month" class="span1">
					<option value="1">1</option>
					<option value="2">2</option>
					<option value="3">3</option>
					<option value="4">4</option>
					<option value="5">5</option>
				</select>
				<select name="birthday_day" class="span1">
					<option value="1">1</option>
					<option value="2">2</option>
					<option value="3">3</option>
					<option value="4">4</option>
					<option value="5">5</option>
				</select>
			</div>
		</div>
		
		<div class="control-group">
			<label class="control-label">兴趣2</label>
			<div class="controls">
				<select multiple="multiple" name="interest2">
					<option value="1">看书</option>
					<option value="2">书法</option>
					<option value="3">音乐</option>
				</select>
			</div>
		</div>
		
		<div class="control-group">
			<label class="control-label">个人描述</label>
			<div class="controls">
				<textarea rows="3" placeholder="简单介绍下自己吧！"></textarea>
			</div>
		</div>

		<div class="control-group">
			<label class="control-label">注册时间</label>
			<div class="controls">
				<input type="text" value="2013-03-02" disabled name="time">
			</div>
		</div>

		 <div class="control-group">
			<div class="controls">
			  <label class="checkbox">
				<input type="checkbox" name="rememberPwd"> 记住密码
			  </label>
			  <button type="submit" class="btn btn-primary">    注册    </button>
			  <button type="reset" class="btn">    重置    </button>
			</div>
		  </div>
	</form>
	</div>

页面效果：

把我能想到的元素全包括进去了。尽管没有自己写的样式，看起来也高端大气很多。稍加修饰就是一个很漂亮的表单了。

登录页面

<div class="container">
		<h2>登录</h2>
		<form>
			<div class="input-prepend">
			  <span class="add-on"><span class="icon-user"></span></span>
			  <input class="span2" placeholder="aaa@example" type="text" name="inputEmail" />
			</div><br />
			<div class="input-prepend">
				<span class="add-on"><span class="icon-lock"></span></span>
				<input class="span2" placeholder="密码" name="inputPassword" type="password" />
			</div><br />
			<input type="submit" class="btn btn-primary" value="登陆" />
			<a href="#">注册新账号</a>
		</form>
	</div>