mirrors / creativetimofficial--ui

项目文件夹

creativetimofficial--ui
文件
gh-pages
T

1423 行
94 KiB
HTML
原始文件 永久链接 Blame 文件历史

<!--
=========================================================
Material Dashboard - v2.1.2
=========================================================
Product Page: https://www.creative-tim.com/product/material-dashboard
Copyright 2020 Creative Tim (https://www.creative-tim.com)
Coded by Creative Tim
=========================================================
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="apple-touch-icon" sizes="76x76" href="../../../assets-old/img/apple-icon.png">
<link rel="icon" type="image/png" href="../../../assets-old/img/favicon.png">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>
Material Dashboard by Creative Tim
</title>
<meta content='width=device-width, initial-scale=1.0, shrink-to-fit=no' name='viewport' />
<!-- Extra details for Live View on GitHub Pages -->
<!-- Canonical SEO -->
<link rel="canonical" href="https://www.creative-tim.com/product/material-dashboard" />
<!-- Social tags -->
<meta name="keywords" content="creative tim, html dashboard, html css dashboard, web dashboard, bootstrap 4 dashboard, bootstrap 4, css3 dashboard, bootstrap 4 admin, material dashboard bootstrap 4 dashboard, frontend, responsive bootstrap 4 dashboard, free dashboard, free admin dashboard, free bootstrap 4 admin dashboard">
<meta name="description" content="Material Dashboard is a Free Material Bootstrap Admin with a fresh, new design inspired by Google's Material Design.">
<!-- Schema.org markup for Google+ -->
<meta itemprop="name" content="Material Dashboard by Creative Tim">
<meta itemprop="description" content="Material Dashboard is a Free Material Bootstrap Admin with a fresh, new design inspired by Google's Material Design.">
<meta itemprop="image" content="https://s3.amazonaws.com/creativetim_bucket/products/50/opt_md_thumbnail.jpg">
<!-- Twitter Card data -->
<meta name="twitter:card" content="product">
<meta name="twitter:site" content="@creativetim">
<meta name="twitter:title" content="Material Dashboard by Creative Tim">
<meta name="twitter:description" content="Material Dashboard is a Free Material Bootstrap Admin with a fresh, new design inspired by Google's Material Design.">
<meta name="twitter:creator" content="@creativetim">
<meta name="twitter:image" content="https://s3.amazonaws.com/creativetim_bucket/products/50/opt_md_thumbnail.jpg">
<!-- Open Graph data -->
<meta property="fb:app_id" content="655968634437471">
<meta property="og:title" content="Material Dashboard by Creative Tim" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://demos.creative-tim.com/material-dashboard-bs4/examples/dashboard.html" />
<meta property="og:image" content="https://s3.amazonaws.com/creativetim_bucket/products/50/opt_md_thumbnail.jpg" />
<meta property="og:description" content="Material Dashboard is a Free Material Bootstrap Admin with a fresh, new design inspired by Google's Material Design." />
<meta property="og:site_name" content="Creative Tim" />
<!-- Fonts and icons -->
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css">
<!-- CSS Files -->
<link href="../../../assets-old/css/material-dashboard.min.css?v=2.1.2" rel="stylesheet" />
<!-- Documentation extras -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css" />
<link rel="stylesheet" href="../../../assets-old/demo/docs.min.css">
<style>
.navbar-absolute-logo {
padding-left: 45px;
}
.navbar-absolute-logo img {
position: absolute;
left: 15px;
margin-top: -6px;
}
body {
background: white;
}
</style>
<!-- CSS Just for demo purpose, don't include it in your project -->
<link href="../../../assets-old/demo/demo.css" rel="stylesheet" />
<!-- Google Tag Manager -->
<script>
(function(w, d, s, l, i) {
w[l] = w[l] || [];
w[l].push({
'gtm.start': new Date().getTime(),
event: 'gtm.js'
});
var f = d.getElementsByTagName(s)[0],
j = d.createElement(s),
dl = l != 'dataLayer' ? '&l=' + l : '';
j.async = true;
j.src =
'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
f.parentNode.insertBefore(j, f);
})(window, document, 'script', 'dataLayer', 'GTM-NKDMSK6');
</script>
<!-- End Google Tag Manager -->
</head>
<body class="bd-docs" data-spy="scroll" data-target=".bd-sidenav-active">
<!-- Extra details for Live View on GitHub Pages -->
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-NKDMSK6" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<a id="skippy" class="sr-only sr-only-focusable" href="#content">
<div class="container">
<span class="skiplink-text">Skip to main content</span>
</div>
</a>
<header class="navbar navbar-expand navbar-dark bg-primary flex-column flex-md-row bd-navbar">
<a class="navbar-brand mr-0 mr-md-2 navbar-absolute-logo" href="https://www.creative-tim.com/product/material-dashboard" target="_blank">
Material Dashboard
</a>
<ul class="navbar-nav flex-row d-none d-md-flex">
<li class="nav-item dropdown">
<a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
v2.1.2
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions">
<a class="dropdown-item" href="../../../docs/2.1/getting-started/introduction.html">BS4 - 2.1.2</a>
<a class="dropdown-item" href="../../../docs/2.0/getting-started/introduction.html">BS4 - 2.1.0</a>
<a class="dropdown-item" href="https://demos.creative-tim.com/bs3/material-dashboard/documentation/tutorial-components.html" target="_blank">BS3 - 1.0</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link p-2" href="https://github.com/creativetimofficial/material-dashboard" target="_blank" rel="noopener" aria-label="GitHub">
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false">
<title>GitHub</title>
<path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd" />
</svg>
</a>
</li>
<li class="nav-item">
<a class="nav-link p-2" href="https://twitter.com/CreativeTim" target="_blank" rel="noopener" aria-label="Twitter">
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 416.32" focusable="false">
<title>Twitter</title>
<path d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92" fill="currentColor" />
</svg>
</a>
</li>
</ul>
<div class="navbar-nav-scroll ml-md-auto ">
<ul class="navbar-nav bd-navbar-nav flex-row">
<li class="nav-item">
<a class="nav-link" href="https://www.creative-tim.com/product/material-dashboard-pro"> <i class="material-icons">card_membership</i> Upgrade to PRO </a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://demos.creative-tim.com/material-dashboard-bs4/examples/dashboard.html"><i class="material-icons">view_carousel</i> Live Preview</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://github.com/creativetimofficial/material-dashboard" target="_blank" rel="noopener"><i class="material-icons">star</i> Help with a star</a>
</li>
<li class="nav-item dropdown">
<a class="nav-item nav-link dropdown-toggle mr-md-2" href="javascript:;" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="material-icons">translate </i>
ENGLISH
<div class="ripple-container"></div></a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions">
<a class="dropdown-item active dropdown-flag-holder" href="https://demos.creative-tim.com/material-dashboard/docs/2.1/getting-started/introduction.html">
ENGLISH
</a>
<a class="dropdown-item dropdown-flag-holder" href="https://demos.creative-tim.com/material-dashboard/zh/docs/2.1/getting-started/introduction.html">中文
</a>
<a class="dropdown-item dropdown-flag-holder" href="https://demos.creative-tim.com/material-dashboard/ja/docs/2.1/getting-started/introduction.html">日本人
</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link"></a>
</li>
<li class="nav-item">
<a class="nav-link"></a>
</li>
</ul>
</div>
<a href="https://github.com/creativetimofficial/material-dashboard" class="github-corner" aria-label="View source on Github"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#fff; color:#9c27b0; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true">
<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
<path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
<path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path>
</svg></a>
<style>
.github-corner:hover .octo-arm {
animation: octocat-wave 560ms ease-in-out
}
@keyframes octocat-wave {
0%,
100% {
transform: rotate(0)
}
20%,
60% {
transform: rotate(-25deg)
}
40%,
80% {
transform: rotate(10deg)
}
}
@media (max-width:500px) {
.github-corner:hover .octo-arm {
animation: none
}
.github-corner .octo-arm {
animation: octocat-wave 560ms ease-in-out
}
}
</style>
</header>
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav">
<div class="bd-toc-item active">
<a class="bd-toc-link" href="#docs">
Getting started
</a>
<ul class="nav bd-sidenav">
<li class="">
<a href="../../../docs/2.1/getting-started/introduction.html">
Introduction
</a>
</li>
<li class="">
<a href="../../../docs/2.1/getting-started/license.html">
License
</a>
</li>
<li class="">
<a href="../../../docs/2.1/getting-started/file-structure.html">
File Structure
</a>
</li>
<li class="">
<a href="../../../docs/2.1/getting-started/build-tools.html">
Build Tools
</a>
</li>
</ul>
</div>
<div class="bd-toc-item active">
<a class="bd-toc-link" href="#docs">
Components
</a>
<ul class="nav bd-sidenav">
<li class="">
<a href="../../../docs/2.1/components/alerts.html">
Alerts
</a>
</li>
<li class="">
<a href="../../../docs/2.1/components/badge.html">
Badge
<span class="badge badge-primary">Pro</span>
</a>
</li>
<li class="">
<a href="../../../docs/2.1/components/breadcrumb.html">
Breadcrumb
<span class="badge badge-primary">Pro</span>
</a>
</li>
<li class="">
<a href="../../../docs/2.1/components/buttons.html">
Buttons
</a>
</li>
<li class="">
<a href="../../../docs/2.1/components/card.html">
Card
</a>
</li>
<li class="">
<a href="../../../docs/2.1/components/carousel.html">
Carousel
<span class="badge badge-primary">Pro</span>
</a>
</li>
<li class="">
<a href="../../../docs/2.1/components/collapse.html">
Collapse
<span class="badge badge-primary">Pro</span>
</a>
</li>
<li class="">
<a href="../../../docs/2.1/components/dropdowns.html">
Dropdowns
</a>
</li>
<li class="active bd-sidenav-active">
<a href="../../../docs/2.1/components/forms.html">
Forms
</a>
</li>
<li class="">
<a href="../../../docs/2.1/components/google-maps.html">
Google Maps
</a>
</li>
<li class="">
<a href="../../../docs/2.1/components/info-areas.html">
Info Areas
<span class="badge badge-primary">Pro</span>
</a>
</li>
<li class="">
<a href="../../../docs/2.1/components/material-icons.html">
Material Icons
</a>
</li>
<li class="">
<a href="../../../docs/2.1/components/modal.html">
Modal
</a>
</li>
<li class="">
<a href="../../../docs/2.1/components/navs.html">
Navs
</a>
</li>
<li class="">
<a href="../../../docs/2.1/components/navbar.html">
Navbar
</a>
</li>
<li class="">
<a href="../../../docs/2.1/components/pagination.html">
Pagination
<span class="badge badge-primary">Pro</span>
</a>
</li>
<li class="">
<a href="../../../docs/2.1/components/parallax.html">
Parallax
<span class="badge badge-primary">Pro</span>
</a>
</li>
<li class="">
<a href="../../../docs/2.1/components/popovers.html">
Popovers
<span class="badge badge-primary">Pro</span>
</a>
</li>
<li class="">
<a href="../../../docs/2.1/components/progress.html">
Progress
</a>
</li>
<li class="">
<a href="../../../docs/2.1/components/tables.html">
Tables
</a>
</li>
<li class="">
<a href="../../../docs/2.1/components/tooltips.html">
Tooltips
<span class="badge badge-primary">Pro</span>
</a>
</li>
<li class="">
<a href="../../../docs/2.1/components/typography.html">
Typography
</a>
</li>
</ul>
</div>
<div class="bd-toc-item active">
<a class="bd-toc-link" href="#docs">
Plugins
</a>
<ul class="nav bd-sidenav">
<li class="">
<a href="../../../docs/2.1/plugins/bootstrap-switch.html">
Bootstrap Switch
<span class="badge badge-primary">Pro</span>
</a>
</li>
<li class="">
<a href="../../../docs/2.1/plugins/datetimepicker.html">
DateTimePicker
<span class="badge badge-primary">Pro</span>
</a>
</li>
<li class="">
<a href="../../../docs/2.1/plugins/fileupload-jasny.html">
FileUpload Jasny
<span class="badge badge-primary">Pro</span>
</a>
</li>
<li class="">
<a href="../../../docs/2.1/plugins/select-bootstrap.html">
Select Bootstrap
<span class="badge badge-primary">Pro</span>
</a>
</li>
<li class="">
<a href="../../../docs/2.1/plugins/sweet-alert-2.html">
Sweet Alert 2
<span class="badge badge-primary">Pro</span>
</a>
</li>
<li class="">
<a href="../../../docs/2.1/plugins/sliders.html">
Sliders
</a>
</li>
<li class="">
<a href="../../../docs/2.1/plugins/perfect-scrollbar.html">
Perfect Scrollbar
</a>
</li>
</ul>
</div>
</nav>
</div>
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#overview">Overview</a></li>
<li class="toc-entry toc-h2"><a href="#form-controls">Form controls</a>
<ul>
<li class="toc-entry toc-h3"><a href="#readonly">Readonly</a></li>
</ul>
</li>
<li class="toc-entry toc-h2"><a href="#examples">Examples</a></li>
<li class="toc-entry toc-h2"><a href="#checkboxes-and-radios">Checkboxes and radios</a>
<ul>
<li class="toc-entry toc-h3"><a href="#default-stacked">Default (stacked)</a></li>
<li class="toc-entry toc-h3"><a href="#inline">Inline</a></li>
</ul>
</li>
<li class="toc-entry toc-h2"><a href="#layout">Layout</a>
<ul>
<li class="toc-entry toc-h3"><a href="#form-grid">Form grid</a>
<ul>
<li class="toc-entry toc-h4"><a href="#form-row">Form row</a></li>
</ul>
</li>
</ul>
</li>
<li class="toc-entry toc-h2"><a href="#disabled-forms">Disabled forms</a>
<ul>
<ul>
<li class="toc-entry toc-h4"><a href="#caveat-with-anchors">Caveat with anchors</a></li>
<li class="toc-entry toc-h4"><a href="#cross-browser-compatibility">Cross-browser compatibility</a></li>
</ul>
<li class="toc-entry toc-h3"><a href="#file-browser">File browser</a></li>
</ul>
</li>
</ul>
</div>
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Forms
</h1>
<p class="bd-lead">Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.</p>
<h2 id="overview">Overview</h2>
<p>Be sure to use an appropriate <code class="highlighter-rouge">type</code> attribute on all inputs (e.g., <code class="highlighter-rouge">email</code> for email address or <code class="highlighter-rouge">number</code> for numerical information) to take advantage of newer input controls like email verification, number selection, and more.</p>
<p>Here’s a quick example to demonstrate Bootstrap’s form styles. Keep reading for documentation on required classes, form layout, and more.</p>
<div class="bd-example" data-example-id="">
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email" />
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password" />
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" value="" />
Option one is this
<span class="form-check-sign">
<span class="check"></span>
</span>
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;form&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">&gt;</span>
<span class="nt">&lt;label</span> <span class="na">for=</span><span class="s">"exampleInputEmail1"</span><span class="nt">&gt;</span>Email address<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"email"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"exampleInputEmail1"</span> <span class="na">aria-describedby=</span><span class="s">"emailHelp"</span> <span class="na">placeholder=</span><span class="s">"Enter email"</span><span class="nt">&gt;</span>
<span class="nt">&lt;small</span> <span class="na">id=</span><span class="s">"emailHelp"</span> <span class="na">class=</span><span class="s">"form-text text-muted"</span><span class="nt">&gt;</span>We'll never share your email with anyone else.<span class="nt">&lt;/small&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">&gt;</span>
<span class="nt">&lt;label</span> <span class="na">for=</span><span class="s">"exampleInputPassword1"</span><span class="nt">&gt;</span>Password<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"password"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"exampleInputPassword1"</span> <span class="na">placeholder=</span><span class="s">"Password"</span><span class="nt">&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-check"</span><span class="nt">&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-check-label"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">class=</span><span class="s">"form-check-input"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">""</span><span class="nt">&gt;</span>
Option one is this
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-check-sign"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"check"</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"submit"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">&gt;</span>Submit<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;/form&gt;</span></code></pre>
</div>
<h2 id="form-controls">Form controls</h2>
<p>Textual form controls—like <code class="highlighter-rouge">&lt;input&gt;</code>s, <code class="highlighter-rouge">&lt;select&gt;</code>s, and <code class="highlighter-rouge">&lt;textarea&gt;</code>s—are styled with the <code class="highlighter-rouge">.form-control</code> class. Included are styles for general appearance, focus state, sizing, and more.</p>
<p>Be sure to explore our <a href="#custom-forms">custom forms</a> to further style <code class="highlighter-rouge">&lt;select&gt;</code>s.</p>
<div class="bd-example" data-example-id="">
<form>
<div class="form-group">
<label for="exampleFormControlInput1">Email address</label>
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com" />
</div>
<div class="form-group">
<label for="exampleFormControlSelect1">Example select</label>
<select class="form-control selectpicker" data-style="btn btn-link" id="exampleFormControlSelect1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="form-group">
<label for="exampleFormControlSelect2">Example multiple select</label>
<select multiple="" class="form-control selectpicker" data-style="btn btn-link" id="exampleFormControlSelect2">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="form-group">
<label for="exampleFormControlTextarea1">Example textarea</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
</form>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;form&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">&gt;</span>
<span class="nt">&lt;label</span> <span class="na">for=</span><span class="s">"exampleFormControlInput1"</span><span class="nt">&gt;</span>Email address<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"email"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"exampleFormControlInput1"</span> <span class="na">placeholder=</span><span class="s">"name@example.com"</span><span class="nt">&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">&gt;</span>
<span class="nt">&lt;label</span> <span class="na">for=</span><span class="s">"exampleFormControlSelect1"</span><span class="nt">&gt;</span>Example select<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;select</span> <span class="na">class=</span><span class="s">"form-control selectpicker"</span> <span class="na">data-style=</span><span class="s">"btn btn-link"</span> <span class="na">id=</span><span class="s">"exampleFormControlSelect1"</span><span class="nt">&gt;</span>
<span class="nt">&lt;option&gt;</span>1<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option&gt;</span>2<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option&gt;</span>3<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option&gt;</span>4<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option&gt;</span>5<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;/select&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">&gt;</span>
<span class="nt">&lt;label</span> <span class="na">for=</span><span class="s">"exampleFormControlSelect2"</span><span class="nt">&gt;</span>Example multiple select<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;select</span> <span class="na">multiple</span> <span class="na">class=</span><span class="s">"form-control selectpicker"</span> <span class="na">data-style=</span><span class="s">"btn btn-link"</span> <span class="na">id=</span><span class="s">"exampleFormControlSelect2"</span><span class="nt">&gt;</span>
<span class="nt">&lt;option&gt;</span>1<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option&gt;</span>2<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option&gt;</span>3<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option&gt;</span>4<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option&gt;</span>5<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;/select&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">&gt;</span>
<span class="nt">&lt;label</span> <span class="na">for=</span><span class="s">"exampleFormControlTextarea1"</span><span class="nt">&gt;</span>Example textarea<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;textarea</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"exampleFormControlTextarea1"</span> <span class="na">rows=</span><span class="s">"3"</span><span class="nt">&gt;&lt;/textarea&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/form&gt;</span></code></pre>
</div>
<p>For file inputs, swap the <code class="highlighter-rouge">.form-control</code> for <code class="highlighter-rouge">.form-file-upload</code> and <code class="highlighter-rouge">.form-file-simple</code> or <code class="highlighter-rouge">.form-file-multiple</code>.</p>
<div class="bd-example" data-example-id="">
<div class="form-group form-file-upload form-file-simple">
<input type="text" class="form-control inputFileVisible" placeholder="Simple chooser..." />
<input type="file" class="inputFileHidden" />
</div>
<div class="form-group form-file-upload form-file-multiple">
<input type="file" multiple="" class="inputFileHidden" />
<div class="input-group">
<input type="text" class="form-control inputFileVisible" placeholder="Single File" />
<span class="input-group-btn">
<button type="button" class="btn btn-fab btn-round btn-primary">
<i class="material-icons">attach_file</i>
</button>
</span>
</div>
</div>
<div class="form-group form-file-upload form-file-multiple">
<input type="file" multiple="" class="inputFileHidden" />
<div class="input-group">
<input type="text" class="form-control inputFileVisible" placeholder="Multiple Files" multiple="" />
<span class="input-group-btn">
<button type="button" class="btn btn-fab btn-round btn-info">
<i class="material-icons">layers</i>
</button>
</span>
</div>
</div>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-group form-file-upload form-file-simple"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control inputFileVisible"</span> <span class="na">placeholder=</span><span class="s">"Simple chooser..."</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"file"</span> <span class="na">class=</span><span class="s">"inputFileHidden"</span><span class="nt">&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-group form-file-upload form-file-multiple"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"file"</span> <span class="na">multiple=</span><span class="s">""</span> <span class="na">class=</span><span class="s">"inputFileHidden"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"input-group"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control inputFileVisible"</span> <span class="na">placeholder=</span><span class="s">"Single File"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"input-group-btn"</span><span class="nt">&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-fab btn-round btn-primary"</span><span class="nt">&gt;</span>
<span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">"material-icons"</span><span class="nt">&gt;</span>attach_file<span class="nt">&lt;/i&gt;</span>
<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-group form-file-upload form-file-multiple"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"file"</span> <span class="na">multiple=</span><span class="s">""</span> <span class="na">class=</span><span class="s">"inputFileHidden"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"input-group"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control inputFileVisible"</span> <span class="na">placeholder=</span><span class="s">"Multiple Files"</span> <span class="na">multiple</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"input-group-btn"</span><span class="nt">&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-fab btn-round btn-info"</span><span class="nt">&gt;</span>
<span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">"material-icons"</span><span class="nt">&gt;</span>layers<span class="nt">&lt;/i&gt;</span>
<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
</div>
<h3 id="readonly">Readonly</h3>
<p>Add the <code class="highlighter-rouge">readonly</code> boolean attribute on an input to prevent modification of the input’s value. Read-only inputs appear lighter (just like disabled inputs), but retain the standard cursor.</p>
<div class="bd-example" data-example-id="">
<input class="form-control" type="text" placeholder="Readonly input here…" readonly="" />
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;input</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">placeholder=</span><span class="s">"Readonly input here…"</span> <span class="na">readonly</span><span class="nt">&gt;</span></code></pre>
</div>
<h2 id="examples">Examples</h2>
<div class="bd-example" data-example-id="">
<div class="form-group label-floating has-success">
<label class="control-label">Success input</label>
<input type="text" value="Success" class="form-control" />
<span class="form-control-feedback">
<i class="material-icons">done</i>
</span>
</div>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-group label-floating has-success"</span><span class="nt">&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"control-label"</span><span class="nt">&gt;</span>Success input<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">value=</span><span class="s">"Success"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="nt">/&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-control-feedback"</span><span class="nt">&gt;</span>
<span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">"material-icons"</span><span class="nt">&gt;</span>done<span class="nt">&lt;/i&gt;</span>
<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
</div>
<div class="bd-example" data-example-id="">
<div class="form-group label-floating has-danger">
<label class="control-label">Error input</label>
<input type="email" value="Error Input" class="form-control" />
<span class="material-icons form-control-feedback">clear</span>
</div>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-group label-floating has-danger"</span><span class="nt">&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"control-label"</span><span class="nt">&gt;</span>Error input<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"email"</span> <span class="na">value=</span><span class="s">"Error Input"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="nt">/&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"material-icons form-control-feedback"</span><span class="nt">&gt;</span>clear<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
</div>
<div class="bd-example" data-example-id="">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="material-icons">group</i>
</span>
</div>
<input type="text" class="form-control" placeholder="With Material Icons" />
</div>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"input-group"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"input-group-prepend"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"input-group-text"</span><span class="nt">&gt;</span>
<span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">"material-icons"</span><span class="nt">&gt;</span>group<span class="nt">&lt;/i&gt;</span>
<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">placeholder=</span><span class="s">"With Material Icons"</span><span class="nt">&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
</div>
<div class="bd-example" data-example-id="">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="fa fa-group"></i>
</span>
</div>
<input type="text" class="form-control" placeholder="With Font Awesome Icons" />
</div>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"input-group"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"input-group-prepend"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"input-group-text"</span><span class="nt">&gt;</span>
<span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">"fa fa-group"</span><span class="nt">&gt;&lt;/i&gt;</span>
<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">placeholder=</span><span class="s">"With Font Awesome Icons"</span><span class="nt">&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
</div>
<h2 id="checkboxes-and-radios">Checkboxes and radios</h2>
<p>Default checkboxes and radios are improved upon with the help of <code class="highlighter-rouge">.form-check</code>, <strong>a single class for both input types that improves the layout and behavior of their HTML elements</strong>. Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many.</p>
<p>Disabled checkboxes and radios are supported, but to provide a <code class="highlighter-rouge">not-allowed</code> cursor on hover of the parent <code class="highlighter-rouge">&lt;label&gt;</code>, you’ll need to add the <code class="highlighter-rouge">.disabled</code> class to the parent <code class="highlighter-rouge">.form-check</code>. The disabled class will also lighten the text color to help indicate the input’s state.</p>
<h3 id="default-stacked">Default (stacked)</h3>
<p>By default, any number of checkboxes and radios that are immediate sibling will be vertically stacked and appropriately spaced with <code class="highlighter-rouge">.form-check</code>.</p>
<div class="bd-example" data-example-id="">
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" value="" />
Option one is this and that&mdash;be sure to include why it's great
<span class="form-check-sign">
<span class="check"></span>
</span>
</label>
</div>
<div class="form-check disabled">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" value="" disabled="" />
Option two is disabled
<span class="form-check-sign">
<span class="check"></span>
</span>
</label>
</div>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-check"</span><span class="nt">&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-check-label"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">class=</span><span class="s">"form-check-input"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">""</span><span class="nt">&gt;</span>
Option one is this and that<span class="ni">&amp;mdash;</span>be sure to include why it's great
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-check-sign"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"check"</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-check disabled"</span><span class="nt">&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-check-label"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">class=</span><span class="s">"form-check-input"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">""</span> <span class="na">disabled</span><span class="nt">&gt;</span>
Option two is disabled
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-check-sign"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"check"</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
</div>
<div class="bd-example" data-example-id="">
<div class="form-check form-check-radio">
<label class="form-check-label">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" />
Radio is off
<span class="circle">
<span class="check"></span>
</span>
</label>
</div>
<div class="form-check form-check-radio">
<label class="form-check-label">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2" checked="" />
Radio is on
<span class="circle">
<span class="check"></span>
</span>
</label>
</div>
<div class="form-check form-check-radio disabled">
<label class="form-check-label">
<input class="form-check-input" type="radio" name="exampleRadios1" id="exampleRadios1" value="option1" disabled="" />
Disabled radio is off
<span class="circle">
<span class="check"></span>
</span>
</label>
</div>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-check form-check-radio"</span><span class="nt">&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-check-label"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">class=</span><span class="s">"form-check-input"</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"exampleRadios"</span> <span class="na">id=</span><span class="s">"exampleRadios1"</span> <span class="na">value=</span><span class="s">"option1"</span> <span class="nt">&gt;</span>
Radio is off
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"circle"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"check"</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-check form-check-radio"</span><span class="nt">&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-check-label"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">class=</span><span class="s">"form-check-input"</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"exampleRadios"</span> <span class="na">id=</span><span class="s">"exampleRadios2"</span> <span class="na">value=</span><span class="s">"option2"</span> <span class="na">checked</span><span class="nt">&gt;</span>
Radio is on
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"circle"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"check"</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-check form-check-radio disabled"</span><span class="nt">&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-check-label"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">class=</span><span class="s">"form-check-input"</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"exampleRadios1"</span> <span class="na">id=</span><span class="s">"exampleRadios1"</span> <span class="na">value=</span><span class="s">"option1"</span> <span class="na">disabled</span><span class="nt">&gt;</span>
Disabled radio is off
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"circle"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"check"</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
</div>
<h3 id="inline">Inline</h3>
<p>Group checkboxes or radios on the same horizontal row by adding <code class="highlighter-rouge">.form-check-inline</code> to any <code class="highlighter-rouge">.form-check</code>.</p>
<div class="bd-example" data-example-id="">
<div class="form-check form-check-inline">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1" /> 1
<span class="form-check-sign">
<span class="check"></span>
</span>
</label>
</div>
<div class="form-check form-check-inline">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2" /> 2
<span class="form-check-sign">
<span class="check"></span>
</span>
</label>
</div>
<div class="form-check form-check-inline disabled">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled="" /> 3
<span class="form-check-sign">
<span class="check"></span>
</span>
</label>
</div>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-check form-check-inline"</span><span class="nt">&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-check-label"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">class=</span><span class="s">"form-check-input"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">id=</span><span class="s">"inlineCheckbox1"</span> <span class="na">value=</span><span class="s">"option1"</span><span class="nt">&gt;</span> 1
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-check-sign"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"check"</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-check form-check-inline"</span><span class="nt">&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-check-label"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">class=</span><span class="s">"form-check-input"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">id=</span><span class="s">"inlineCheckbox2"</span> <span class="na">value=</span><span class="s">"option2"</span><span class="nt">&gt;</span> 2
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-check-sign"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"check"</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-check form-check-inline disabled"</span><span class="nt">&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-check-label"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">class=</span><span class="s">"form-check-input"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">id=</span><span class="s">"inlineCheckbox3"</span> <span class="na">value=</span><span class="s">"option3"</span> <span class="na">disabled</span><span class="nt">&gt;</span> 3
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-check-sign"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"check"</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
</div>
<div class="bd-example" data-example-id="">
<div class="form-check form-check-radio form-check-inline">
<label class="form-check-label">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1" /> 1
<span class="circle">
<span class="check"></span>
</span>
</label>
</div>
<div class="form-check form-check-radio form-check-inline">
<label class="form-check-label">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2" /> 2
<span class="circle">
<span class="check"></span>
</span>
</label>
</div>
<div class="form-check form-check-radio form-check-inline disabled">
<label class="form-check-label">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled="" /> 3
<span class="circle">
<span class="check"></span>
</span>
</label>
</div>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-check form-check-radio form-check-inline"</span><span class="nt">&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-check-label"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">class=</span><span class="s">"form-check-input"</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"inlineRadioOptions"</span> <span class="na">id=</span><span class="s">"inlineRadio1"</span> <span class="na">value=</span><span class="s">"option1"</span><span class="nt">&gt;</span> 1
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"circle"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"check"</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-check form-check-radio form-check-inline"</span><span class="nt">&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-check-label"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">class=</span><span class="s">"form-check-input"</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"inlineRadioOptions"</span> <span class="na">id=</span><span class="s">"inlineRadio2"</span> <span class="na">value=</span><span class="s">"option2"</span><span class="nt">&gt;</span> 2
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"circle"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"check"</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-check form-check-radio form-check-inline disabled"</span><span class="nt">&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-check-label"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">class=</span><span class="s">"form-check-input"</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"inlineRadioOptions"</span> <span class="na">id=</span><span class="s">"inlineRadio3"</span> <span class="na">value=</span><span class="s">"option3"</span> <span class="na">disabled</span><span class="nt">&gt;</span> 3
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"circle"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"check"</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
</div>
<h2 id="layout">Layout</h2>
<p>Since Bootstrap applies <code class="highlighter-rouge">display: block</code> and <code class="highlighter-rouge">width: 100%</code> to almost all our form controls, forms will by default stack vertically. Additional classes can be used to vary this layout on a per-form basis.</p>
<h3 id="form-grid">Form grid</h3>
<p>More complex forms can be built using our grid classes. Use these for form layouts that require multiple columns, varied widths, and additional alignment options.</p>
<div class="bd-example" data-example-id="">
<form>
<div class="row">
<div class="col">
<input type="text" class="form-control" placeholder="First name" />
</div>
<div class="col">
<input type="text" class="form-control" placeholder="Last name" />
</div>
</div>
</form>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;form&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">placeholder=</span><span class="s">"First name"</span><span class="nt">&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">placeholder=</span><span class="s">"Last name"</span><span class="nt">&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/form&gt;</span></code></pre>
</div>
<h4 id="form-row">Form row</h4>
<p>You may also swap <code class="highlighter-rouge">.row</code> for <code class="highlighter-rouge">.form-row</code>, a variation of our standard grid row that overrides the default column gutters for tighter and more compact layouts.</p>
<div class="bd-example" data-example-id="">
<form>
<div class="form-row">
<div class="col">
<input type="text" class="form-control" placeholder="First name" />
</div>
<div class="col">
<input type="text" class="form-control" placeholder="Last name" />
</div>
</div>
</form>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;form&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-row"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">placeholder=</span><span class="s">"First name"</span><span class="nt">&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">placeholder=</span><span class="s">"Last name"</span><span class="nt">&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/form&gt;</span></code></pre>
</div>
<p>More complex layouts can also be created with the grid system.</p>
<div class="bd-example" data-example-id="">
<form>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputEmail4">Email</label>
<input type="email" class="form-control" id="inputEmail4" placeholder="Email" />
</div>
<div class="form-group col-md-6">
<label for="inputPassword4">Password</label>
<input type="password" class="form-control" id="inputPassword4" placeholder="Password" />
</div>
</div>
<div class="form-group">
<label for="inputAddress">Address</label>
<input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St" />
</div>
<div class="form-group">
<label for="inputAddress2">Address 2</label>
<input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor" />
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputCity">City</label>
<input type="text" class="form-control" id="inputCity" />
</div>
<div class="form-group col-md-3">
<label for="inputState">State</label>
<select id="inputState" class="form-control">
<option selected="">Choose...</option>
<option>...</option>
</select>
</div>
<div class="form-group col-md-2 ml-auto">
<label for="inputZip">Zip</label>
<input type="text" class="form-control" id="inputZip" />
</div>
</div>
<div class="form-group">
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" value="" />
Check me out
<span class="form-check-sign">
<span class="check"></span>
</span>
</label>
</div>
</div>
<button type="submit" class="btn btn-primary">Sign in</button>
</form>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;form&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-row"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-group col-md-6"</span><span class="nt">&gt;</span>
<span class="nt">&lt;label</span> <span class="na">for=</span><span class="s">"inputEmail4"</span><span class="nt">&gt;</span>Email<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"email"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"inputEmail4"</span> <span class="na">placeholder=</span><span class="s">"Email"</span><span class="nt">&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-group col-md-6"</span><span class="nt">&gt;</span>
<span class="nt">&lt;label</span> <span class="na">for=</span><span class="s">"inputPassword4"</span><span class="nt">&gt;</span>Password<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"password"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"inputPassword4"</span> <span class="na">placeholder=</span><span class="s">"Password"</span><span class="nt">&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">&gt;</span>
<span class="nt">&lt;label</span> <span class="na">for=</span><span class="s">"inputAddress"</span><span class="nt">&gt;</span>Address<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"inputAddress"</span> <span class="na">placeholder=</span><span class="s">"1234 Main St"</span><span class="nt">&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">&gt;</span>
<span class="nt">&lt;label</span> <span class="na">for=</span><span class="s">"inputAddress2"</span><span class="nt">&gt;</span>Address 2<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"inputAddress2"</span> <span class="na">placeholder=</span><span class="s">"Apartment, studio, or floor"</span><span class="nt">&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-row"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-group col-md-6"</span><span class="nt">&gt;</span>
<span class="nt">&lt;label</span> <span class="na">for=</span><span class="s">"inputCity"</span><span class="nt">&gt;</span>City<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"inputCity"</span><span class="nt">&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-group col-md-3"</span><span class="nt">&gt;</span>
<span class="nt">&lt;label</span> <span class="na">for=</span><span class="s">"inputState"</span><span class="nt">&gt;</span>State<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;select</span> <span class="na">id=</span><span class="s">"inputState"</span> <span class="na">class=</span><span class="s">"form-control"</span><span class="nt">&gt;</span>
<span class="nt">&lt;option</span> <span class="na">selected</span><span class="nt">&gt;</span>Choose...<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option&gt;</span>...<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;/select&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-group col-md-2 ml-auto"</span><span class="nt">&gt;</span>
<span class="nt">&lt;label</span> <span class="na">for=</span><span class="s">"inputZip"</span><span class="nt">&gt;</span>Zip<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"inputZip"</span><span class="nt">&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-check"</span><span class="nt">&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-check-label"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">class=</span><span class="s">"form-check-input"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">""</span><span class="nt">&gt;</span>
Check me out
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-check-sign"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"check"</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"submit"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">&gt;</span>Sign in<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;/form&gt;</span></code></pre>
</div>
<h2 id="disabled-forms">Disabled forms</h2>
<p>Add the <code class="highlighter-rouge">disabled</code> boolean attribute on an input to prevent user interactions and make it appear lighter.</p>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;input</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"disabledInput"</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">placeholder=</span><span class="s">"Disabled input here..."</span> <span class="na">disabled</span><span class="nt">&gt;</span></code></pre>
</figure>
<p>Add the <code class="highlighter-rouge">disabled</code> attribute to a <code class="highlighter-rouge">&lt;fieldset&gt;</code> to disable all the controls within.</p>
<div class="bd-example" data-example-id="">
<form>
<fieldset disabled="">
<div class="form-group">
<label for="disabledTextInput">Disabled input</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input" />
</div>
<div class="form-group">
<label for="disabledSelect">Disabled select menu</label>
<select id="disabledSelect" class="form-control">
<option></option>
</select>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" value="" />
Can't check me out
<span class="form-check-sign">
<span class="check"></span>
</span>
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</fieldset>
</form>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;form&gt;</span>
<span class="nt">&lt;fieldset</span> <span class="na">disabled</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">&gt;</span>
<span class="nt">&lt;label</span> <span class="na">for=</span><span class="s">"disabledTextInput"</span><span class="nt">&gt;</span>Disabled input<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">id=</span><span class="s">"disabledTextInput"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">placeholder=</span><span class="s">"Disabled input"</span><span class="nt">&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">&gt;</span>
<span class="nt">&lt;label</span> <span class="na">for=</span><span class="s">"disabledSelect"</span><span class="nt">&gt;</span>Disabled select menu<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;select</span> <span class="na">id=</span><span class="s">"disabledSelect"</span> <span class="na">class=</span><span class="s">"form-control"</span><span class="nt">&gt;</span>
<span class="nt">&lt;option&gt;&lt;/option&gt;</span>
<span class="nt">&lt;/select&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-check"</span><span class="nt">&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-check-label"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">class=</span><span class="s">"form-check-input"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">""</span><span class="nt">&gt;</span>
Can't check me out
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-check-sign"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"check"</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"submit"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">&gt;</span>Submit<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;/fieldset&gt;</span>
<span class="nt">&lt;/form&gt;</span></code></pre>
</div>
<div class="bd-callout bd-callout-warning">
<h4 id="caveat-with-anchors">Caveat with anchors</h4>
<p>By default, browsers will treat all native form controls (<code class="highlighter-rouge">&lt;input&gt;</code>, <code class="highlighter-rouge">&lt;select&gt;</code> and <code class="highlighter-rouge">&lt;button&gt;</code> elements) inside a <code class="highlighter-rouge">&lt;fieldset disabled&gt;</code> as disabled, preventing both keyboard and mouse interactions on them. However, if your form also includes <code class="highlighter-rouge">&lt;a ... class="btn btn-*"&gt;</code> elements, these will only be given a style of <code class="highlighter-rouge">pointer-events: none</code>. As noted in the section about <a href="/material-dashboard/docs/2.1/components/buttons.html#disabled-state">disabled state for buttons</a> (and specifically in the sub-section for anchor elements), this CSS property is not yet standardized and isn’t fully supported in Opera 18 and below, or in Internet Explorer 10, and won’t prevent keyboard users from being able to focus or activate these links. So to be safe, use custom JavaScript to disable such links.</p>
</div>
<div class="bd-callout bd-callout-danger">
<h4 id="cross-browser-compatibility">Cross-browser compatibility</h4>
<p>While Bootstrap will apply these styles in all browsers, Internet Explorer 11 and below don’t fully support the <code class="highlighter-rouge">disabled</code> attribute on a <code class="highlighter-rouge">&lt;fieldset&gt;</code>. Use custom JavaScript to disable the fieldset in these browsers.</p>
</div>
<h3 id="file-browser">File browser</h3>
<div class="bd-example" data-example-id="">
<div class="fileinput fileinput-new text-center" data-provides="fileinput">
<div class="fileinput-new thumbnail img-raised">
<img src="http://style.anu.edu.au/_anu/4/images/placeholders/person_8x10.png" rel="nofollow" alt="..." />
</div>
<div class="fileinput-preview fileinput-exists thumbnail img-raised"></div>
<div>
<span class="btn btn-raised btn-round btn-default btn-file">
<span class="fileinput-new">Select image</span>
<span class="fileinput-exists">Change</span>
<input type="file" name="..." />
</span>
<a href="#pablo" class="btn btn-danger btn-round fileinput-exists" data-dismiss="fileinput"><i class="fa fa-times"></i> Remove</a>
</div>
</div>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"fileinput fileinput-new text-center"</span> <span class="na">data-provides=</span><span class="s">"fileinput"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"fileinput-new thumbnail img-raised"</span><span class="nt">&gt;</span>
<span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"http://style.anu.edu.au/_anu/4/images/placeholders/person_8x10.png"</span> <span class="na">rel=</span><span class="s">"nofollow"</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"fileinput-preview fileinput-exists thumbnail img-raised"</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;div&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"btn btn-raised btn-round btn-default btn-file"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"fileinput-new"</span><span class="nt">&gt;</span>Select image<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"fileinput-exists"</span><span class="nt">&gt;</span>Change<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"file"</span> <span class="na">name=</span><span class="s">"..."</span> <span class="nt">/&gt;</span>
<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#pablo"</span> <span class="na">class=</span><span class="s">"btn btn-danger btn-round fileinput-exists"</span> <span class="na">data-dismiss=</span><span class="s">"fileinput"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fa fa-times"</span><span class="nt">&gt;&lt;/i&gt;</span> Remove<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
</div>
<p>If you want to see more examples and properties please check the official <strong><a href="http://getbootstrap.com/docs/4.0/components/forms/" target="_blank" rel="nofollow">Bootstrap Documentation</a></strong>.</p>
</main>
</div>
</div>
<!-- Core JS Files -->
<script src="../../../assets-old/js/core/jquery.min.js"></script>
<script src="../../../assets-old/js/core/popper.min.js"></script>
<script src="../../../assets-old/js/core/bootstrap-material-design.min.js"></script>
<script src="../../../assets-old/js/plugins/perfect-scrollbar.jquery.min.js"></script>
<!-- Plugin for the momentJs -->
<script src="../../../assets-old/js/plugins/moment.min.js"></script>
<!-- Plugin for Sweet Alert -->
<script src="../../../assets-old/js/plugins/sweetalert2.js"></script>
<!-- Forms Validations Plugin -->
<script src="../../../assets-old/js/plugins/jquery.validate.min.js"></script>
<!-- Plugin for the Wizard, full documentation here: https://github.com/VinceG/twitter-bootstrap-wizard -->
<script src="../../../assets-old/js/plugins/jquery.bootstrap-wizard.js"></script>
<!-- Plugin for Select, full documentation here: http://silviomoreto.github.io/bootstrap-select -->
<script src="../../../assets-old/js/plugins/bootstrap-selectpicker.js"></script>
<!-- Plugin for the DateTimePicker, full documentation here: https://eonasdan.github.io/bootstrap-datetimepicker/ -->
<script src="../../../assets-old/js/plugins/bootstrap-datetimepicker.min.js"></script>
<!-- DataTables.net Plugin, full documentation here: https://datatables.net/ -->
<script src="../../../assets-old/js/plugins/jquery.dataTables.min.js"></script>
<!-- Plugin for Tags, full documentation here: https://github.com/bootstrap-tagsinput/bootstrap-tagsinputs -->
<script src="../../../assets-old/js/plugins/bootstrap-tagsinput.js"></script>
<!-- Plugin for Fileupload, full documentation here: http://www.jasny.net/bootstrap/javascript/#fileinput -->
<script src="../../../assets-old/js/plugins/jasny-bootstrap.min.js"></script>
<!-- Full Calendar Plugin, full documentation here: https://github.com/fullcalendar/fullcalendar -->
<script src="../../../assets-old/js/plugins/fullcalendar.min.js"></script>
<!-- Vector Map plugin, full documentation here: http://jvectormap.com/documentation/ -->
<script src="../../../assets-old/js/plugins/jquery-jvectormap.js"></script>
<!-- Plugin for the Sliders, full documentation here: http://refreshless.com/nouislider/ -->
<script src="../../../assets-old/js/plugins/nouislider.min.js"></script>
<!-- Include a polyfill for ES6 Promises (optional) for IE11, UC Browser and Android browser support SweetAlert -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/core.js"></script>
<!-- Library for adding dinamically elements -->
<script src="../../../assets-old/js/plugins/arrive.min.js"></script>
<!-- Google Maps Plugin -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB2Yno10-YTnLjjn_Vtk0V8cdcY5lC4plU"></script>
<!-- Place this tag in your head or just before your close body tag. -->
<script async defer src="https://buttons.github.io/buttons.js"></script>
<!-- Chartist JS -->
<script src="../../../assets-old/js/plugins/chartist.min.js"></script>
<!-- Notifications Plugin -->
<script src="../../../assets-old/js/plugins/bootstrap-notify.js"></script>
<!-- Control Center for Material Dashboard: parallax effects, scripts for the example pages etc -->
<script src="../../../assets-old/js/material-dashboard.min.js?v=2.1.2" type="text/javascript"></script>
<!-- Sharrre libray -->
<script src="../../../assets-old/demo/jquery.sharrre.js"></script>
<script>
$(document).ready(function() {
$('#facebook').sharrre({
share: {
facebook: true
},
enableHover: false,
enableTracking: false,
enableCounter: false,
click: function(api, options) {
api.simulateClick();
api.openPopup('facebook');
},
template: '<i class="fab fa-facebook-f"></i> Facebook',
url: 'https://demos.creative-tim.com/material-dashboard-bs4/examples/dashboard.html'
});
$('#google').sharrre({
share: {
googlePlus: true
},
enableCounter: false,
enableHover: false,
enableTracking: true,
click: function(api, options) {
api.simulateClick();
api.openPopup('googlePlus');
},
template: '<i class="fab fa-google-plus"></i> Google',
url: 'https://demos.creative-tim.com/material-dashboard-bs4/examples/dashboard.html'
});
$('#twitter').sharrre({
share: {
twitter: true
},
enableHover: false,
enableTracking: false,
enableCounter: false,
buttons: {
twitter: {
via: 'CreativeTim'
}
},
click: function(api, options) {
api.simulateClick();
api.openPopup('twitter');
},
template: '<i class="fab fa-twitter"></i> Twitter',
url: 'https://demos.creative-tim.com/material-dashboard-bs4/examples/dashboard.html'
});
// Facebook Pixel Code Don't Delete
! function(f, b, e, v, n, t, s) {
if (f.fbq) return;
n = f.fbq = function() {
n.callMethod ?
n.callMethod.apply(n, arguments) : n.queue.push(arguments)
};
if (!f._fbq) f._fbq = n;
n.push = n;
n.loaded = !0;
n.version = '2.0';
n.queue = [];
t = b.createElement(e);
t.async = !0;
t.src = v;
s = b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t, s)
}(window,
document, 'script', '//connect.facebook.net/en_US/fbevents.js');
try {
fbq('init', '111649226022273');
fbq('track', "PageView");
} catch (err) {
console.log('Facebook Track Error:', err);
}
});
</script>
<script>
// Facebook Pixel Code Don't Delete
! function(f, b, e, v, n, t, s) {
if (f.fbq) return;
n = f.fbq = function() {
n.callMethod ?
n.callMethod.apply(n, arguments) : n.queue.push(arguments)
};
if (!f._fbq) f._fbq = n;
n.push = n;
n.loaded = !0;
n.version = '2.0';
n.queue = [];
t = b.createElement(e);
t.async = !0;
t.src = v;
s = b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t, s)
}(window,
document, 'script', '//connect.facebook.net/en_US/fbevents.js');
try {
fbq('init', '111649226022273');
fbq('track', "PageView");
} catch (err) {
console.log('Facebook Track Error:', err);
}
</script>
<noscript>
<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=111649226022273&ev=PageView&noscript=1" />
</noscript>
<script>
$(document).ready(function() {
if ($('.card-header.card-chart').length != 0) {
md.initDashboardPageCharts();
}
if ($('#websiteViewsChart').length != 0) {
md.initDocumentationCharts();
}
if ($('.datetimepicker').length != 0) {
md.initFormExtendedDatetimepickers();
}
if ($('#fullCalendar').length != 0) {
md.initFullCalendar();
}
if ($('.slider').length != 0) {
md.initSliders();
}
// Activate the tooltips
$('[data-toggle="tooltip"]').tooltip();
// Activate Popovers
$('[data-toggle="popover"]').popover();
// Vector map
if ($('#worldMap').length != 0) {
md.initVectorMap();
}
if ($('#RegisterValidation').length != 0) {
setFormValidation('#RegisterValidation');
function setFormValidation(id) {
$(id).validate({
highlight: function(element) {
$(element).closest('.form-group').removeClass('has-success').addClass('has-danger');
$(element).closest('.form-check').removeClass('has-success').addClass('has-danger');
},
success: function(element) {
$(element).closest('.form-group').removeClass('has-danger').addClass('has-success');
$(element).closest('.form-check').removeClass('has-danger').addClass('has-success');
},
errorPlacement: function(error, element) {
$(element).closest('.form-group').append(error);
},
});
}
}
});
// FileInput
$('.form-file-simple .inputFileVisible').click(function() {
$(this).siblings('.inputFileHidden').trigger('click');
});
$('.form-file-simple .inputFileHidden').change(function() {
var filename = $(this).val().replace(/C:\\fakepath\\/i, '');
$(this).siblings('.inputFileVisible').val(filename);
});
$('.form-file-multiple .inputFileVisible, .form-file-multiple .input-group-btn').click(function() {
$(this).parent().parent().find('.inputFileHidden').trigger('click');
$(this).parent().parent().addClass('is-focused');
});
$('.form-file-multiple .inputFileHidden').change(function() {
var names = '';
for (var i = 0; i < $(this).get(0).files.length; ++i) {
if (i < $(this).get(0).files.length - 1) {
names += $(this).get(0).files.item(i).name + ',';
} else {
names += $(this).get(0).files.item(i).name;
}
}
$(this).siblings('.input-group').find('.inputFileVisible').val(names);
});
$('.form-file-multiple .btn').on('focus', function() {
$(this).parent().siblings().trigger('focus');
});
$('.form-file-multiple .btn').on('focusout', function() {
$(this).parent().siblings().trigger('focusout');
});
</script>
</body>
</html>
在新工单中引用 查看 Git Blame 复制永久链接