登录  /  注册
博主信息
博文 33
粉丝 0
评论 0
访问量 20083
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
bootstrap的form表单
马聪 15558002279的博客
原创
849人浏览过

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<!-- 可选的Bootstrap主题文件(一般不使用) -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"></script>

<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<title>注册页面表单</title>
</head>
<body>
	<h3 class="text-center">用户注册</h3>
<div class="container">
	<div class="row">
		<form action="" class="form-horizontal">
			<div class="form-group">
				<label for="user" class="col-sm-2 control-label">用户名:</label>
				<div class="col-sm-8">
					<input type="text" id="user" class="form-control" placeholder="输入用户名">
				</div>
			</div>

			<div class="form-group">
				<label for="password" class="col-sm-2 control-label">密码:</label>
				<div class="col-sm-8">
					<input type="password" id='password' class="form-control" placeholder="********">
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-2 control-label">爱好:</label>
				<div class="col-sm-8">
					<div class="checkbox-inline"><label><input type="checkbox" name="hobby[]">篮球</label></div>
					<div class="checkbox-inline"><label><input type="checkbox" name="hobby[]">足球</label></div>
					<div class="checkbox-inline"><label><input type="checkbox" name="hobby[]">排球</label></div>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-2 control-label">性别</label>
				<div class='col-sm-8'>
					<div class="radio"><label><input type="radio" name='sex' value=1>男</label></div>
					<div class="radio"><label><input type="radio" name='sex' value=2>女</label></div>
					<div class="radio"><label><input type="radio" name='sex' value=3>保密</label></div>
				</div>
			</div>
			<div class="form-group">
				<label for="bz" class="col-sm-2 control-label">备注:</label>
				<div class="col-sm-8">
				<textarea name="bz" id="bz" rows="5" class="form-control"></textarea>
				</div>
			</div>
			<div class="form-group">
				<div class="col-sm-4 col-sm-offset-2">
					<button class="btn btn-block btn-primary">提交</button>
				</div>
				<div class="col-sm-4">
					<button class="btn btn-block btn-info">重置</button>
				</div>
			</div>
		</form>
	</div>
</div>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例


批改状态:合格

老师批语:
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学