您的位置：首页 > Web前端 > HTML

我自己搭建的html表单

2017-07-30 13:54 148 查看 
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap模板</title>
<meta charset="UTF-8">
<!-- 表示根据设备的大小调整页面显示的宽度-->
<meta name="viewport" content="width=device-width,initial-scale=1">
<!--  Bootstrap需要jQuery的支持  导入jQuery开发包-->
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<!-- Bootstrap需要的js包-->
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
<!--Bootstrap需要的CSS样式-->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<script type="text/javascript">
function changeFieldset(val) {
if (val == true) {
$("#myform").attr("disabled", false);//取消禁用
}else{
$("#myform").attr("disabled", true);//禁用表单提交
}
}
</script>
</head>
<body>
<!--bootstrap：表单是否使用操作(禁用表单)-->
<div class="container">
<form action="http://www.baidu.com" method="post" class="form-horizontal">
<fieldset disabled id="myform">
<legend><label>用户登陆<span class="glyphicon glyphicon-user"></span></label></legend>
<div class="form-group">
<label class="col-md-2 control-label" for="username">用户名:</label>
<div class="col-md-5">
<input type="text" id="username" placeholder="请输入注册用户名" class="form-control">
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label" for="password">密    码:</label>
<div class="col-md-5">
<input type="password" id="password" placeholder="请输入注册密码" class="form-control">
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label" for="sex">性    别:</label>
<div class="col-md-5">
<div class="radio-inline">
<label><input type="radio" id="sex" name="sex" value="男" checked="checked">男</label>
</div>
<div class="radio-inline">
<label><input type="radio" id="sex2" name="sex" value="女">女</label>
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label" for="like">兴    趣:</label>
<div class="col-md-5">
<div class="checkbox-inline">
<label><input type="checkbox" name="like" id="like" value="C++">C++</label>
</div>
<div class="checkbox-inline">
<label><input type="checkbox" name="like2" id="like2" value="Java">Java</label>
</div>
<div class="checkbox-inline">
<label><input type="checkbox" name="like3" id="like3" value="Mysql">Mysql</label>
</div>
<div class="checkbox-inline">
<label><input type="checkbox" name="like4" id="like4" value="Linux">Linux</label>
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label" for="email">邮箱:</label>
<div class="col-md-5">
<input type="text" id="email" placeholder="请输入注册邮箱" class="form-control">
</div>
</div>
<div class="form-group">
<div class="col-md-5 col-md-offset-2">
<button type="submit" class="btn btn-success">登陆</button>
<button type="reset" class="btn btn-warning">重置</button>
</div>
</div>

</div>
</fieldset>
</form>
<div class="row">
<div class="col-md-5 col-md-offset-2">
<div class="checkbox">
<label><input type="checkbox" onclick="changeFieldset(this.checked);">
同意协议许可</label>
</div>
</div>
</div>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航