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 ...
随机推荐
- Ubuntu下推荐安装软件
前言:都是全平台软件,通用性好. 1.搜狗输入法 官网下载: 不能双击.deb安装成功,需要安装依赖,可参考:https://www.cnblogs.com/chendeqiang/p/1017741 ...
- jquery中$each()
$.each():可用于遍历任何的集合(无论是数组或对象) $(selector).each():专用于jquery对象的遍历, 如果是数组,回调函数每次传入数组的索引和对应的值(值亦可以通过this ...
- 移动端 | Vue.js对比微信小程序基础语法
(1)vue 自定义组件与父组件的通信,props:[abb],可以看成自组建的一个自定义属性 (2)vue 模版语法{{}} 只能是在DOM中插入,<div>{{acc}}</di ...
- 用Latex做介绍自己和团队科研的网页
最近实验室师妹用网上的一些模板改了改做了几个网页.感觉还可以.但是实际上总觉得好像和韩家炜.周志华他们的页面差点什么. 最近找论文时发现奥地利的hornik老先生页面居然latex做的,然后找到了下面 ...
- Custom Hosting in IIS/WAS
常常需要与宿主实例进行交互.这对于使用自托管的方式是不可或缺的.当使用IIS或WAS时,不能直接访问宿主.为了克服这个障碍,WCF提供了一个宿主工厂.在.svc文件中使用Factory标签,使用此工厂 ...
- 在centos6.5上升级php-libxml版本到2.9.0
当前系统,软件版本说明: php libxml glibc 2.12 zlib xz-libs 需求: 应开发的需求,线上环境,php-libxml版本升级到2.8以上. 升级步骤:1.安装工具集 y ...
- hdu 1072 广搜（逃离爆炸迷宫）
题意: 在n×m的地图上,0表示墙,1表示空地,2表示人,3表示目的地,4表示有定时炸弹重启器.定时炸弹的时间是6,人走一步所需要的时间是1.每次可以上.下.左.右移动一格.当人走到4时如果炸弹的时间 ...
- 解决PL/SQL管理工具database下拉为空和登录出现ORA-12154
前言:昨天捣鼓了一下午,终于可以用plsql连接上oracle了... 测试环境:win10 注意问题: (一).环境变量 我发现按网上别人说的那一大推环境配置,很容易出错,我把它们全删了,就留了两个 ...
- 给iview组件select设置默认值
1.首先,给select加一个v-model,如: <Select v-model="exam_name" > <Option v-for="(item ...
- IDEA Maven 打包运行 jar java.io.FileNotFoundException: 问题？
当 使用 idea maven 将项目打包运行的时候,能够成功运行,但是总会跑到 xxx\xxx\lib 下 找jar包 如下异常: java.io.FileNotFoundException: D: ...