Extended Form Controls
In addition to the basic form controls listed in the previous section, Bootstrap offers a few other form components to complement the standard HTML form elements; for example, it lets you easily prepend and append content to inputs.
Prepended and appended inputs
By adding prepended and appended content to an input field, you can add common elements to the user’s input (below example). For example, you can add the dollar symbol, the @ for a Twitter username, or anything else that might be common for your application interface. To add extra content before the user input, wrap the prepended input in a <div> with class .input-prepend. To append input, use the class .inputappend. Then, within that same <div>, place your extra content inside a <span> with an .add-on class, and place the <span> either before or after the <input> element:
<!DOCTYPE html> <html> <head> <title>Bootstrap Tutorial</title> <link href="css/bootstrap.min.css" rel="stylesheet"> </head> <body> <body> <div class="input-prepend"> <span class="add-on">@</span> <input class="span2" id="prependedInput" type="text" placeholder="Username"> </div> <div class="input-append"> <input class="span2" id="appendedInput" type="text"> <span class="add-on">.00</span> </div> </body> </html>
<div class="input-prepend input-append"> <span class="add-on">$</span> <input class="span2" id="appendedPrependedInput" type="text"> <span class="add-on">.00</span> </div>
Rather than using a <span>, you can instead use <button> with a class of .btn to attach (surprise!) a button or two to the input (beloe example):
<div class="input-append"> <input class="span2" id="appendedInputButtons" type="text"> <button class="btn" type="button">Search</button> <button class="btn" type="button">Options</button> </div>
If you are appending a button to a search form, you will get the same nice rounded corners that you would expect :
<form class="form-search"> <div class="input-append"> <input type="text" class="span2 search-query"> <button type="submit" class="btn">Search</button> </div> <div class="input-prepend"> <button type="submit" class="btn">Search</button> <input type="text" class="span2 search-query"> </div> </form>
