html学习CSS之制作简单注册页面

 

今天学习了html 的表单和css 的一些简单属性。

表单常用属性:

from 包裹内容:

 action=url 

 method=get/post (默认是get方式传输)

input type=

{text:文本格式 (value值)

password:密码格式

select:下拉格式表单(附带属性 option)

radio:单选格式(name=同一个值)

checkbox:多选格式 (checked--显示默认内容)

<input type=“hidden”> 隐藏不要显示的内容

<input type=“submit”>提交按钮

<input type=“reset”>重置或清空

<input type=“file”>上传文件 (这里使用file。上面method那里一定要使用post传输模式,get默认大小字节)

<input type=“image”>图片

<textarea></textarea>(cols /rows属性)文本输入框

lable 快捷方式设定

</from>

HTML代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3c.org/tr/Xhtml/DTD/xhtml-transitional.dtd">
<html>
 <head>
   <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
   <title>幸福磨坊-->>会员中心-->>会员注册页面</title>
   <meta name="generator" content="幸福磨坊" />
   <meta name="keywords" content="幸福磨坊,会员中心" />
   <meta name="description" content="幸福磨坊-->>会员中心" />
   <link rel="stylesheet" type="text/css" href="zc.css" />   
 </head>
   <body>
   <center><div id="header">
    <div class="title">
          幸福磨坊----会员中心
    </div></div><center>
 <div id="kongbai"></div>
 <div id="kongbai"></div>
    <div id="leftsize">
     <table align="center">
   <form action="http://www.baidu.com/1.php" method="get" target="_black">
      <tr>
      <th>>nbsp;>nbsp;用户名:</th>
     <td><input type="text">*(可以使用中文,不可以使用[@],[.]以外的其他特殊符号)</td>
   </tr>
    <tr>
      <th>用户昵称:</th>
   <td class="te"><input type="text">*</td>
    </tr>
   <tr>
     <th>登录密码:</th>
      <td><input type="password">*</td>
   </tr>
   <tr>
     <th>确认密码:</th>
       <td><input type="password">*</td>
   </tr>
         <tr>
     <th>电子邮箱:</th>
       <td><input type="text" value="">*(一个电子邮件只能注册一个账号)</td>
   </tr>
        <tr>
     <th>安全问题:>nbsp;</th>
       <td><select>
       <option checked>没有安全问题</option>
       <option>我的名字叫什么?</option>
    <option>你的家乡叫什么?</option>
    <option>你读的小学叫什么?</option>
    <option>你的父亲叫什么?</option>
    <option>你的母亲叫什么?</option>
     </select>
      (忘记密码重置时需要)
      </td>
   </tr>
   <tr>
     <th>问题答案:>nbsp;</th>
       <td><input type="text"></td>
   </tr>
   <tr>
      <th>性>nbsp;>nbsp;>nbsp;>nbsp;别: </th>
     <td>
     <input type="radio" checked name="xingbie" value="boy">男
     <input type="radio" name="xingbie" value="girl">女
     <input type="radio" name="xingbie" value="baomi">保密
     </td>
   </tr>
   <tr>
     <th>注册协议:</th>
       <td><textarea name="xieyi" cols="40" rows="10">1、在本站注册的会员,必须遵守《互联网电子公告服务管理规定》,不得在本站发表诽谤他人,侵犯他人隐私,侵犯他人知识产权,传播病毒,政治言论,商业讯息等信息。
2、在所有在本站发表的文章,本站都具有最终编辑权,并且保留用于印刷或向第三方发表的权利,如果你的资料不齐全,我们将有权不作任何通知使用你在本站发布的作品。
3、在登记过程中,您将选择注册名和密码。注册名的选择应遵守法律法规及社会公德。您必须对您的密码保密,您将对您注册名和密码下发生的所有活动承担责任。</textarea></td>
    </tr>
     <tr>
      <td><input type="checkbox" checked>同意协议</td>
          </tr>
   <tr>
     <td colspan="2" align="center">
      <input type="submit" value="注册">
      <input type="reset" value="重置">
   </tr>
   </form>

  </table>
 
  </div>
  <div id="footer">
  Copyright >copy 幸福磨坊 .枫叶红秋雨制作. >copy http://127.0.0.1/em
  </div>
   </body>
</html>
CSS页面:
body{
   background:url(bodybj.jpg) no-repeat;
   font-size:12px;
  }
  table {
         width:900px;
   border:1px solid white;
         }
   #colo {
         color:red;
       }
   #leftsize th{
                  font-size:12px; 
     float:left;
     
   }
     #leftsize td{
                  font-size:12px; 
     float:left;
    
   }
   #header .title{
           height:50px;
     width:900px;
     border:1px solid white;
     font-size:20px;
     text-align:center;
     
     line-height:50px;
   }
   #kongbai{
            padding:3px; 
   }
   #footer{
           width:900px;
     border:1px;
     font-size:12px;
   }


已有 9 条评论
  1. Cheap Air Jordans

    I抦 not sure where you are getting your info, but great topic. I needs to spend some time learning much more or understanding more. Thanks for excellent information I was looking for this information for my mission.

    Cheap Air Jordans 回复
  2. Hex Bolts

    最近在学习CSS,掌握了他基本的格式。。。

    Hex Bolts 回复
  3. sprityaoyao

    不是,我是说你的代码样式,不是高亮。我看过了。单栏做的宽了不好看。最好是600px的。

    sprityaoyao 回复
  4. sprityaoyao

    你这个代码显示样式满不错的

    sprityaoyao 回复
  5. sprityaoyao

    加油哈,期待你的板子。你这个sharelist怎么没有向上突出那个特效呀?

    sprityaoyao 回复
  6. yzfe

    不会 学学下

    yzfe 回复
  7. 福清哥

    还没学过
    暂时纯支持

    福清哥 回复
  8. Utaoy

    对了,HTML5对表单有新的内容,虽然不是很实用,但这会正在学这个,可以了解一下

    Utaoy 回复
  9. 成龙

    纯html页面。

    成龙 回复
发表新评论