mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2024-11-15 14:17:54 +03:00
Code Issues Packages Projects Releases Wiki Activity
7b73115606
mdb-ui-kit/docs/4.0/material-design/forms/index.html
Federico Zivolo 7b73115606 publish: fix: remove nojekyll... 
generated from commit 24d054d4df
2017-08-31 14:49:19 +02:00

1573 lines
51 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>
Forms &middot; Bootstrap Material Design
</title>
<!-- Twitter -->
<meta name="twitter:site" content="@getbootstrap">
<meta name="twitter:creator" content="@getbootstrap">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Forms">
<meta name="twitter:description" content="">
<meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
<!-- Facebook -->
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/material-design/forms/">
<meta property="og:title" content="Forms">
<meta property="og:description" content="">
<meta property="og:type" content="website">
<meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png">
<meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<!-- Meta -->
<meta name="description" content="The most popular HTML, CSS, and JS Material Design library in the world.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<!-- Bootstrap core CSS -->
<link href="/dist/css/bootstrap-material-design.css" rel="stylesheet">
<!-- Documentation extras -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css" />
<link href="/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="icon" href="/favicon.ico">
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-146052-10', 'getbootstrap.com');
ga('send', 'pageview');
</script>
</head>
<body class="bd-docs" data-spy="scroll" data-target=".bd-sidenav-active">
<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 flex-column flex-md-row bd-navbar">
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap">
<svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
</a>
<div class="navbar-nav-scroll">
<ul class="navbar-nav bd-navbar-nav flex-row">
<li class="nav-item">
<a class="nav-link " href="/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="/docs/4.0/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Documentation</a>
</li>
<li class="nav-item">
<a class="nav-link " href="/docs/4.0/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.creative-tim.com/product/material-dashboard-pro?affiliate_id=87385" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Material Dashboard Pro');" target="_blank" rel="noopener">Material Dashboard</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.creative-tim.com/product/material-kit-pro?affiliate_id=87385" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Material Kit Pro');" target="_blank" rel="noopener">Material Kit</a>
</li>
</ul>
</div>
<ul class="navbar-nav flex-row ml-md-auto 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">
v4.0
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions">
<a class="dropdown-item active" href="/docs/4.0/">Latest (4.x)</a>
<a class="dropdown-item" href="https://v4-alpha.getbootstrap.com">v4 Alpha 6</a>
<a class="dropdown-item" href="https://getbootstrap.com/3.3.7/">v3.3.7</a>
<a class="dropdown-item" href="https://getbootstrap.com/2.3.2/">v2.3.2</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link p-2" href="https://github.com/twbs/bootstrap" 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/getbootstrap" 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>
<li class="nav-item">
<a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com" target="_blank" rel="noopener" aria-label="Slack">
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512" focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z" fill="currentColor"/></svg>
</a>
</li>
</ul>
<a class="btn btn-bd-yellow d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.zip">Download</a>
</header>
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
<form class="bd-search d-flex align-items-center">
<input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off">
<button class="btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs avigation">
<svg class="" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/></svg>
</button>
</form>
<nav class="collapse bd-links" id="bd-docs-nav">
<div class="bd-toc-item ">
<a class="bd-toc-link" href="/docs/4.0/getting-started/introduction/">
Getting started
</a>
<ul class="nav bd-sidenav">
<li class="">
<a href="/docs/4.0/getting-started/introduction/">
Introduction
</a>
</li>
<li class="">
<a href="/docs/4.0/getting-started/download/">
Download
</a>
</li>
<li class="">
<a href="/docs/4.0/getting-started/contents/">
Contents
</a>
</li>
<li class="">
<a href="/docs/4.0/getting-started/browsers-devices/">
Browsers & devices
</a>
</li>
<li class="">
<a href="/docs/4.0/getting-started/javascript/">
JavaScript
</a>
</li>
<li class="">
<a href="/docs/4.0/getting-started/options/">
Options
</a>
</li>
<li class="">
<a href="/docs/4.0/getting-started/build-tools/">
Build tools
</a>
</li>
<li class="">
<a href="/docs/4.0/getting-started/webpack/">
Webpack
</a>
</li>
<li class="">
<a href="/docs/4.0/getting-started/accessibility/">
Accessibility
</a>
</li>
</ul>
</div>
<div class="bd-toc-item ">
<a class="bd-toc-link" href="/docs/4.0/layout/overview/">
Layout
</a>
<ul class="nav bd-sidenav">
<li class="">
<a href="/docs/4.0/layout/overview/">
Overview
</a>
</li>
<li class="">
<a href="/docs/4.0/layout/grid/">
Grid
</a>
</li>
<li class="">
<a href="/docs/4.0/layout/media-object/">
Media object
</a>
</li>
<li class="">
<a href="/docs/4.0/layout/utilities-for-layout/">
Utilities for layout
</a>
</li>
</ul>
</div>
<div class="bd-toc-item ">
<a class="bd-toc-link" href="/docs/4.0/content/reboot/">
Content
</a>
<ul class="nav bd-sidenav">
<li class="">
<a href="/docs/4.0/content/reboot/">
Reboot
</a>
</li>
<li class="">
<a href="/docs/4.0/content/typography/">
Typography
</a>
</li>
<li class="">
<a href="/docs/4.0/content/code/">
Code
</a>
</li>
<li class="">
<a href="/docs/4.0/content/images/">
Images
</a>
</li>
<li class="">
<a href="/docs/4.0/content/tables/">
Tables
</a>
</li>
<li class="">
<a href="/docs/4.0/content/figures/">
Figures
</a>
</li>
</ul>
</div>
<div class="bd-toc-item ">
<a class="bd-toc-link" href="/docs/4.0/components/alerts/">
Components
</a>
<ul class="nav bd-sidenav">
<li class="">
<a href="/docs/4.0/components/alerts/">
Alerts
</a>
</li>
<li class="">
<a href="/docs/4.0/components/badge/">
Badge
</a>
</li>
<li class="">
<a href="/docs/4.0/components/breadcrumb/">
Breadcrumb
</a>
</li>
<li class="">
<a href="/docs/4.0/components/buttons/">
Buttons
</a>
</li>
<li class="">
<a href="/docs/4.0/components/button-group/">
Button group
</a>
</li>
<li class="">
<a href="/docs/4.0/components/card/">
Card
</a>
</li>
<li class="">
<a href="/docs/4.0/components/carousel/">
Carousel
</a>
</li>
<li class="">
<a href="/docs/4.0/components/collapse/">
Collapse
</a>
</li>
<li class="">
<a href="/docs/4.0/components/dropdowns/">
Dropdowns
</a>
</li>
<li class="">
<a href="/docs/4.0/components/forms/">
Forms
</a>
</li>
<li class="">
<a href="/docs/4.0/components/input-group/">
Input group
</a>
</li>
<li class="">
<a href="/docs/4.0/components/jumbotron/">
Jumbotron
</a>
</li>
<li class="">
<a href="/docs/4.0/components/list-group/">
List group
</a>
</li>
<li class="">
<a href="/docs/4.0/components/modal/">
Modal
</a>
</li>
<li class="">
<a href="/docs/4.0/components/navs/">
Navs
</a>
</li>
<li class="">
<a href="/docs/4.0/components/navbar/">
Navbar
</a>
</li>
<li class="">
<a href="/docs/4.0/components/pagination/">
Pagination
</a>
</li>
<li class="">
<a href="/docs/4.0/components/popovers/">
Popovers
</a>
</li>
<li class="">
<a href="/docs/4.0/components/progress/">
Progress
</a>
</li>
<li class="">
<a href="/docs/4.0/components/scrollspy/">
Scrollspy
</a>
</li>
<li class="">
<a href="/docs/4.0/components/tooltips/">
Tooltips
</a>
</li>
</ul>
</div>
<div class="bd-toc-item active">
<a class="bd-toc-link" href="/docs/4.0/material-design/buttons/">
Material Design
</a>
<ul class="nav bd-sidenav">
<li class="">
<a href="/docs/4.0/material-design/buttons/">
Buttons
</a>
</li>
<li class="">
<a href="/docs/4.0/material-design/collapse-inline/">
Collapse inline
</a>
</li>
<li class="">
<a href="/docs/4.0/material-design/drawers/">
Drawers
</a>
</li>
<li class="">
<a href="/docs/4.0/material-design/extensions/">
Extensions
</a>
</li>
<li class="active bd-sidenav-active">
<a href="/docs/4.0/material-design/forms/">
Forms
</a>
</li>
<li class="">
<a href="/docs/4.0/material-design/labels/">
Labels
</a>
</li>
<li class="">
<a href="/docs/4.0/material-design/list-groups/">
List groups
</a>
</li>
<li class="">
<a href="/docs/4.0/material-design/menus/">
Menus
</a>
</li>
<li class="">
<a href="/docs/4.0/material-design/navs/">
Navs
</a>
</li>
<li class="">
<a href="/docs/4.0/material-design/selections/">
Selections
</a>
</li>
<li class="">
<a href="/docs/4.0/material-design/snackbars/">
Snackbars
</a>
</li>
</ul>
</div>
<div class="bd-toc-item ">
<a class="bd-toc-link" href="/docs/4.0/utilities/borders/">
Utilities
</a>
<ul class="nav bd-sidenav">
<li class="">
<a href="/docs/4.0/utilities/borders/">
Borders
</a>
</li>
<li class="">
<a href="/docs/4.0/utilities/clearfix/">
Clearfix
</a>
</li>
<li class="">
<a href="/docs/4.0/utilities/close-icon/">
Close icon
</a>
</li>
<li class="">
<a href="/docs/4.0/utilities/colors/">
Colors
</a>
</li>
<li class="">
<a href="/docs/4.0/utilities/display/">
Display
</a>
</li>
<li class="">
<a href="/docs/4.0/utilities/embed/">
Embed
</a>
</li>
<li class="">
<a href="/docs/4.0/utilities/flex/">
Flex
</a>
</li>
<li class="">
<a href="/docs/4.0/utilities/float/">
Float
</a>
</li>
<li class="">
<a href="/docs/4.0/utilities/image-replacement/">
Image replacement
</a>
</li>
<li class="">
<a href="/docs/4.0/utilities/position/">
Position
</a>
</li>
<li class="">
<a href="/docs/4.0/utilities/screenreaders/">
Screenreaders
</a>
</li>
<li class="">
<a href="/docs/4.0/utilities/sizing/">
Sizing
</a>
</li>
<li class="">
<a href="/docs/4.0/utilities/spacing/">
Spacing
</a>
</li>
<li class="">
<a href="/docs/4.0/utilities/text/">
Text
</a>
</li>
<li class="">
<a href="/docs/4.0/utilities/vertical-align/">
Vertical align
</a>
</li>
<li class="">
<a href="/docs/4.0/utilities/visibility/">
Visibility
</a>
</li>
</ul>
</div>
<div class="bd-toc-item ">
<a class="bd-toc-link" href="/docs/4.0/extend/icons/">
Extend
</a>
<ul class="nav bd-sidenav">
<li class="">
<a href="/docs/4.0/extend/icons/">
Icons
</a>
</li>
</ul>
</div>
<div class="bd-toc-item ">
<a class="bd-toc-link" href="/docs/4.0/migration/">
Migration
</a>
<ul class="nav bd-sidenav">
</ul>
</div>
</nav>
</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"></p>
<script async type="text/javascript" src="https://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=fezvrastagithubiobootstrapmateri" id="_carbonads_js"></script>
<p>Bootstrap provides several form control styles, layout options, and custom components for creating a wide variety of forms.</p>
<h2 id="contents">Contents</h2>
<ul id="markdown-toc">
<li><a href="#contents" id="markdown-toc-contents">Contents</a></li>
<li><a href="#classes" id="markdown-toc-classes">Classes</a></li>
<li><a href="#form-groups" id="markdown-toc-form-groups">Form groups</a></li>
<li><a href="#inline-forms" id="markdown-toc-inline-forms">Inline forms</a> <ul>
<li><a href="#visible-labels" id="markdown-toc-visible-labels">Visible labels</a></li>
</ul>
</li>
<li><a href="#help-blocks" id="markdown-toc-help-blocks">Help blocks</a> <ul>
<li><a href="#multiple" id="markdown-toc-multiple">Multiple</a></li>
</ul>
</li>
</ul>
<p>Form controls flavored by Material Design for Bootstrap customizations such as <code class="highlighter-rouge">bmd-label-floating</code>.</p>
<div class="bd-example" data-example-id="">
<form>
<div class="form-group">
<label for="exampleInputEmail1" class="bmd-label-floating">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" />
<span class="bmd-help">We'll never share your email with anyone else.</span>
</div>
<div class="form-group">
<label for="exampleInputPassword1" class="bmd-label-floating">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" />
</div>
<div class="form-group">
<label for="exampleSelect1" class="bmd-label-floating">Example select</label>
<select class="form-control" id="exampleSelect1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="form-group">
<label for="exampleSelect2" class="bmd-label-floating">Example multiple select</label>
<select multiple="" class="form-control" id="exampleSelect2">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="form-group">
<label for="exampleTextarea" class="bmd-label-floating">Example textarea</label>
<textarea class="form-control" id="exampleTextarea" rows="3"></textarea>
</div>
<div class="form-group">
<label for="exampleInputFile" class="bmd-label-floating">File input</label>
<input type="file" class="form-control-file" id="exampleInputFile" />
<small class="text-muted">This is some placeholder block-level help text for the above input. It's a bit lighter and easily wraps to a new line.</small>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked="" />
Option one is this and that&mdash;be sure to include why it's great
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2" />
Option two can be something else and selecting it will deselect option one
</label>
</div>
<div class="radio disabled">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled="" />
Option three is disabled
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" /> Check me out
</label>
</div>
<button class="btn btn-default">Cancel</button>
<button type="submit" class="btn btn-primary btn-raised">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="na">class=</span><span class="s">"bmd-label-floating"</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="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"bmd-help"</span><span class="nt">&gt;</span>We'll never share your email with anyone else.<span class="nt">&lt;/span&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="na">class=</span><span class="s">"bmd-label-floating"</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="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">"exampleSelect1"</span> <span class="na">class=</span><span class="s">"bmd-label-floating"</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"</span> <span class="na">id=</span><span class="s">"exampleSelect1"</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">"exampleSelect2"</span> <span class="na">class=</span><span class="s">"bmd-label-floating"</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"</span> <span class="na">id=</span><span class="s">"exampleSelect2"</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">"exampleTextarea"</span> <span class="na">class=</span><span class="s">"bmd-label-floating"</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">"exampleTextarea"</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;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">"exampleInputFile"</span> <span class="na">class=</span><span class="s">"bmd-label-floating"</span><span class="nt">&gt;</span>File input<span class="nt">&lt;/label&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">"form-control-file"</span> <span class="na">id=</span><span class="s">"exampleInputFile"</span><span class="nt">&gt;</span>
<span class="nt">&lt;small</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">&gt;</span>This is some placeholder block-level help text for the above input. It's a bit lighter and easily wraps to a new line.<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">"radio"</span><span class="nt">&gt;</span>
<span class="nt">&lt;label&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"optionsRadios"</span> <span class="na">id=</span><span class="s">"optionsRadios1"</span> <span class="na">value=</span><span class="s">"option1"</span> <span class="na">checked</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;/label&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"radio"</span><span class="nt">&gt;</span>
<span class="nt">&lt;label&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"optionsRadios"</span> <span class="na">id=</span><span class="s">"optionsRadios2"</span> <span class="na">value=</span><span class="s">"option2"</span><span class="nt">&gt;</span>
Option two can be something else and selecting it will deselect option one
<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">"radio disabled"</span><span class="nt">&gt;</span>
<span class="nt">&lt;label&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"optionsRadios"</span> <span class="na">id=</span><span class="s">"optionsRadios3"</span> <span class="na">value=</span><span class="s">"option3"</span> <span class="na">disabled</span><span class="nt">&gt;</span>
Option three is disabled
<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">"checkbox"</span><span class="nt">&gt;</span>
<span class="nt">&lt;label&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"checkbox"</span><span class="nt">&gt;</span> Check me out
<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"btn btn-default"</span><span class="nt">&gt;</span>Cancel<span class="nt">&lt;/button&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 btn-raised"</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="classes">Classes</h2>
<p>Below is a complete list of options supported by Material Design for Bootstrap and the classes that customize them. Additional documentation is available for each group.</p>
<table>
<thead>
<tr>
<th>Classes</th>
<th>Used for</th>
<th>Notes</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<code>.bmd-form-group</code>
</td>
<td>
Any group of form controls (e.g. combination of label/input).
</td>
<td>
<p>This is automatically added by javascript, but if your code is templated, adding <code class="highlighter-rouge">.bmd-form-group</code>
to your form groups or otherwise your groups of controls can reduce rendering churn since the javascript will not
add the class after the initial page rendering. This can also demarcate complex label/input combinations inside the
same <code class="highlighter-rouge">.form-group</code>.</p>
</td>
</tr>
<tr>
<td>
<code>.bmd-form-group-sm</code>
</td>
<td>
<p>Added to the <code class="highlighter-rouge">.bmd-form-group</code>, this will render the combination label/input/help in the smaller variation.</p>
</td>
<td>
</td>
</tr>
<tr>
<td>
<code>.bmd-form-group-lg</code>
</td>
<td>
<p>Added to the <code class="highlighter-rouge">.bmd-form-group</code>, this will render the combination label/input/help in the larger variation.</p>
</td>
<td>
</td>
</tr>
<tr>
<td>
<code>.bmd-help</code>
</td>
<td>
Any help text
</td>
<td>
<p>Mark any help text next to an input with <code class="highlighter-rouge">.bmd-help</code> to gain behaviors such as showing upon focus.</p>
</td>
</tr>
</tbody>
</table>
<h2 id="form-groups">Form groups</h2>
<p>The <code class="highlighter-rouge">.bmd-form-group</code> class is usually added to the <code class="highlighter-rouge">.form-group</code> element. Whereas the <code class="highlighter-rouge">.form-group</code> adds structure to forms by providing <code class="highlighter-rouge">margin-bottom</code> around a label and control pairing,
the only purpose of the <code class="highlighter-rouge">.bmd-form-group</code> is to demarcate Material Design behaviors for a combination of label/input. Focus/hover styling for the label/input is determined based on the <code class="highlighter-rouge">.bmd-form-group</code>.</p>
<p>The <code class="highlighter-rouge">.bmd-form-group</code> is added automatically by javascript through basic discovery of the outer demarcation of the component defined by the Bootstrap standard
markup. If your code is templated, you may want to add <code class="highlighter-rouge">.bmd-form-group</code> to the markup directly to prevent any rendering churn from the javascript determining
and adding the class to the markup. In custom situations, the javascript may not be able to properly resolve the location for the <code class="highlighter-rouge">.bmd-form-group</code>, so in rare or complex cases
you may need to wrap your markup in an <code class="highlighter-rouge">.bmd-form-group</code> to get appropriate focus/hover behavior.</p>
<div class="bd-example" data-example-id="">
<form>
<div class="form-group"> <!-- left unspecified, .bmd-form-group will be automatically added (inspect the code) -->
<label for="formGroupExampleInput" class="bmd-label-floating">Example label</label>
<input type="text" class="form-control" id="formGroupExampleInput" />
</div>
<div class="form-group bmd-form-group"> <!-- manually specified -->
<label for="formGroupExampleInput2" class="bmd-label-floating">Another label</label>
<input type="text" class="form-control" id="formGroupExampleInput2" />
</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="c">&lt;!-- left unspecified, .bmd-form-group will be automatically added (inspect the code) --&gt;</span>
<span class="nt">&lt;label</span> <span class="na">for=</span><span class="s">"formGroupExampleInput"</span> <span class="na">class=</span><span class="s">"bmd-label-floating"</span><span class="nt">&gt;</span>Example label<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">"formGroupExampleInput"</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 bmd-form-group"</span><span class="nt">&gt;</span> <span class="c">&lt;!-- manually specified --&gt;</span>
<span class="nt">&lt;label</span> <span class="na">for=</span><span class="s">"formGroupExampleInput2"</span> <span class="na">class=</span><span class="s">"bmd-label-floating"</span><span class="nt">&gt;</span>Another label<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">"formGroupExampleInput2"</span><span class="nt">&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/form&gt;</span></code></pre></div>
<h2 id="inline-forms">Inline forms</h2>
<p>Use the <code class="highlighter-rouge">.form-inline</code> class to to display a series of labels, form controls, and buttons on a single horizontal row. Form controls within inline forms behave differently:</p>
<ul>
<li>Controls are <code class="highlighter-rouge">display: inline-block</code> to provide alignment control via <code class="highlighter-rouge">vertical-align</code> and <code class="highlighter-rouge">margin</code>.</li>
<li>Controls receive <code class="highlighter-rouge">width: auto</code> to override the Bootstrap default <code class="highlighter-rouge">width: 100%</code>.</li>
<li>Controls <strong>only appear inline in viewports that are at least 768px wide</strong> to account for narrow viewports on mobile devices.</li>
</ul>
<p>Because of this, you may need to manually address the width and alignment of individual form controls. Lastly, as shown below, you should always include a <code class="highlighter-rouge">&lt;label&gt;</code> with each form control.</p>
<h3 id="visible-labels">Visible labels</h3>
<div class="bd-example" data-example-id="">
<form class="form-inline">
<div class="form-group">
<label for="exampleInputName2" class="bmd-label-floating">Name</label>
<input type="text" class="form-control" id="exampleInputName2" />
</div>
<div class="form-group">
<label for="exampleInputEmail2" class="bmd-label-floating">Email</label>
<input type="email" class="form-control" id="exampleInputEmail2" />
</div>
<span class="form-group bmd-form-group"> <!-- needed to match padding for floating labels -->
<button type="submit" class="btn btn-primary">Send invitation</button>
</span>
</form>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;form</span> <span class="na">class=</span><span class="s">"form-inline"</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">"exampleInputName2"</span> <span class="na">class=</span><span class="s">"bmd-label-floating"</span><span class="nt">&gt;</span>Name<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">"exampleInputName2"</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">"exampleInputEmail2"</span> <span class="na">class=</span><span class="s">"bmd-label-floating"</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">"exampleInputEmail2"</span><span class="nt">&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-group bmd-form-group"</span><span class="nt">&gt;</span> <span class="c">&lt;!-- needed to match padding for floating labels --&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>Send invitation<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/form&gt;</span></code></pre></div>
<h2 id="help-blocks">Help blocks</h2>
<p><code class="highlighter-rouge">bmd-help</code> can be used for form tips (known as <code class="highlighter-rouge">help-block</code> in v3 which has been removed in v4). These elements are absolutely positioned but hidden, they occupy the space when hidden to prevent form bouncing.</p>
<h3 id="multiple">Multiple</h3>
<p>Multiple help blocks will cause the form to bounce because subsequent blocks are relatively positioned. The space used when hidden is that of a single help comment only.</p>
<div class="bd-example" data-example-id="">
<form>
<div class="form-group">
<label for="exampleInputEmail1" class="bmd-label-floating">Email address (two help blocks)</label>
<input type="email" class="form-control" id="exampleInputEmail1" />
<span class="bmd-help">We'll never share your email with anyone else.</span>
<span class="bmd-help">And this is probably from a second plugin showing in a non-optimal way</span>
</div>
<div class="form-group">
<label for="exampleInputPassword1" class="bmd-label-floating">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" />
</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">"exampleInputEmail1"</span> <span class="na">class=</span><span class="s">"bmd-label-floating"</span><span class="nt">&gt;</span>Email address (two help blocks)<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="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"bmd-help"</span><span class="nt">&gt;</span>We'll never share your email with anyone else.<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"bmd-help"</span><span class="nt">&gt;</span>And this is probably from a second plugin showing in a non-optimal way<span class="nt">&lt;/span&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="na">class=</span><span class="s">"bmd-label-floating"</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="nt">&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/form&gt;</span></code></pre></div>
</main>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="/assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
<script src="/assets/js/vendor/popper.min.js"></script>
<script src="/dist/js/bootstrap-material-design.js"></script>
<script src="/assets/js/vendor/anchor.min.js"></script>
<script src="/assets/js/vendor/clipboard.min.js"></script>
<script src="/assets/js/vendor/holder.min.js"></script>
<script src="/assets/js/src/application.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="/assets/js/ie10-viewport-bug-workaround.js"></script>
<script src="/assets/js/ie-emulation-modes-warning.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.js"></script>
<script type="text/javascript">
var docsearch = docsearch({
apiKey: '48cb48b22351bc71ea5f12f4d1ede198',
indexName: 'bootstrap-v4',
inputSelector: '#search-input',
handleSelected: function (input, event, suggestion) {
var url = suggestion.url;
url = suggestion.isLvl1 ? url.split('#')[0]: url;
// If it's a title we remove the anchor so it does not jump.
window.location.href = url;
},
transformData: function (hits) {
return hits.map(function (hit) {
hit.url = hit.url.replace('https://v4-alpha.getbootstrap.com', '/docs/4.0');
return hit;
});
},
debug: false // Set debug to true if you want to inspect the dropdown
});
</script>
<script>
Holder.addTheme('gray', {
bg: '#777',
fg: 'rgba(255,255,255,.75)',
font: 'Helvetica',
fontweight: 'normal'
})
</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink