<li><a href="#forms-controls-static">Static control</a></li>
<li><a href="#forms-control-focus">Focus state</a></li>
<li><a href="#forms-control-disabled">Disabled state</a></li>
+ <li><a href="#forms-control-readonly">Readonly state</a></li>
<li><a href="#forms-control-validation">Validation states</a></li>
<li><a href="#forms-control-sizes">Control sizing</a></li>
<li><a href="#forms-help-text">Help text</a></li>
<h2 id="forms-control-disabled">Disabled inputs</h2>
- <p>Add the <code>disabled</code> attribute on an input to prevent user input and trigger a slightly different look.</p>
+ <p>Add the <code>disabled</code> boolean attribute on an input to prevent user input and trigger a slightly different look.</p>
<div class="bs-example">
<form role="form">
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here…" disabled>
{% endhighlight %}
+ <h2 id="forms-control-readonly">Readonly inputs</h2>
+ <p>Add the <code>readonly</code> boolean attribute on an input to prevent user input and style the input as disabled.</p>
+ <div class="bs-example">
+ <form role="form">
+ <input class="form-control" type="text" placeholder="Readonly input here…" readonly>
+ </form>
+ </div><!-- /.bs-example -->
+{% highlight html %}
+<input class="form-control" type="text" placeholder="Readonly input here…" readonly>
+{% endhighlight %}
+
+
<h2 id="forms-control-validation">Validation states</h2>
<p>Bootstrap includes validation styles for error, warning, and success states on form controls. To use, add <code>.has-warning</code>, <code>.has-error</code>, or <code>.has-success</code> to the parent element. Any <code>.control-label</code>, <code>.form-control</code>, and <code>.help-block</code> within that element will receive the validation styles.</p>