www.17rumen.com 一起入门视频教程下载

做一个网站，如果涉及到数据方面，特别是用户和网站之间数据交换 ，必须做一个

可以让用户输入信息 提交给服务器来接收处理。

例如 常见的就有 ： 用户登陆，注册，搜索 等等。

下面做一个 注册的页面，先看看 要做出来的效果吧。

就是这样的一个界面，如果按照传统的话，也许会使用 table 表格来划分成2列。

然后在表格里面输入信息进行排版。。

现在我们使用 label 和 input 来做这样一个界面，当然使用 DIV + CSS 来控制定义
整个页面样式。

===============================

好开始， 打开一个空白的网页，都是老习惯了，先写一个 div 。。

<div id="register">
</div>

然后写相关的 css 控制div 的大小 等等。

#register {
 width: 500px;
 border: 2px solid #eee;
}

高度先不定义， 还不知道 多少才适合，

然后就要开始写 用户注册 填写的表格了

<input type="text" name="username" value="" />
这是一个文本框， 在前面再写 label 提示输入什么信息。

<label>用户名：</label>

接着 就是 密码了

 <label>密码：</label>
 <input type="password" name="password" value="" />

加入 <br /> 进行换行

 <label>Email邮箱地址：</label>
 <input type="text" name="email" value="" /><br />

 <label>简介：</label>
 <textarea name="introduction"></textarea><br />

 <label>是否同意相关条款：</label>
 <input type="checkbox" /><br />

 <input type="submit" name="submitbutton" value="注 册" />

这样一个注册页面出来了，但是看上去很乱

=========================================

现在要写 css 来整理一下，首先是对齐方面的，提示信息放一边，
输入框放另外一边。

#register label{
 width: 140px;
 float: left;
 font-size: 14px;
 font-weight: bold;
 text-align: right;
}

统一输入框的 宽度 和 每个输入框上下距离。

input {
 width:180px;
 margin-bottom: 5px;
}
现在看上去 界面 已经美观很多了， 再做细一部 操作。

例如 textarea ,checkbox, submit 这些处理

textarea {
 width: 250px;
 height: 150px;
}
#chk {
 width: 15px;
}

#submitbutton {
 width: 90px;
 margin-left: 270px;
}

======================

基本上 完成了 界面部分。。。

一般如果是 checkbox 在label 加入 for 这个属性，这样点击 label的信息，
也会 进行选择

再加入 注册说明， 例如： 请输入注册信息

这样就完成了 一个注册页面。。

可以看到 注册页面的html代码 是相当简洁的。。

好了 视频就到这里，88

“div+css 10 使用 label input 编写注册表单 div css 代码演示”没有评论