制作一个注册表单页面
制作一个表单注册页面
在Dreamweaver中创建一个.html文件,添加一个11行2列的表格,左侧的内容是手动输入(第一行也手动输入),右侧的内容是用代码来写的(最后一行也是用代码来写)(用代码写的原因是,不会用Dreamweaver操作)
表单页面的处理
(1)制作注册表单代码如下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>注册页面</title>
<style type="text/css">
<!--
body {font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;background: #42413C;margin: 0;padding: 0;color: #000;
}/* ~~ 元素/标签选择器 ~~ */
ul, ol, dl { /* 由于浏览器之间的差异,最佳做法是在列表中将填充和边距都设置为零。为了保持一致,您可以在此处指定需要的数值,也可以在列表所包含的列表项(LI、DT 和 DD)中指定需要的数值。请注意,除非编写一个更为具体的选择器,否则您在此处进行的设置将会层叠到 .nav 列表。 */padding: 0;margin: 0;
}
h1, h2, h3, h4, h5, h6, p {margin-top: 0; /* 删除上边距可以解决边距会超出其包含的 div 的问题。剩余的下边距可以使 div 与后面的任何元素保持一定距离。 */padding-right: 15px;padding-left: 15px; /* 向 div 内的元素侧边(而不是 div 自身)添加填充可避免使用任何方框模型数学。此外,也可将具有侧边填充的嵌套 div 用作替代方法。 */
}
a img { /* 此选择器将删除某些浏览器中显示在图像周围的默认蓝色边框(当该图像包含在链接中时) */border: none;
}
/* ~~ 站点链接的样式必须保持此顺序,包括用于创建悬停效果的选择器组在内。 ~~ */
a:link {color: #42413C;text-decoration: underline; /* 除非将链接设置成极为独特的外观样式,否则最好提供下划线,以便可从视觉上快速识别 */
}
a:visited {color: #6E6C64;text-decoration: underline;
}
a:hover, a:active, a:focus { /* 此组选择器将为键盘导航者提供与鼠标使用者相同的悬停体验。 */text-decoration: none;
}/* ~~ 此固定宽度容器包含其它 div ~~ */
.container {width: 960px;background: #FFF;margin: 0 auto; /* 侧边的自动值与宽度结合使用,可以将布局居中对齐 */
}/* ~~ 标题未指定宽度。它将扩展到布局的完整宽度。标题包含一个图像占位符,该占位符应替换为您自己的链接徽标 ~~ */
.header {background: #ADB96E;
}/* ~~ 这是布局信息。 ~~ 1) 填充只会放置于 div 的顶部和/或底部。此 div 中的元素侧边会有填充。这样,您可以避免使用任何“方框模型数学”。请注意,如果向 div 自身添加任何侧边填充或边框,这些侧边填充或边框将与您定义的宽度相加,得出 *总计* 宽度。您也可以选择删除 div 中的元素的填充,并在该元素中另外放置一个没有任何宽度但具有设计所需填充的 div。*/.content {padding: 10px 0;
}/* ~~ 脚注 ~~ */
.footer {padding: 10px 0;background: #CCC49F;
}/* ~~ 其它浮动/清除类 ~~ */
.fltrt { /* 此类可用于在页面中使元素向右浮动。浮动元素必须位于其在页面上的相邻元素之前。 */float: right;margin-left: 8px;
}
.fltlft { /* 此类可用于在页面中使元素向左浮动。浮动元素必须位于其在页面上的相邻元素之前。 */float: left;margin-right: 8px;
}
.clearfloat { /* 如果从 #container 中删除或移出了 #footer,则可以将此类放置在 <br /> 或空 div 中,作为 #container 内最后一个浮动 div 之后的最终元素 */clear:both;height:0;font-size: 1px;line-height: 0px;
}
.container .content table tr td {text-align: center;
}
-->
</style></head><body><div class="container"><div class="header"><a href="#"><img src="../-4d42e892d4bfcb98.jpg" alt="在此处插入徽标" name="Insert_logo" width="150" height="150" id="Insert_logo" style="background: #C6D580; display:block;" /></a> <!-- end .header --></div><div class="content"><!-- end .content --><form action="userRegister_process.php" method="post" name = "form1" id = "form1"><table width="900" border="5"><tr><td colspan="2">用户注册</td></tr><tr><td width="187">用户名</td><td width="689"><input name = "user" type = "text" value="Amy" size = "12"/></td></tr><tr><td>密 码</td><td><input name = "password" type = "password" value="123456" size = "12"/></td></tr><tr><td>性 别</td><td><input name = "sex" type = "radio" value="male" />男<input name = "sex" type = "radio" value="female" checked = "checked"/>女</td></tr><tr><td>出生年月日</td><td> <input name = "birthday" type = "text" value="2004-05-21"size = "25" />(例如2004-05-21)</td></tr><tr><td>兴趣爱好</td><td><input name = "hobby[]" type = "checkbox" value="看书" checked />看书<input name = "hobby[]" type = "checkbox" value="听音乐" checked />听音乐<input name = "hobby[]" type = "checkbox" value="运动" checked />运动<input name = "hobby[]" type = "checkbox" value="看电影" checked />看电影<input name = "hobby[]" type = "checkbox" value="购物" checked />购物</td></tr><tr><td>专 业</td><td><select name = "major" id = "major"><option value = "信息管理与信息系统" >信息管理与信息系统</option><option value = "会计" >会计 </option><option value = "英语"selected >英语 </option><option value = "商务英语" >商务英语 </option></select></td></tr><tr><td>喜欢的课程</td><td><select name = "course[]" id = "course[]"size = "4" multiple><option value = "社会心理学" >社会心理学</option><option value = "市场营销" >市场营销 </option><option value = "英语笔译" >英语笔译 </option><option value = "英语口译" >英语口译 </option></select></td></tr><tr><td>个人照片</td><td><input name = "zhaopian" type = "file" id = "zhaopian" size = "18"/></td></tr><tr><td>个人简介</td><td><textarea name = "jianjie" cols = "20" rows = "4" id = "jianjie" wrap = "hard">我这个人很懒,什么都不想写!!!</textarea></td></tr><tr><td colspan="2" align="center"><input name = "userid" type = "hiden" value = "001" /> <input name = "tj_btn" type = "submit" id = "tj_btn" value = "提交" /> <input name = "cz_btn" type = "reset" id= "tj_btn" value = "重置" /> <input name = "pt_btn" type = "button" id = "pt_btn" value = "按钮" /> <input type = "image" src = "search2.jpg" name = "button3" id = "button3" /> </td></tr></table></form></div><div class="footer"><p><strong>感谢您的到来!!</strong></p><!-- end .footer --></div><!-- end .container --></div>
</body>
</html>
(2)表单页面处理的代码
<?phpecho"您的用户名是:".$_POST["user"]."<br>";echo"您的密码是:".$_POST["password"]."<br>";echo"您的性别是:".$_POST["sex"]."<br>";echo"您的出生年月是:".$_POST["birthday"]."<br>";echo"您的兴趣是:";for($i = 0;$i < count($_POST[hobby]);$i++){echo $_POST[hobby][$i]." ";}echo"<br>您的专业是:".$_POST["major"]."<br>";echo"您喜欢的课程是:";for($i = 0;$i < count($_POST[course]);$i++){echo $_POST[course][$i]." ";}echo"<br>您的照片:".$_POST["zhaopian"]."<br>";echo"您的简介:".$_POST["jianjie"]."<br>";echo"您的编号是:".$_POST["userid"]."<br>";?>
刚开始“喜欢 的课程”那里表单元素的名字course有几个地方写错成cuorse,表单处理页面“您喜欢的课程:”后面没有内容出现。找了好久的错误······o(╥﹏╥)o
制作一个注册表单页面相关推荐
- 前端HTML基础小练习-制作一个相亲表单
前端HTML基础-制作一个相亲表单 初学前端的一个小练习 涉及知识:HTML,CSS 编译环境:Hbuilder 实现效果: 实现代码: <!DOCTYPE html> <html& ...
- 使用php创建一个注册表单,如何实现一个简单的注册表单
创建一个注册表单是非常容易的 - 它事实上意味着,你只需要创建一个表单,表单将更新一些User的模型对象(这个例子是一个Doctrine实体)并保存它. 受欢迎的FOSUserBundle 提供了一个 ...
- 如何制作一个注册表文件
1.制作一个注册表文件首先要了解注册表的格式:(可先去导出一个注册表文件,用记事本打开做为参照) 第一行:REGEDIT4 或是Windows Registry Editor Version 5.00 ...
- 购物车的制作 与注册表单验证
购物车的制作 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...
- 一个html表单页面
1.html表单的提交: <form action="" method= ""> </form> action属性设置提交的服务器地址 ...
- 怎么用php制作会员注册表单,帝国CMS前台会员登陆表单的制作教程
登陆表单变量说明 变量名 例子 登陆表单提交地址 /e/enews/index.php 用户名输入框变量 username 密码输入框变量 password 登陆信息保存时间 lifetime 单位为 ...
- 【网页制作】注册表单页
- html注册表单用户体验,入口的用户体验!注册表单的设计技巧
网上挤满了各种各样的UI设计方案,事实上我们已经有一套套的方案可遵循.但!设计永无止境!哪怕是一个注册表单,也值得再细心研究.下面给出注册表单设计5个小技巧: 1.别让用户重复填写相同的内容 几乎每个 ...
- html表单注册跳转页面,出现一个问题,点击“注册”按钮页面进入注册表单后自动跳转回登录页面...
源自:4-5 单页面应用Demo2(2) 出现一个问题,点击"注册"按钮页面进入注册表单后自动跳转回登录页面 用户名: 密码: 登录 注册 用户名: 密码: 再次输入密码: 确定 ...
最新文章
- 各类常见的网站检查工具
- ScrollView的基本用法丶代理方法
- (Java集合框架)集合框架概述和Collection常用功能及遍历
- python亲和性分析法推荐电影论文_关于《Python数据挖掘入门与实战》读书笔记二(亲和性分析)...
- Linux设备模型(总结)
- 1682: [Usaco2005 Mar]Out of Hay 干草危机
- 非对称加密, 助记词, PIN, WIF
- web.csproj Compile 下出现两个同名 xxx.cs 项目中出现两个xxx.cs
- Python命令行神器 Click 入门笔记
- metasploit下载教程linux,Ubuntu下安装Metasploit
- 关于8086七种寻址方式的练习
- CSS代码实现背景透明文字不透明
- PreparedStatement 防止 SQL 注入原理
- 向量误差修正(VECM)模型案例分析
- 电力系统三相短路计算机计算报告,电力系统分析三相短路计算习题.doc
- 大一python实验二答案_python实验二
- 【国际禁毒日】和TcaplusDB一起向毒品say NO!
- echart柱状图堆叠总计显示
- 使用Arduino Tone()函数演奏旋律
- 流程变革,从推倒三座大山开始