<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>表单</title>
<link rel="stylesheet" type="text/css" href="bootstrap-v3/css/bootstrap.css">
</head>
<body>
<div class="container">
<h1 class="page-header">表单</h1>
<form>
<!-- 表单中常见的元素: input 文本输入框 下拉框 单选按钮 复选框 文本域 按钮
表单控件:
.form-control .input-lg 较大 .input-sm 较小
应该把标签和控件放在 .form-group中, 这样可以获取最佳间距
向所有的文本元素 <input> <textarea> <select> 添加 .form-control
向 label 添加 control-label
-->
<div class="form-group">
<label for="email">
邮箱:
<input class="form-control" type="email" name="email" id="email" placeholder="请输入您的邮箱">
</label>
<!-- <label for="password">
密码:
<input class="form-control" type="password" name="password" id="password" placeholder="请输入您的密码">
</label> -->
</div>
<div class="form-group">
<label for="password">
密码:
<input class="form-control" type="password" name="password" id="password" placeholder="请输入您的密码">
<p class="help-block">请输入8-16位的密码.</p>
</label>
</div>
<div class="form-group">
<label for="file">
上传文件:
<input type="file" name="file" id="file">
<p class="help-block">Example block-level help text here.</p>
</label>
</div>
<div class="checkbox">
<label for="check">
<input type="checkbox" name="check" id="check"> 同意协议
</label>
</div>
<button type="submit">点击提交</button>
</form>
<hr>
<form class="form-horizontal">
<div class="form-group has-success">
<label for="email2" class="col-md-2 control-label">Email2:</label>
<div class="col-md-4">
<input type="email" class="form-control" id="email2" name="">
</div>
</div>
<div class="form-group">
<label for="password2" class="col-md-2 control-label">密码:</label>
<div class="col-md-4">
<input type="password" class="form-control" id="password2" name="">
</div>
</div>
<div class="form-group">
<div class="col-md-2 col-md-offset-2">
<div class="checkbox">
<label>
<input type="checkbox" name=""> 记住密码
<!-- <input type="color" name=""> -->
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-2 col-md-offset-2">
<button type="submit" class="btn btn-default">登录</button>
</div>
</div>
</form>
<hr>
<div class="form-group has-success">
<label class="control-label" for="inputSuccess1">Input with success</label>
<input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2">
<span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
</div>
<div class="form-group has-warning">
<label class="control-label" for="inputWarning1">Input with warning</label>
<input type="text" class="form-control" id="inputWarning1">
</div>
<div class="form-group has-error">
<label class="control-label" for="inputError1">Input with error</label>
<input type="text" class="form-control" id="inputError1">
</div>
<div class="has-success">
<div class="checkbox">
<label>
<input type="checkbox" id="checkboxSuccess" value="option1">
Checkbox with success
</label>
</div>
</div>
<div class="has-warning">
<div class="checkbox">
<label>
<input type="checkbox" id="checkboxWarning" value="option1">
Checkbox with warning
</label>
</div>
</div>
<div class="has-error">
<div class="checkbox">
<label>
<input type="checkbox" id="checkboxError" value="option1">
Checkbox with error
</label>
</div>
</div>
<hr>
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess2">Input with success</label>
<input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
<span class="glyphicon glyphicon-repeat form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess2Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-warning has-feedback">
<label class="control-label" for="inputWarning2">Input with warning</label>
<input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status">
<span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
<span id="inputWarning2Status" class="sr-only">(warning)</span>
</div>
<div class="form-group has-error has-feedback">
<label class="control-label" for="inputError2">Input with error</label>
<input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status">
<span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
<span id="inputError2Status" class="sr-only">(error)</span>
</div>
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputGroupSuccess1">Input group with success</label>
<div class="input-group">
<span class="input-group-addon">https://</span>
<input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
</div>
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
</div>
<hr>
<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">
<input type="text" class="form-control" id="inputSuccess3" aria-describedby="inputSuccess3Status">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess3Status" class="sr-only">(success)</span>
</div>
</div>
<div class="form-group has-success has-feedback">
<label class="control-label col-sm-3" for="inputGroupSuccess2">Input group with success</label>
<div class="col-sm-9">
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" id="inputGroupSuccess2" aria-describedby="inputGroupSuccess2Status">
</div>
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputGroupSuccess2Status" class="sr-only">(success)</span>
</div>
</div>
</form>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
</body>
</html>上述运行结果：
2075
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
