bootstrap-表单二
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! --> <title></title> <link href="css/bootstrap.css" rel="stylesheet"> <link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/style.css" rel="stylesheet"> <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script> <script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> </head> <body> <!-- form-inline类使表单水平呈现--> <form > <!-- 所有设置了form-control类的input,textarea,select,元素都将被默认为width:100% --> <div class="form-group"> <label for="exampleInputEmail">Email address</label> <input type="email" class="form-control" id="exampleInputEmail" placeholder="input"> </div> <div class="form-group"> <label for="exampleInputEmail">Email address</label> <input type="password" class="form-control" id="exampleInputEmail" placeholder="input"> </div> <div class="form-group"> <input type="text" id="idCard" aria-label="身份证"> <p class="help-block">Example block-level </p> </div> <div class="form-group"> <label for="idCard">身份证</label> <input type="text" id="idCard" > <p class="help-block">Example block-level </p> </div> <label for="hello1">hello</label><input type="text" id="hello"><br> <label for="jiang">hello</label><input type="text" id="jiang"><br> <!-- sr-only将label标签进行隐藏--> <!-- laria-abel 和aria-labelledby的区别--> <!-- for标签属性的作用 --> </form> <br> <form class="form-inline"> <div class="form-group"> <label class="src-only" for="exampleInputAmount">Amount</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">@</div> </div> </div> <button type="submit" class="btn btn-primary">search</button> </form> <br> <!-- 水平排列的表单control-label文本采用右对齐 --> <form class="form-horizontal" > <div class="form-group"> <label for="inputEmail" class="col-sm-2 control-label">Email:</label> <div class="col-sm-10"> <input type="email" class="form-control" id="inputEmail" placeholder="email"> </div> </div> <div class="form-group"> <label for="inputPassword" class="col-sm-2 control-label">Password:</label> <div class="col-sm-10"> <input type="password" class="form-control" id="inputPassword" placeholder="password"> </div> </div> </form> <!-- 输入框的属性text password datetime datetime-local date month time week number email week url tel color--> <!-- disabled表示禁用 --> <textarea class="form-control" rows="3"></textarea><br><br> <div class="checkbox class="checkbox-inline" "> <label class="checkbox-inline"><input type="checkbox" value="">choose 1</label> </div> <div class="checkbox class="checkbox-inline" "> <label class="checkbox-inline"><input type="checkbox" value="">choose 2</label> </div> <div class="checkbox class="checkbox-inline" "> <label class="checkbox-inline"><input type="checkbox" value="">choose 3</label> </div> <!-- 横向排列控件 --> <br><br><br> <label class="checkbox-inline"><input type="checkbox" value="">choose 1</label> <label class="checkbox-inline"><input type="checkbox" value="">choose 2</label> <label class="checkbox-inline"><input type="checkbox" value="">choose 3</label> <!-- 不带label文本的checkbox和radio --> <div class="checkbox"> <label> <input type="checkbox" id="blankCheckbox" value="option1" aira-label="checkBox"> </label> </div> <div class="radio"> <label> <input type="radio" id="blankRadio" value="option1" aria-label="checkRadio"> </label> </div> <!-- 下拉列表 --> <select multiple class="form-control"> <option>1111</option> <option>2222</option> <option>3333</option> <option>4444</option> <option>5555</option> </select> <br><br><br> <!-- 将纯文本和label元素放置到同一行,给p元素加form-control-static类 --> <form class="form-horizontal"> <div class="form-group"> <label class="col-sm-2 control-label">Email</label> <div class="col-sm-10"> <p class="form-control-static">email@example.com</p> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label" for="inputPassword">Email</label> <div class="col-sm-10"> <input type="password" class="form-control" id="inputPassword" disabled=""> </div> </div> </form> </body> </html>