HTML&CSS——网站注册页面
1、表单标签
所有需要提交到服务器端的表单项必须使用<form></form>括起来！
form 标签属性： action,整个表单提交的位置(可以是一个页面，也可以是一个后台 java 代码)
method,表单提交的方式(get/post/delete……等 7 种)
Get 与 post 提交方式的区别？【默认提交方式为 get】
Get 提交方式，所有的内容显示在地址栏，不够安全，长度有限制。
Post 提交方式，所有的内容不会显示在地址栏，比较安全，长度没有限制。
1）文本输入项
<input type=”text” name=”” size=”” maxlenght=”” readonly=”” placehoder=””/>
name设置交到服务端必须指定的属性，其值可以任意，建议见文知意
size指定输入框的宽度
maxlenght指定输入内容的长度
readonly设置为只读
placehoder设置输入内容的提示信息
2）密码输入项
<input type=”password” name=”” />
3）单选按钮
<input type=”radio” name=”” value=”” checked=””/>
name设置分组
value设置提交到服务端必须指定的属性，其值可以任意，建议见文知意
checked设置默认选中
4）多选按钮
<input type=”checkbox” name=”” value=”” checked=”” />
5）下拉列表
<select name=””>
<option value=”” selected=””>北京</option>
<option>上海</option>
</select>
name设置分组
value设置提交到服务端必须指定的属性， 其值可以任意，建议见文知意
selected默认选中
6）文件上传项
<input type=”file” name=””/>
7）文本输入域
<textarea name=””></textarea>
8）提交按钮
<input type=”submit” value=””/>
submit具备将整个表单提交到服务器的功能
value修改按钮上面的内容
9）普通按钮
<input type=”button” value=””/>
10）重置按钮
<input type=”reset” value=””/>
11）隐藏项
<input type=”hidden” name=””/>
用于用户比较敏感的一些信息。
2、实现以下网站注册页面样式：
步骤分析：
1）创建一个五行一列的表格，然后分别对每一行进行实现
2）第一二四五行，和前面网站首页显示页面一样，直接复制过来，不再赘述
3）第三行放置一个表单，通过表格标签进行布局。
3、代码演示如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注册页面</title>
</head>
<body>
<table border="1px" align="center" width="1300px" cellpadding="0px" cellspacing="0px"> <!--1.logo部分-->
<tr>
<td>
<!--嵌套一个一行三列的表格-->
<table border="1px" width="100%">
<tr height="50px">
<td width="33.3%">
<img src="../img/logo2.png" height="47px" />
</td>
<td width="33.3%">
<img src="../img/header.png" height="47px"/>
</td>
<td width="33.3%">
<a href="#">登录</a>
<a href="#">注册</a>
<a href="#">购物车</a>
</td>
</tr>
</table>
</td>
</tr> <!--2.导航栏部分-->
<tr height="50px" >
<td bgcolor="black">
<a href="#"><font size="3" color="white">首页</font></a>
<a href="#"><font color="white">手机数码</font></a>
<a href="#"><font color="white">电脑办公</font></a>
<a href="#"><font color="white">鞋靴箱包</font></a>
<a href="#"><font color="white">家用电器</font></a>
</td>
</tr> <!--3.注册表单-->
<tr>
<td height="600px" background="../img/regist_bg.jpg">
<!--嵌套一个十行二列的表格-->
<form action="#" method="get" name="regForm">
<table border="1px" width="750px" height="400px" align="center" cellpadding="0px" cellspacing="0px" bgcolor="white">
<tr height="40px">
<td colspan="2">
<font size="4">会员注册</font> USER REGISTER
</td>
</tr>
<tr>
<td>用户名</td>
<td>
<input type="text" name="user" size="35px"/>
</td>
</tr>
<tr>
<td>密码</td>
<td>
<input type="password" name="password" size="35px"/>
</td>
</tr>
<tr>
<td>确认密码</td>
<td>
<input type="password" name="repassword" size="35px" />
</td>
</tr>
<tr>
<td>E-mail</td>
<td>
<input type="text" name="e-mail" size="35px" />
</td>
</tr>
<tr>
<td>姓名</td>
<td>
<input type="text" name="username" size="35px"/>
</td>
</tr>
<tr>
<td>性别</td>
<td>
<input type="radio" name="sex" value="男"/>男
<input type="radio" name="sex" value="女"/>女
</td>
</tr>
<tr>
<td>出生日期</td>
<td>
<input type="text" name="birthday" size="35px"/>
</td>
</tr>
<tr>
<td>验证码</td>
<td>
<input type="text" name="yzm" />
<img src="../img/yanzhengma.png" />
</td>
</tr>
<tr align="center">
<td colspan="2">
<input type="submit" value="注册" />
</td>
</tr>
</table>
</form>
</td>
</tr> <!--4.广告图片-->
<tr>
<td>
<img src="../img/footer.jpg" width="100%"/>
</td>
</tr> <!--5.友情链接和版权信息-->
<tr>
<td align="center">
<a href="#"><font>关于我们</font></a>
<a href="#"><font>联系我们</font></a>
<a href="#"><font>招贤纳士</font></a>
<a href="#"><font>法律声明</font></a>
<a href="#"><font>友情链接</font></a>
<a href="#"><font>支付方式</font></a>
<a href="#"><font>配送方式</font></a>
<a href="#"><font>服务声明</font></a>
<a href="#"><font>广告声明</font></a>
<p>
Copyright © 2005-2016 hh商城 版权所有
</p>
</td>
</tr>
</table>
</body>
</html>
在浏览器内运行，效果如网站注册页面演示一样。
HTML&CSS——网站注册页面的更多相关文章
- HTML&CSS基础学习笔记1.22-简单的注册页面
一个简单的注册页面 表单提交是前后端数据交互的一种方式. 代码区是一个注册页面,其中包含了以下标签:<form>.<table>.<input>.<butto ...
- 微信小程序相关二、css介绍，菜单制作，表单相关，京东注册页面
一.第二天上午 1.1上午因为有其他的课所以没有去这个课,不过下午看复习的时候的概括,讲了DTD,语法特性,css选择器以及权重,还有一些简单的样式 1.2 DTD Docuement Type 声明 ...
- HTML+CSS+JS设计注册页面
HTML实战--设计一个个人信息填写界面 应用的技术:HTML+CSS+JS CSS和JS是套用的模板,主要练习了表单的验证和正则表达式的使用 效果图: 代码: <!DOCTYPE html&g ...
- CSS注册页面案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 注册页面css版本
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- 如何在nopcommerce3.3注册页面添加密码强度检查仪？
我刚刚完成了nopCommerce注册页面的密码强度检查仪,因为我觉得在电子商务交易平台,安全问题是非常重要的.在注册页面有必要添加一个密码强度检测仪,以便通知用户他们的密码是否足够强大.今天,大多数 ...
- HTML简单登录和注册页面及input标签诠释
今天第一次接触HTML这种语言,虽然不能完全理解其中的意思,过去学的英语单词几乎也忘了差不多了,但是感觉进入这门语言学习之后就没有那么难了,一步一步来吧!下面巩固下今天学内容: HTML是一种超文本标 ...
- CSS网站框架及样式命名规范
CSS网站框架 复位:reset.css 基础:base.css 或 basic.css (字体大小.颜色.背景.行高.列表样式.按钮样式.表格样式等等) 布局:layout.css (非结构的布局) ...
- CSS补充之--页面布局、js补充，dom补充
CSS补充之--页面布局 主站一:(下面是一个大致的模板) <div class="pg-header"> <div style="width: 120 ...
随机推荐
- T7315 yyy矩阵折叠(长)
题目背景 全场基本暴零 题目描述 输入输出格式 输入格式: 如图 输出格式: 如图 输入输出样例 输入样例#1: 2 2 1 -2 3 -4 输出样例#1: 4 输入样例#2: 2 5 1 -2 -3 ...
- Ubuntu 16.04 Go环境搭建 Go环境+Sublime配置
Ubuntu 16.04 Go环境搭建 Go环境+Sublime配置 1. 安装Go 下载地址https://golang.org/dl/ (需要翻下) 下载到类似go1.8.3.linux-amd6 ...
- 给大家介绍几个常见的Android代码片段
今天在源码天堂那个网站,也下载了一个不错的Android源码特效,现在分享一下给博客园的朋友吧,个人觉得那个网站还是挺不错的,希望大家能够使用得上. 仿美图秀秀拼图功能源码 仿美图秀秀拼图功能源码,最 ...
- 如何在ZBrush 4R7中设置背面遮罩
ZBrush 4R7中的背面遮罩是如何来设置的?当我们在进行ZBrush雕刻创作的时候,经常会不经意的雕刻到背面的物体,那么,如何防止背面的物体不被雕刻到,这就需要设置下背景遮罩了. ZBrush 4 ...
- webpack——entry，output,plugins,loader,chunk知识
entry:打包入口 代码的入口,找到依赖模块 打包的入口,webpack去哪个文件找依赖,或是去那个文件依赖的依赖 可以是一个或者多个入口 例如: 1.module.exports={ entry: ...
- sklearn学习5-----模型评估(1) 分类度量
一.分类度量 1.混淆矩阵: 2.classification_report 3.汉明损失 4.jaccard相似系数得分 5.准确率.召回率和F_measure 3.
- 题解 P3978 【[TJOI2015]概率论】
这道题...好像是第一道我自己切出来的黑题... 先说一句,牛顿二项式蒟蒻并不会,可以说是直接套结论. 求诸位老爷轻喷. 这道题用卡特兰数搞. 卡特兰数这玩意从普及组初赛一路考到省选,十分有用. 如果 ...
- 异构关系数据库（Sqlserver与MySql）之间的数据类型转换参考
一.SqlServer到MySql的数据类型的转变 编号 SqlServer ToMySql MySql 1 binary(50) LONGBLOB binary 2 bit CHAR(1) bit ...
- 【BZOJ 1305】[CQOI2009]dance跳舞
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 男生和女生每个人都分身成两个节点 即x[1],x[2]和y[1],y[2] 然后如果i和j不相互喜欢 那么add(x[i][2],y ...
- 【codeforces 229C】Triangles
[题目链接]:http://codeforces.com/problemset/problem/229/C [题意] 给你一张完全图; 然后1个人从中选择m条边; 然后另外一个人从中选择剩余的n*(n ...