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 ...
随机推荐
- SqlServer Function 实例
① sql server function 创建 这里使用一个计算年龄精确到分的function作为一个demo, create Function [dbo].[fn_GetAge] ( @BIRTH ...
- Java基础——环境变量（PATH）和类变量（CLASSPATH）
一.环境变量(PATH) 科普下,环境变量不是java的知识,是windows系统的环境变量. 下面请看怎么查看和修改windows的环境变量 在“我的电脑”右键属性进入后 点击“高级系统设置”(如下 ...
- android 打包工具
sdk.jar-修改路径-JarToDex-DexToSmali-复制文件
- Python爬虫：爬取糗事百科
网上看到的教程,但是是用正则表达式写的,并不能运行,后面我就用xpath改了,然后重新写了逻辑,并且使用了双线程,也算是原创了吧#!/usr/bin/python# -*- encoding:utf- ...
- RocketMQ学习笔记（11）----RocketMQ的PushConsumer和PullConsumer
1. PushConsumer 推,Broker主动向Consumer推消息,它Consumer的一种,应用通常向对象注册一个Listener接口,一旦接收到消息,Consumer对象立刻回调Lins ...
- Java用freemarker导出Word 文档
1.用Microsoft Office Word打开word原件: 2.把需要动态修改的内容替换成***,如果有图片,尽量选择较小的图片几十K左右,并调整好位置: 3.另存为,选择保存类型Word 2 ...
- win10x64位系统中nodejs的安装和配置
官网http://nodejs.cn/download/ 2.下载完成后点击安装包 下一步,安装过的,这里根据自己的需求选择.选择第直接正常安装. 这一步是安装的内容,第一个是安装所有的模块,建议全部 ...
- HDU1420 - Prepared for New Acmer
集训进行了将近2个礼拜,这段时间以恢复性训练为主,我一直在密切关注大家的训练情况,目前为止,对大家的表现相当满意,首先是绝大部分队员的训练积极性很高,其次,都很遵守集训纪律,最后,老队员也起到了很好的 ...
- 2015 Multi-University Training Contest 8 hdu 5384 Danganronpa
Danganronpa Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 131072/131072 K (Java/Others)Tot ...
- POJ2891 Strange Way to Express Integers (扩展欧几里德)
本文为博主原创文章,欢迎转载,请注明出处 www.cnblogs.com/yangyaojia 题目大意 求解一组同余方程 x ≡ r1 (mod a1) x ≡ r2 (mod a2) x ≡ r ...