aboutsummaryrefslogtreecommitdiff
path: root/docs/components/forms.md
diff options
context:
space:
mode:
authorMark Otto <[email protected]>2014-11-30 20:17:45 -0800
committerMark Otto <[email protected]>2014-11-30 20:17:45 -0800
commitb648a77ed36d2d3a38842a7ab5a19ba50c52bae6 (patch)
tree5f2a1a3db3f9464f1803c1afef8946e07951ad5c /docs/components/forms.md
parentb53ad74d472d0dbe3669b61e79c89fd35da4aa1f (diff)
parent0eb2c922d892bdcd4356b7212ab61c7d8a44c2dc (diff)
downloadbootstrap-b648a77ed36d2d3a38842a7ab5a19ba50c52bae6.tar.xz
bootstrap-b648a77ed36d2d3a38842a7ab5a19ba50c52bae6.zip
Merge branch 'master' into v4
Conflicts: Gruntfile.js _config.yml dist/css/bootstrap-theme.css dist/css/bootstrap-theme.min.css dist/css/bootstrap.css dist/css/bootstrap.css.map dist/css/bootstrap.min.css dist/fonts/glyphicons-halflings-regular.eot dist/fonts/glyphicons-halflings-regular.svg dist/fonts/glyphicons-halflings-regular.ttf dist/fonts/glyphicons-halflings-regular.woff docs/_data/glyphicons.yml docs/_includes/components/alerts.html docs/_includes/components/badges.html docs/_includes/components/button-dropdowns.html docs/_includes/components/button-groups.html docs/_includes/components/dropdowns.html docs/_includes/components/glyphicons.html docs/_includes/components/input-groups.html docs/_includes/components/labels.html docs/_includes/components/media.html docs/_includes/components/navbar.html docs/_includes/components/navs.html docs/_includes/components/pagination.html docs/_includes/components/panels.html docs/_includes/components/progress-bars.html docs/_includes/css/buttons.html docs/_includes/css/forms.html docs/_includes/css/grid.html docs/_includes/css/helpers.html docs/_includes/css/images.html docs/_includes/css/less.html docs/_includes/css/responsive-utilities.html docs/_includes/css/sass.html docs/_includes/css/tables.html docs/_includes/css/type.html docs/_includes/getting-started/accessibility.html docs/_includes/getting-started/browser-device-support.html docs/_includes/getting-started/community.html docs/_includes/getting-started/download.html docs/_includes/getting-started/examples.html docs/_includes/getting-started/whats-included.html docs/_includes/js/affix.html docs/_includes/js/alerts.html docs/_includes/js/buttons.html docs/_includes/js/carousel.html docs/_includes/js/collapse.html docs/_includes/js/dropdowns.html docs/_includes/js/modal.html docs/_includes/js/overview.html docs/_includes/js/tabs.html docs/_includes/nav/components.html docs/_includes/nav/css.html docs/_includes/nav/javascript.html docs/_includes/nav/main.html docs/about.html docs/assets/css/docs.min.css docs/assets/js/customize.min.js docs/assets/js/raw-files.min.js docs/dist/css/bootstrap-theme.css docs/dist/css/bootstrap-theme.min.css docs/dist/css/bootstrap.css docs/dist/css/bootstrap.css.map docs/dist/css/bootstrap.min.css docs/dist/fonts/glyphicons-halflings-regular.eot docs/dist/fonts/glyphicons-halflings-regular.svg docs/dist/fonts/glyphicons-halflings-regular.ttf docs/dist/fonts/glyphicons-halflings-regular.woff docs/examples/carousel/index.html docs/examples/navbar-fixed-top/index.html docs/examples/navbar-static-top/index.html docs/examples/navbar/index.html docs/examples/non-responsive/index.html docs/examples/non-responsive/non-responsive.css docs/examples/sticky-footer-navbar/index.html docs/examples/theme/index.html fonts/glyphicons-halflings-regular.eot fonts/glyphicons-halflings-regular.svg fonts/glyphicons-halflings-regular.ttf fonts/glyphicons-halflings-regular.woff less/_carousel.less less/_forms.less less/glyphicons.less
Diffstat (limited to 'docs/components/forms.md')
-rw-r--r--docs/components/forms.md44
1 files changed, 26 insertions, 18 deletions
diff --git a/docs/components/forms.md b/docs/components/forms.md
index 71061dc85..7d274c2a0 100644
--- a/docs/components/forms.md
+++ b/docs/components/forms.md
@@ -10,7 +10,7 @@ Bootstrap normalizes common HTML5 form elements and adds a number of layout opti
Individual form controls automatically receive some global styling. All textual `<input>`, `<textarea>`, and `<select>` elements with `.form-control` are set to `width: 100%;` by default. Wrap labels and controls in `.form-group` for optimum spacing.
{% example html %}
-<form role="form">
+<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
@@ -52,18 +52,12 @@ Add `.form-inline` to your `<form>` for left-aligned and inline-block controls.
</div>
{% example html %}
-<form class="form-inline" role="form">
+<form class="form-inline">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail2">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
</div>
<div class="form-group">
- <div class="input-group">
- <div class="input-group-addon">@</div>
- <input class="form-control" type="email" placeholder="Enter email">
- </div>
- </div>
- <div class="form-group">
<label class="sr-only" for="exampleInputPassword2">Password</label>
<input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
</div>
@@ -72,7 +66,21 @@ Add `.form-inline` to your `<form>` for left-aligned and inline-block controls.
<input type="checkbox"> Remember me
</label>
</div>
- <button type="submit" class="btn btn-secondary">Sign in</button>
+ <button type="submit" class="btn btn-default">Sign in</button>
+</form>
+{% endexample %}
+
+{% example html %}
+<form class="form-inline">
+ <div class="form-group">
+ <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
+ <div class="input-group">
+ <div class="input-group-addon">$</div>
+ <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
+ <div class="input-group-addon">.00</div>
+ </div>
+ </div>
+ <button type="submit" class="btn btn-primary">Transfer cash</button>
</form>
{% endexample %}
@@ -81,7 +89,7 @@ Add `.form-inline` to your `<form>` for left-aligned and inline-block controls.
Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout by adding `.form-horizontal` to the form. Doing so changes `.form-group`s to behave as grid rows, so no need for `.row`.
{% example html %}
-<form class="form-horizontal" role="form">
+<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
@@ -253,7 +261,7 @@ Use the default option, or add `multiple` to show multiple options at once.
When you need to place plain text next to a form label within a form, use the `.form-control-static` class on a `<p>`.
{% example html %}
-<form class="form-horizontal" role="form">
+<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
@@ -270,7 +278,7 @@ When you need to place plain text next to a form label within a form, use the `.
{% endexample %}
{% example html %}
-<form class="form-inline" role="form">
+<form class="form-inline">
<div class="form-group">
<label class="sr-only">Email</label>
<p class="form-control-static">[email protected]</p>
@@ -288,7 +296,7 @@ When you need to place plain text next to a form label within a form, use the `.
We remove the default `outline` styles on some form controls and apply a `box-shadow` in its place for `:focus`.
<div class="bs-example">
- <form role="form">
+ <form>
<input class="form-control" id="focusedInput" type="text" value="Demonstrative focus state">
</form>
</div>
@@ -309,7 +317,7 @@ Add the `disabled` boolean attribute on an `<input>`, `<select>`, or `<textarea>
Add the `disabled` attribute to a `<fieldset>` to disable all the controls within.
{% example html %}
-<form role="form">
+<form>
<fieldset disabled>
<div class="form-group">
<label for="disabledTextInput">Disabled input</label>
@@ -333,7 +341,7 @@ Add the `disabled` attribute to a `<fieldset>` to disable all the controls withi
<div class="bs-callout bs-callout-warning">
<h4>Caveat about link functionality of `&lt;a&gt;`</h4>
- <p>Our styles use `pointer-events: none` to try to disable the link functionality of <code>&lt;a class="btn btn-*"&gt;</code> buttons in this case, but that CSS property is not yet standardized and isn't fully supported in Opera 18 and below, or in Internet Explorer 11. So to be safe, use custom JavaScript to disable such links.</p>
+ <p>By default, browsers will treat all native form controls (<code>&lt;input&gt;</code>, <code>&lt;select&gt;</code> and <code>&lt;button&gt;</code> elements) inside a <code>&lt;fieldset disabled&gt;</code> as disabled, preventing both keyboard and mouse interactions on them. However, if your form also includes <code>&lt;a ... class="btn btn-*"&gt;</code> elements, these will only be given a style of <code>pointer-events: none</code>. As noted in the section about <a href="#buttons-disabled">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 11, 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="bs-callout bs-callout-danger">
@@ -418,7 +426,7 @@ You can also add optional feedback icons with the addition of `.has-feedback` an
{% endexample %}
{% example html %}
-<form class="form-horizontal" role="form">
+<form class="form-horizontal">
<div class="form-group has-success has-feedback">
<label class="control-label col-sm-3" for="inputSuccess3">Input with success</label>
<div class="col-sm-9">
@@ -430,7 +438,7 @@ You can also add optional feedback icons with the addition of `.has-feedback` an
{% endexample %}
{% example html %}
-<form class="form-inline" role="form">
+<form class="form-inline">
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess4">Input with success</label>
<input type="text" class="form-control" id="inputSuccess4">
@@ -466,7 +474,7 @@ Set heights using classes like `.input-lg`, and set widths using grid column cla
Quickly size labels and form controls within `.form-horizontal` by adding `.form-group-lg` or `.form-group-sm` to existing `.form-group`s.
{% example html %}
-<form class="form-horizontal" role="form">
+<form class="form-horizontal">
<div class="form-group form-group-lg">
<label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>
<div class="col-sm-10">