Bootstrap Basic Learning (ii)-form

I. Forms 1. Basic format

<!--Basic Format -    <form>                <Divclass= "Form-group">            <label>Name</label>            <inputtype= "text"class= "Form-control"placeholder= "Please enter your name"/>        </Div>                <Divclass= "Form-group">            <label>Password</label>            <inputtype= "Password"class= "Form-control"placeholder= "Please enter your password"/>        </Div>            </form>

Effect:

2. Form Combination

<!--form-Fit Group -    <form>                <Divclass= "Input-group">            <Divclass= "Input-group-addon">￥</Div>            <inputtype= "text"class= "Form-control"placeholder= "Please enter your price"/>        </Div>            </form>

Effect:

3. Horizontal arrangement

<!--Horizontal Arrangement -    <formclass= "Form-horizontal">                <Divclass= "Form-group">            <labelclass= "Col-sm-2 Control-label">Name</label>            <Divclass= "Col-sm-10">                <inputtype= "text"class= "Form-control"placeholder= "Please enter your name"/>            </Div>        </Div>                <Divclass= "Form-group">            <labelclass= "Col-sm-2 Control-label">Password</label>            <Divclass= "Col-sm-10">                <inputtype= "Password"class= "Form-control"placeholder= "Please enter your password"/>            <Div>        </Div>            </form>

Effect:

4. check box and Radio box

<!--check boxes and Radio boxes -    <form>                <Divclass= "checkbox">            <label>                <inputtype= "checkbox"/>Sports</label>        </Div>                <!--Set the Disabled check box -        <Divclass= "checkbox disabled">            <label>                <inputtype= "checkbox"Disabled/>Music</label>        </Div>                <!--Set inline line display -        <labelclass= "Checkbox-inline">            <inputtype= "checkbox"/>Sports</label>                <labelclass= "Checkbox-inline">            <inputtype= "checkbox"/>Music</label>    </form>

Effect:

5. Drop-down list

<!--Drop- down list -    <form>            <Selectclass= "Form-control">            <option>Java</option>            <option>C</option>            <option>C++</option>            <option>Php</option>        </Select>            </form>

Effect:

6. Check Status

<!--Checksum Status -    <form>                <Divclass= "Form-group has-success">            <label>Name</label>            <inputtype= "text"class= "Form-control"placeholder= "Please enter your name"/>        </Div>                <Divclass= "Form-group has-error">            <label>Password</label>            <inputtype= "Password"class= "Form-control"placeholder= "Please enter your password"/>        </Div>            </form>

Effect:

Bootstrap Basic Learning (ii)-form