English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Tutorial básico Bootstrap

Plugin Bootstrap

Formulários Bootstrap

Nesta seção, vamos aprender a usar Bootstrap para criar formulários. O Bootstrap pode criar diferentes estilos de formulários usando apenas tags HTML simples e classes estendidas.

Layout de formulário

Bootstrap oferece os seguintes tipos de layout de formulário:

  • Formulário vertical (padrão)

  • 内联表单

  • 水平表单

Formulário vertical ou básico

A estrutura básica do formulário é自带 Bootstrap, e os controles de formulário individuais recebem automaticamente alguns estilos globais. A seguir estão os passos para criar um formulário básico:

  • Adicionar ao elemento pai <form> role="form".

  • 把标签和控件放在一个带有 class .form-group no <div>. Isso é necessário para obter o melhor espaçamento.

  • Adicionar class =" ao todos os elementos de texto <input>、<textarea> e <select>form-control" 。

Exemplo online

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Exemplo Bootstrap　-　Formulário básico</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<form role="form">
	<div class="form-group">
		<label for="name">Nome</label>
		<input type="text" class="form-control"　id="name"　
			　　　placeholder="请输入名称">
	</div>
	<div class="form-group">
		<label for="inputfile">Arquivo de entrada</label>
		<input　type="file"　id="inputfile">
		<p　class="help-block">这里是块级帮助文本的示例。</</p>
	</div>
	<div class="checkbox">
		<label>
			<input　type="checkbox">　请打勾
		</label>
	</div>
	<button　type="submit"　class="btn　btn-default">提交</button>
</form>
</body>
</html>
Teste e veja ‹/›

Os resultados estão conforme mostrado a seguir:

内联表单

如果需要创建一个表单，它的所有元素是内联的，向左对齐的，标签是并排的，请向 <form> 标签添加 class .form-inline.

Exemplo online

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Exemplo Bootstrap　-　内联表单</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<form　class="form-inline"　role="form">
	<div class="form-group">
		<label　class="sr-only"　for="name">名称</label>
		<input type="text" class="form-control"　id="name"　
			　　　placeholder="请输入名称">
	</div>
	<div class="form-group">
		<label　class="sr-only"　for="inputfile">文件输入</label>
		<input　type="file"　id="inputfile">
	</div>
	<div class="checkbox">
		<label>
			<input　type="checkbox">　请打勾
		</label>
	</div>
	<button　type="submit"　class="btn　btn-default">提交</button>
</form>
</body>
</html>
Teste e veja ‹/›

Os resultados estão conforme mostrado a seguir:

  • 默认情况下，Bootstrap 中的 input、select 和 textarea 有 100% 宽度。在使用内联表单时，您需要在表单控件上设置一个宽度。

  • 使用 class .sr-only，您可以隐藏内联表单的标签。

水平表单

水平表单与其他表单不仅标记的数量上不同，而且表单的呈现形式也不同。如需创建一个水平布局的表单，请按下面的几个步骤进行：

  • 向父 <form> 元素添加 class .form-horizontal.

  • 把标签和控件放在一个带有 class .form-group 的 <div> 中。

  • 向标签添加 class .control-label.

Exemplo online

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Exemplo Bootstrap　-　水平表单</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<form　class="form-horizontal"　role="form">
	<div class="form-group">
		<label　for="firstname"　class="col-sm-2　control-label">名字</label>
		<div class="col-sm-10">
			<input type="text" class="form-control"　id="firstname"　
				　　　placeholder="请输入名字">
		</div>
	</div>
	<div class="form-group">
		<label　for="lastname"　class="col-sm-2　control-label">姓</label>
		<div class="col-sm-10">
			<input type="text" class="form-control"　id="lastname"　
				　　　placeholder="请输入姓">
		</div>
	</div>
	<div class="form-group">
		<div class="col-sm-offset-2　col-sm-10">
			<div class="checkbox">
				<label>
					<input　type="checkbox">　请记住我
				</label>
			</div>
		</div>
	</div>
	<div class="form-group">
		<div class="col-sm-offset-2　col-sm-10">
			<button　type="submit"　class="btn　btn-default">登录</button>
		</div>
	</div>
</form>
</body>
</html>
Teste e veja ‹/›

Os resultados estão conforme mostrado a seguir:

支持的表单控件

Bootstrap 支持最常见的表单控件，主要是 input、textarea、checkbox、radio 和 select.

输入框(Input)

Caixa de texto (Input)5 Os campos de texto mais comuns dos formulários são as caixas de texto input. O usuário pode inserir a maioria dos dados necessários para o formulário. Bootstrap oferece suporte a todos os tipos nativos de HTMLdo tipo input, incluindo:-text, password, datetime, datetime e local, date, month, time, week, number, email, url, search, telcolor Adequado type A declaração é necessária para que input

Exemplo online

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Exemplo Bootstrap　-　Obtenha estilos completos./title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<form role="form">
	<div class="form-group">
		Caixa de texto</label>
		<input type="text" class="form-<label for="name">Etiqueta<
	</div>
　</form>
</body>
</html>
Teste e veja ‹/›

Os resultados estão conforme mostrado a seguir:

Caixa de texto (Textarea)

Use a caixa de texto textarea para entrada de múltiplas linhas. Pode ser alterado se necessário lines Atributo (menos linhas = caixa menor, mais linhas = caixa maior).

Exemplo online

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Exemplo Bootstrap　-　Caixa de texto</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<form role="form">
	<div class="form-group">
		<label for="name">Caixa de texto</label>
		<textarea class="form-control" rows="3></textarea>
	</div>
</form>
</body>
</html>
Teste e veja ‹/›

Os resultados estão conforme mostrado a seguir:

Caixa de seleção (Checkbox) e botão de opção (Radio)

Caixas de seleção (Checkbox) e botões de opção (Radio) são usados para permitir que o usuário escolha entre uma série de opções pré-definidas.

  • Use quando quiser que o usuário selecione várias opções de uma lista checkboxUse se quiser que o usuário possa escolher apenas uma opção radio.

  • para usar em uma série de caixas de seleção e botões de opção .checkbox-inline ou .radio-inline class, controla a exibição em uma linha.

Os seguintes exemplos demonstram esses dois tipos (padrão e inline):

Exemplo online

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Exemplo Bootstrap　-　Caixa de seleção e botão de opção</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<label for="name">Exemplo de caixa de seleção e botão de opção padrão</label>
<div class="checkbox">
	<label><input type="checkbox" value="">Opção　1</label>
</div>
<div class="checkbox">
	<label><input type="checkbox" value="">Opção　2</label>
</div>
<div class="radio">
	<label>
		<input type="radio" name="optionsRadios" id="optionsRadios1" value="opção1" checked>opção　1
	</label>
</div>
<div class="radio">
	<label>
		<input type="radio" name="optionsRadios" id="optionsRadios2" value="opção2">Opção　2　-　Selecione-o para desmarcar a opção　1
	</label>
</div>
<label for="name">Exemplo de caixa de seleção e botão de opção inline</label>
<div>
	<label class="checkbox-inline">
		<input type="checkbox" id="inlineCheckbox"}1" value="opção1">opção　1
	</label>
	<label class="checkbox-inline">
		<input type="checkbox" id="inlineCheckbox"}2" value="opção2">opção　2
	</label>
	<label class="checkbox-inline">
		<input type="checkbox" id="inlineCheckbox"}3" value="opção3">opção　3
	</label>
	<label class="radio-inline">
		<input type="radio" name="optionsRadiosinline" id="optionsRadios3" value="opção1" checked>opção　1
	</label>
	<label class="radio-inline">
		<input type="radio" name="optionsRadiosinline" id="optionsRadios4" value="opção2">opção　2
	</label>
</div>
</body>
</html>
Teste e veja ‹/›

Os resultados estão conforme mostrado a seguir:

caixa de seleção (Select)

Quando você quiser que o usuário possa escolher várias opções, mas, por padrão, apenas uma opção pode ser selecionada, use a caixa de seleção.

  • usar <select> para exibir opções de lista, geralmente listas de seleção que os usuários conhecem bem, como estados ou números.

  • usar multiple="multiple" permite que o usuário selecione várias opções.

abaixo são demonstrados esses dois tipos (select e multiple):

Exemplo online

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Exemplo Bootstrap　-　caixa de seleção/title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<form role="form">
	<div class="form-group">
		<label for="name">lista de seleção/label>
		<select class="form-control">
			<option>1</option>
			<option>2</option>
			<option>3</option>
			<option>4</option>
			<option>5</option>
		</select>
		<label for="name">lista de seleção multipla/label>
		<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>
Teste e veja ‹/›

Os resultados estão conforme mostrado a seguir:

controle estático

Quando você precisar colocar texto puro após a etiqueta do formulário em um formulário horizontal, use a classe <p>. .form-control-estática.

Exemplo online

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Exemplo Bootstrap　-　controle estático</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<form　class="form-horizontal"　role="form">
	<div class="form-group">
		<label　class="col-sm-2　control-etiqueta">Email</label>
		<div class="col-sm-10">
			<p class="form-control-estática">[email protected]</</p>
		</div>
	</div>
	<div class="form-group">
		<label　for="inputPassword"　class="col-sm-2　control-etiqueta">senha</label>
		<div class="col-sm-10">
			<input type="password" class="form-controle" id="inputPassword"　
				　　　placeholder="Por favor, insira a senha">
		</div>
	</div>
</form>
</body>
</html>
Teste e veja ‹/›

Os resultados estão conforme mostrado a seguir:

estado do controle do formulário

Além de :focus estado (isto é, quando o usuário clica no input ou usa a tecla tab para focar no input), o Bootstrap também define estilos para campos de entrada desativados e fornece classes de validação de formulário.

foco do campo de entrada

quando o campo de entrada input recebe :focus ao desativar, a contorno do campo de entrada será removido e aplicado caixa-sombra.

campo de entrada desativado input

Se você deseja desativar um campo de entrada input, basta adicionar simplesmente desativado a propriedade, que não só desativa o campo de entrada, mas também altera o estilo do campo de entrada e o estilo do cursor do mouse quando o ponteiro do mouse está sobre o elemento.

conjunto de campos desativado

通过给 <fieldset> 添加 disabled 属性来禁用 <fieldset> 内的所有控件。

验证状态

Bootstrap 包含了错误、警告和成功消息的验证样式。只需要对父元素简单地添加适当的 class（.has-warning、 .has-error 或 .has-success）即可使用验证状态。

下面的示例演示了所有控件状态：

Exemplo online

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Exemplo Bootstrap　-　表单控件状态</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<form　class="form-horizontal"　role="form">
	<div class="form-group">
		<label　class="col-sm-2　control-label">聚焦</label>
		<div class="col-sm-10">
			<input class="form-control"　id="focusedInput"　type="text"　　value="该输入框获得焦点...">
		</div>
	</div>
	<div class="form-group">
		<label　for="inputPassword"　class="col-sm-2　control-label">
			禁用
		</label>
		<div class="col-sm-10">
			<input class="form-control"　id="disabledInput"　type="text"　placeholder="该输入框禁止输入..."　disabled>
		</div>
	</div>
	<fieldset　disabled>
		<div class="form-group">
			<label　for="disabledTextInput"　　class="col-sm-2　control-label">禁用输入（Fieldset　disabled）
			</label>
			<div class="col-sm-10">
				<input　type="text"　id="disabledTextInput"　class="form-control"　　placeholder="禁止输入">
			</div>
		</div>
		<div class="form-group">
			<label　for="disabledSelect"　　class="col-sm-2　control-label">禁用选择菜单（Fieldset　disabled）
			</label>
			<div class="col-sm-10">
				<select　id="disabledSelect"　class="form-control">
					<option>禁止选择</option>
				</select>
			</div>
		</div>
	</fieldset>
	<div class="form-group　has-success">
		<label　class="col-sm-2　control-label"　for="inputSuccess">
			输入成功
		</label>
		<div class="col-sm-10">
			<input type="text" class="form-control"　id="inputSuccess">
		</div>
	</div>
	<div class="form-group　has-warning">
		<label　class="col-sm-2　control-label"　for="inputWarning">
			输入警告
		</label>
		<div class="col-sm-10">
			<input type="text" class="form-control"　id="inputWarning">
		</div>
	</div>
	<div class="form-group　has-error">
		<label　class="col-sm-2　control-label"　for="inputError">
			Erro de entrada
		</label>
		<div class="col-sm-10">
			<input type="text" class="form-control" id="inputError">
		</div>
	</div>
</form>
</body>
</html>
Teste e veja ‹/›

Os resultados estão conforme mostrado a seguir:

Tamanho do controle de formulário

Você pode usar separadamente a classe .input-lg e .col-lg-* para definir a altura e largura do formulário. Abaixo está um exemplo que ilustra isso:

Exemplo online

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Exemplo Bootstrap　-　Tamanho do controle de formulário/title>
	<link rel="stylesheet" href="//cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="//cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="//cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<form role="form">
	<div class="form-group">
		<input class="form-control input-lg" type="text" placeholder=".input-lg">
	</div>
	<div class="form-group">
		<input class="form-control" type="text" placeholder="Entrada padrão">
	</div>
	<div class="form-group">
		<input class="form-control input-sm" type="text" placeholder=".input-sm">
	</div>
	<div class="form-group">
	</div>
	<div class="form-group">
		<select class="form-control input-lg">
			<option value="">.input-lg</option>
		</select>
	</div>
	<div class="form-group">
		<select class="form-control">
			<option value="">Selecione por padrão</option>
		</select>
	</div>
	<div class="form-group">
		<select class="form-control input-sm">
			<option value="">.input-sm</option>
		</select>
	</div>
	<div class="row">
		<div class="col-lg-2">
			<input type="text" class="form-control" placeholder=".col-lg-2">
		</div>
		<div class="col-lg-3">
			<input type="text" class="form-control" placeholder=".col-lg-3">
		</div>
		<div class="col-lg-4">
			<input type="text" class="form-control" placeholder=".col-lg-4">
		</div>
	</div>
</form>
</body>
</html>
Teste e veja ‹/›

Os resultados estão conforme mostrado a seguir:

Texto de ajuda do formulário

Os controles de formulário Bootstrap podem ter um texto de ajuda de bloco no campo de entrada input. Para adicionar um bloco de conteúdo que ocupe toda a largura, use .help-blockAbaixo está um exemplo que ilustra isso:

Exemplo online

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Exemplo Bootstrap　-　Texto de ajuda do formulário</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<form role="form">
	<span>Ajuda de texto exemplo</span>
	<input class="form-control" type="text" placeholder="">
	<span class="help-block">Um bloco de texto de ajuda longo, que ultrapassa uma linha,
		Precisa estender para a próxima linha. O texto de ajuda deste exemplo tem duas linhas.</span>
</form>
</body>
</html>
Teste e veja ‹/›

Os resultados estão conforme mostrado a seguir:

Botões BootstrapTabelas Bootstrap