bootstrap表单

最新推荐文章于 2025-08-11 19:52:03 发布

转载最新推荐文章于 2025-08-11 19:52:03 发布 · 361 阅读

文章标签：

#javascript #ViewUI

bootstrap 专栏收录该内容

10 篇文章

订阅专栏

总体说明：

1.所有的form控件都必须添加form-control，保证所有控件都能正确显示

2.placeholder表示在不输入内容的时候的显示内容

3.在form上使用了form-horizontal，那么form-group就相当于一行

（1）输入框

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单控件——输入框input</title>
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>
<body>
<form role="form">
  <div class="form-group">
    <input type="email" class="form-control" placeholder="Enter email">
  </div>
</form>   
</body>
</html>

（2）下拉框

注意

多行下拉框（也就是直接展开的）使用multiple属性

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
	<title>表单控件——下拉选择框select元素</title>
	<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>
<body>
<form role="form">
  <div class="form-group">
    <select class="form-control"> 
      <option>1</option> 
      <option>2</option> 
      <option>3</option> 
      <option>4</option> 
      <option>5</option> 
      </select>
  </div>
  <div class="form-group">
      <select multiple class="form-control"> 
        <option>1</option> 
        <option>2</option> 
        <option>3</option> 
        <option>4</option> 
        <option>5</option> 
      </select>
  </div>

</form>   
</body>
</html>

（3）文本域textarea

注意

只用设置rows即可，宽度默认为100%或auto

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
	<title>表单控件——下拉选择框select元素</title>
	<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>
<body>
<form role="form">
  <div class="form-group">
    <textarea class="form-control" rows="3"></textarea>
  </div>
</form>    
</body>
</html>

（4）单选、复选框

注意

必须按照以下使用方法

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单控件——表单控件大小</title>
	<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>
<body>
<form role="form">
  <h3>案例1</h3>
  <div class="checkbox">
    <label>
      <input type="checkbox" value="">
      记住密码
    </label>
  </div>
  <div class="radio">
    <label>
      <input type="radio" name="optionsRadios" id="optionsRadios1" value="love" checked>
      喜欢
    </label>
  </div>
    <div class="radio">
    <label>
      <input type="radio" name="optionsRadios" id="optionsRadios2" value="hate">
      不喜欢
    </label>
  </div>

</form>     
</body>
</html>

注意：

1.不管是checkbox还是radio都必须使用label包起来
2.checkbox连同label放在一个class为,checkbox的容器中；radio连同label放在一个class为radio的容器中

如果要单选、复选框水平排列，则需要在label上加上内联的class

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>表单控件(复选框和单选按钮水平排列)</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>

<body>
<form role="form">
  <div class="form-group">
    <label class="checkbox-inline">
      <input type="checkbox"  value="option1">游戏
    </label>
    <label class="checkbox-inline">
      <input type="checkbox"  value="option2">摄影
    </label>
    <label class="checkbox-inline">
    <input type="checkbox"  value="option3">旅游
    </label>
  </div>
  <div class="form-group">
    <label class="radio-inline">
      <input type="radio"  value="option1" name="sex">男性
    </label>
    <label class="radio-inline">
      <input type="radio"  value="option2" name="sex">女性
    </label>
    <label class="radio-inline">
      <input type="radio"  value="option3" name="sex">中性
    </label>
  </div>
</form>

</form>
</body>
</html>

（5）控件大小控制

1.使用input-lg、input-sm

input-lg使得控件比普通控件大，input-sm使得控件比普通控件小

注意：只适用于input、textarea、select控件

只能调整高度

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
	<title>表单控件大小</title>
	<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>
<body>
<h1>案例1</h1>
<form role="form">
  <div class="form-group">
    <label class="control-label">控件变大</label>
    <input class="form-control input-lg" type="text" placeholder="添加.input-lg，控件变大">
  </div>
  <div class="form-group">
    <label class="control-label">正常大小</label>
    <input class="form-control" type="text" placeholder="正常大小">
  </div>  
  <div class="form-group">
    <label class="control-label">控件变小</label>
    <input class="form-control input-sm" type="text" placeholder="添加.input-sm，控件变小">
  </div> 
</form> 
  
</body>
</html>

（6）控件状态控制

1.禁用状态

在控件上添加disabled属性即可

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
	<title>表单控件状态——禁用状态</title>
	<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>
<body>
<h3>示例1</h3>
<form role="form" class="form-horizontal">
  <div class="form-group">
    <div class="col-xs-6">
      <input class="form-control input-lg" type="text" placeholder="不是焦点状态下效果">
    </div>
    <div class="col-xs-6">
      <input class="form-control input-lg" id="disabledInput" type="text" placeholder="表单已被禁用，不可输入" disabled>
    </div>
  </div> 
</form> 
</body>
</html>

2.验证状态

验证状态有成功、警告、错误三种

1、.has-warning:警告状态（黄色）
2、.has-error：错误状态（红色）
3、.has-success：成功状态（绿色）

只要在form-group容器上添加对应的状态类即可

如果还需要显示状态图标，那么还要加上“has-feedback”。请注意，此类名要与“has-error”、“has-warning”和“has-success”在一起：并且需要加上一个<span>

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
	<title>表单控件状态——验证状态</title>
	<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
  
<form role="form">
  <div class="form-group has-success has-feedback">
    <label class="control-label" for="inputSuccess1">成功状态</label>
    <input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" >
    <span class="glyphicon glyphicon-ok form-control-feedback"></span>
  </div>
  <div class="form-group has-warning has-feedback">
    <label class="control-label" for="inputWarning1">警告状态</label>
    <input type="text" class="form-control" id="inputWarning1" placeholder="警告状态">
    <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
  </div>
  <div class="form-group has-error has-feedback">
    <label class="control-label" for="inputError1">错误状态</label>
    <input type="text" class="form-control" id="inputError1" placeholder="错误状态">
    <span class="glyphicon glyphicon-remove form-control-feedback"></span>  
  </div>

</form>
</body>
</html>

3.验证提示信息

可以使用网格系统，并使用help-block类

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
	<title>表单提示信息</title>
	<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>
<body>

<form role="form">
  <div class="form-group  has-success has-feedback">
    <label class="control-label" for="inputSuccess1">成功状态</label>
    <div class="row">
      <div class="col-xs-6">
        <input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" >
      </div>
       <span class="col-xs-6 help-block">你输入的信息是正确的</span>
    </div>
  </div> 
</form> 
</body>
</html>