Bootstrap表单

• 最外层应该是<form></form>标签
• 里面嵌套各种子元素

只读文本框

<input class="form-control" type="text" placeholder="只读内容：请填写下面信息！" readonly="readonly" />

输入文本框和密码框

			<div class="form-group">
				<label for="user">请输入用户名：</label>
				<input type="text" id="user" class="form-control" placeholder="请输入用户名" />
			</div>
			<div class="form-group">
				<label for="password">请输入密码：</label>
				<input type="password" id="password" class="form-control" placeholder="请输入密码" />
			</div>

复选框

<div class="form-check">
   			<input type="checkbox" id="check" class="form-check-input" />
   			<label for="check">保存用户名和密码</label>
   		</div>

单选按钮

 		<div class="form-group form-check-inline">
   			<div class="form-check">
   				<input type="radio" name="radio" id="male" class="form-check-input" value="male" checked="checked" />
   				<label for="male">男</label>
   			</div>
   			<div class="form-check">
   				<input type="radio" name="radio" id="female" class="form-check-input" value="female" />
   				<label for="female">女</label>
   			</div>
   		</div>

水平多个文本框

   	      <div class="form-group">
   			<label for="born">出生年月日：</label>
   			<div id="born" class="form-row">
   				<div class="col-6">
   					<input type="text" class="form-control" placeholder="年">
   				</div>
   				<div class="col-3">
   					<input type="text" class="form-control" placeholder="月">
   				</div>
   				<div class="col-3">
   					<input type="text" class="form-control" placeholder="日">
   				</div>
   			</div>
   		</div>

单选下拉列表和多选下拉列表

		<div class="form-group">
  			<label for="city1">请选择城市（单选）：</label>
  			<select name="city1" id="city1" class="form-control">
  				<option value="beijing">北京</option>
  				<option value="shanghai">上海</option>
  				<option value="tianjin">天津</option>
  			</select>
  		</div>
  		<div class="form-group">
  			<label for="city2">请选择城市（多选）：</label>
  			<select multiple="multiple" name="city2" id="city2" class="form-control">
  				<option value="beijing">北京</option>
  				<option value="shanghai">上海</option>
  				<option value="tianjin">天津</option>
  			</select>
  		</div>

输入文本域

			<div class="form-group">
				<label for="info">请输入备注：</label>
				<textarea name="info" id="info" cols="30" rows="10" class="form-control"></textarea>
			</div>

上传文件

			<div class="form-group">
				<label for="file">请上传头像：</label>
				<input type="file" id="file" class="form-control-file" />
			</div>

输入带格式的电子邮箱

			<div class="form-group">
				<label for="email" class="col-form-label-lg">请输入电子邮箱：</label>
				<div class="input-group">
					<div class="input-group-append">
						<span class="input-group-text">@</span>
					</div>
					<input type="email" id="email" class="form-control form-control-lg" />
				</div>
			</div>

范围选择

			<div class="form-group">
				<label for="range">请选择范围：</label>
				<input type="range" id="range" class="form-control-range" />
			</div>