博客登录注册界面的实现

来源：头歌教学平台

本关编程要求：

在右侧编辑器Begin至End之间填充代码，实现博客的登陆注册界面。要求如下：

补全input标签的类和它的容器类。

测试说明

平台将对你编写的代码进行评测：

<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><title>登陆注册</title><link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.2/css/bootstrap.min.css"><script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script><script src="https://cdn.bootcss.com/bootstrap/3.3.2/js/bootstrap.min.js"></script><style>.login{width: 100%;background: #fff;padding: 10px 20px 20px 20px;border: 1px solid #000;margin-top: 40px;    }</style></head><body><div class="container"><div class="col-lg-4 col-md-4 col-ld-offset-4 col-md-offset-4"><div class="login"><h4>Educoder</h4><p>一个帮助你提升自我的网站</p><form><div class="form-group"><input type="text" class="form-control" name="username" placeholder="昵称"></div><div class="form-group"><input type="text" class="form-control" name="telephone" placeholder="手机"></div><!---------- Begin ----------><form class="from-horizontal"><div class="form-group"><input type="password" class="form-control " name="password" placeholder="密码"></div><!---------- End ----------><button name="submit" id="submit" class="btn btn-primary btn-block">立即注册</button></form></div></div></div></body>
</html>

重点知识：

表单组的基本结构

<form>
<div class="form-group">
<label for="username">用户名：</label>
<input type="text" class="form-control" id="username" placeholder="用户名">
</div>
</form>

说明：

输入框的容器类为.form-group，里面包裹 label标签和input标签；
input标签的类为.form-control，默认宽度为100%；
label标签的内容是input上面的提示信息，不需要的话，去掉label标签即可；

内联表单

给<form>元素添加类.form-inline即可。代码结构如下：

<form class="form-inline">
<div class="form-group">
<label for="username">用户名：</label>
<input type="text" class="form-control" id="username" placeholder="用户名">
</div>
<div class="form-group">
<label for="pwd">密码：</label>
<input type="password" class="form-control" id="pwd" placeholder="密码">
</div>
</form>

水平排列的表单

先给<form>元素添加类.form-horizontal，然后配合Bootstrap的栅格类来完成水平排列的表单。代码如下：

<form class="form-horizontal">
<div class="form-group">
<label for="username" class="col-md-2 control-label">用户名：</label>
<div class="col-md-3">
<input type="text" class="form-control" id="username" placeholder="用户名">
</div>
</div>
<div class="form-group">
<label for="password" class="col-md-2 control-label">密码：</label>
<div class="col-md-3">
<input type="text" class="form-control" id="password" placeholder="密码">
</div>
</div>
</form>

说明：

给label标签添加了类.col-md-2 .control-label，类col-md-2表示label标签占据2格，类.control-label是对label标签的内容进行一个排版；
给input标签嵌套了一个div，并添加类.col-md-3，表示input标签占据3格；

博客登录注册界面的实现相关推荐

【EduCoder答案】博客系统 - 登录注册界面
简介答案查询的入口网页版其他各类实训答案的目录见这里答案获取的方法简介见这里并不是所有的关卡都有答案,有些只有部分关卡有不要直接复制答案哦博客系统 - 登录注册界面 >>> ...
python实现用户登录注册界面_实现前后端登录注册界面
本篇博客讲解如何实现前后端的简单登录注册界面,后端代码由node.js实现,主要阐述登录注册时网页工作原理.感兴趣的同学可以参考一下. 注册界面功能: 判断用户是否输入邮箱,密码,验证密码(前端判断 ...
TCP聊天+传输文件服务器服务器套接字v2.6 - 登录注册界面更新 - loading界面应用
TCP聊天+传输文件服务器服务器套接字v2.6 更改的地方: 主要是客户端界面更改注册, 登录界面 (都知道啊, v1.8的改进后输入用户名, 到了主界面的时候才能输入密码, 但现在是直接输入用户名 ...
Android用户登录注册界面
用户登录注册界面开发及用户信息管理案例详解刚开始接触Android编程,这算是我写的第一个简单工程,主要功能有:用户登录.注册.注销.修改密码.记住密码共5个基本操作,其内容涉及到以下几点: 1:B ...
安卓登录注册界面开发(附源码)
源码下载和博客访问:安卓登录注册界面开发(附源码) 前言最近找安卓登录注册界面,找了好久也没找到比较满意的设计,最后想想其实登录和注册两个界面也不复杂,干脆花点时间自己弄. 界面预览最后的效果如下 ...
小编程（三）：用户登录注册界面开发及用户信息管理案例代码详解
用户登录注册界面开发及用户信息管理案例详解刚开始接触Android编程,这算是我写的第一个简单工程,主要功能有:用户登录.注册.注销.修改密码.记住密码共5个基本操作,其内容涉及到以下几点: 1:B ...
php mysql注册登录界面_php实现登录注册界面
php实现登录注册界面首先你要搭建一个自己的数据库我用wamp64创了一个people的数据库具体操作可以参考该搭建链接: 这里就讲下我实现的功能代码: 创建sql.func.php实现一些基本 ...
右侧按钮登录注册html,翻转式用户登录注册界面设计
这是一款非常实用的翻转式用户登录注册界面设计效果.该用户登录注册界面使用纯CSS3来制作,在用户点击登录和注册两个按钮时,登录和注册界面可以以水平翻转的方式来回切换,效果非常的酷. 制作方法 HTML ...
Android开发：登录/注册界面的编写
目录新建一个空项目(或Activity) 在xml中绘制登录界面关掉ActionBar 运行(最终效果图) 后记在实际开发中,几乎所有的APP都会涉及到用户注册/登录页面的制作,因此本文以And ...

博客登录注册界面的实现

来源：头歌教学平台

本关编程要求：

测试说明

重点知识：

表单组的基本结构

内联表单

水平排列的表单

博客登录注册界面的实现相关推荐

最新文章

热门文章