html注册表

最新推荐文章于 2023-10-16 21:23:18 发布
最新推荐文章于 2023-10-16 21:23:18 发布
阅读量3.3k 收藏 14
点赞数 5
分类专栏： HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Tszching_Leung/article/details/80709799
版权

效果图如下：

1、构思：
首先，这事一个表格结构的注册表，总体分为三部分，1.会员登录名和密码，2.姓名和联系方式，3.公司名称和主营业务；我们可以把表格分成表头，表身，表尾；用代码实现为：
先创建一个表格分成三部分： 
<table width="1000" align="center" cellpadding="10" cellspacing="0"><!--表格-->
  <thead>
  </thead>
    
  <tbody>
  </tbody>
 
  <tfoot>
  </tfoot>
 
</table>
说明：<table></table>标签创建出一个大的表格，其中<table>标签的几个重要的元素，width控制表格的宽度；align控制表格的对齐方式；cellpadding控制行中文字在表格中和表格上下边框的距离，cellpadding控制单元格之间的空白。
2、在表格里面使用几个重要的标签进行表格的分解
<tr> 绘制表格的行
<th>表头单元格，用来绘制表头，显示的字会比较大一点。
<td>绘制表格的列
<input>根据不同type属性，来创建文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。
<style>创建CSS样式
3、跨行跨列
如果需要将内容横跨多个行或列，使用 colspan属性来合并行，和 rowspan 属性来合并列。


最后完整代码如下： 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>day1注册页面</title>
    <script type="text/javascript">
        function msg(){
            alert("用户名检测完成");
        }
    </script>
     
    <style type="text/css">
        /**设置table颜色**/
        table,td,th{
            border:1px solid #F2F2F2;
        }
        /**最后的提交按钮**/
        #submitbutton{
            height:30px;
            width:100px;
            background-color:#00CD00;
            color:white;/**字体颜色**/
            font-size:20px;
             
        }
    </style>
</head>
<body>
    <table width="1000" align="center" cellpadding="10" cellspacing="0"><!--表格-->
        <thead><!-- 表头   -->
            <tr style="background:#F8F8FF" height="30"><!--tr  为行 -->
                <th align="left" colspan="3">1.会员登录名和密码</th><!-- th定义表头 -->
            </tr>
            <tr>
                <td width="120" align="right">
                    用户名：            
                </td>
                <td style="color:red">
                    <input type="text"> *
                </td>
                <td width="500" style="color:#1E90FF">
                    <input type="button" value="用户名检测" οnclick="msg()"/> 
                    5-15位，请使用英文(a-z、A-Z)、数字(0-9)
                     
                </td>
            </tr>
            <tr>
                <td width="120" align="right">
                    密码：
                </td>
                <td style="color:red">
                    <input type="text"/>*
                </td>
                <td width="500" align="left" style="color:#1E90FF">
                    5-15位，请使用英文(a-z)、数字(0-9)注意区分大小写：<br>
                    密码不能与登录名相同，易记，难猜
                </td>
            </tr>
            <tr>
                <td width="120" align="right">
                    再次输入密码：
                </td>
                <td style="color:red">
                    <input type="text"/>*
                </td>
                <td  width="500" style="color:#1E90FF">
                    两次输入密码必须一致
                </td>
            </tr>
        </thead>
             
             
        <tbody><!-- 表身 -->
            <tr style="background:#F8F8FF">
                <th align="left" colspan="3">2.姓名和联系方式</th>
            </tr>
            <tr>
                <td align="right">
                    真实姓名：
                </td>
                <td style="color:red">
                    <input type="text"/>*
                </td>
                <td>
                    <input type="radio" name="sex" value="先生"/>先生
                    <input type="radio" name="sex" value="女士"/>女士
                </td>
            </tr>
            <tr>
                <td align="right">
                    电子邮箱：
                </td>
                <td style="color:red">
                    <input type="email"/>*
                </td>
                <td>
                    <h style="color:red">非常重要！</h><br/>
                    <h style="color:#1E90FF">这是客户与您联系的首选方式，请一定填写真实。</h>
                </td>
            </tr>
            <tr>
                <td align="right">
                    固定电话：
                </td>
                <td style="color:red">
                    <input type="text"/>*
                </td>
                <td style="color:#1E90FF">
                    区号+电话号码
                </td>
            </tr>
            <tr>
                <td align="right">
                    公司所在地：
                </td>
                <td  colspan="2">
                    <select style="width:70px;height:25px">
                        <option>北京</option>
                        <option>广州</option>
                        <option>湛江</option>
                        <option>长沙</option>
                    </select>
                    <select style="width:70px;height:25px">
                        <option>北京</option>
                        <option>广州</option>
                        <option>湛江</option>
                        <option>长沙</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td align="right">
                    街道地址：
                </td>
                <td colspan="2" style="color:red">
                    <input type="text" style="height:20px;width:500px"/>*
                    <h style="color:#1E90FF">填写县区门牌号</h>
                </td>
            </tr>
            <tr>
                <td align="right">
                    传真号码：
                </td>
                <td colspan="2">
                    <input type="tel"/>
                </td>
            </tr>
            <tr>
                <td align="right">
                    手机号码：
                </td>
                <td colspan="2">
                    <input type="tel"/>
                </td>
            </tr>
            <tr>
                <td align="right">
                    邮政编码：
                </td>
                <td colspan="2">
                    <input type="text"/>
                </td>
            </tr>
        </tbody>
         
         
        <tfoot><!-- 表尾 -->
            <tr style="background:#F8F8FF">
                <th align="left" colspan="3">3.公司名称和主营业务</th>
            </tr>
            <tr>
                <td align="right">
                    贵公司名称：
                </td>
                <td style="color:red">
                    <input type="text"/>*
                </td>
                <td style="color:#1E90FF">
                    请填写在工商局注册的公司/商号全称；<br/>
                    无商号的个体经营者填写执照上的姓名，如：张三（个体经营）
                </td>
            </tr>
            <tr>
                <td align="right">
                    你的职位：
                </td>
                <td style="color:red">
                    <input type="text"/>*
                </td>
                <td>
                     
                </td>
            </tr>
            <tr>
                <td align="right">
                    主营行业：
                </td>
                <td>
                    <select>
                        <option>电子电工</option>
                        <option>学生</option>
                        <option>工程师</option>
                    </select>
                </td>
                <td style="color:#1E90FF">
                    请正确选择，您会收到该行业、该产品的供求信息
                </td>
            </tr>
            <tr>
                <td align="right">
                    主营产品/服务：
                </td>
                <td colspan="2" style="color:red">
                    <input type="text"/>*
                    <h style="color:#1E90FF">3个主要相关产品名/服务名，最少要填一个。例如：太阳帽、布料、拉链</h>
                </td>
            </tr>
            <tr>
                <td align="right">
                    公司网址：
                </td>
                <td colspan="2">
                    <input type="url" style="height:18px;width:300px"/>
                </td>
            </tr>
            <tr>
                <td>
                     
                </td>
                <td colspan="2">
                    <input type="submit" id="submitbutton" value="确认提交"/>
                </td>
            </tr>
        </tfoot>>
    </table>
</body>
</html>

睡觉也能赚钱
关注
  • 5
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html修改注册表解密
11-12
html修改注册表解密html修改注册表解密html修改注册表解密
登录和注册表单的11个HTML最佳实践
JudyC的博客
07-25 945
大多数网站都有登录或注册表单;它们是业务转换的关键部分。然而，即使是流行的站点也没有实现本文中提到的11个最佳实践，并且至少有一个错误。所以，阅读这篇文章，然后检查你的表单，并通过使用HTML技术来改善你的用户体验。
HTML 简单的前端登录注册页面
一起去抓水母的博客
02-02 8891
刚开始学前端的时候照着视频写了一个比较简单的注册页面，只有html， 还没有用到css。 效果图 （为以防运行失败，加背景的语句不在代码里） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>注册</title> </head...
HTML5 CSS登录注册表单界面示例源码
热门推荐
qq_17240471的博客
11-28 4万+
先上图 高质量前端技术交流，有问必答q群：579720104 html &lt;!DOCTYPE html&gt; &lt;html lang="zh"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta http-equiv="X-UA-Compatible" content="IE=edge,
aspnet登录界面代码_【原创技术分享】HTML简易登录注册表单制作
weixin_39867594的博客
11-22 951
HTML简易登陆注册表单制作登录页面在日常生活中十分常见。制作登录页面首先构思页面中想要哪些组成部分，可以打一个草稿，例如下图。在html文件中的标签下写入这些内容。(由于登录框和注册框结构类似，下图只展示登录框的代码。注册框同理，放在另一个id=”signup”的中，并且与登录框一同包含在类名为box的标签内)完成之后在浏览器中查看效果。(图中使用浏览器为Chrome)然而在理想的效果...
html 基础指令之注册表
DK_one的博客
07-27 803
html基础指令
HTML做一个注册表单
qq_63825941的博客
05-17 1744
【代码】HTML做一个注册表单。
编写注册表单 HTML
一七
03-28 3318
通过编写一个注册页学习 HTML 表单学习如何控制人们在表单中可以输入的数据类型，以及使用一些新的 CSS 工具装饰页面
HTML注册表单
skudhdk的博客
10-16 281
编写一个HTML网页，在网页中显示一个注册表单，包括“用户名”、“密码”、“确认密码”、“QQ号码”、“电子邮箱”五个文本框或密码框，以及如下所示图片按钮。(5) 电子邮箱必须合法（即至少包含一个'@'字符和一个'.'字符）且不能为空；(1) 用户名不能为空，且只能是6-14位字符串；(2) 密码不能为空，且只能是6-14位字符串；(6) 用户在单击图片按钮时，实现表单提交功能。(4) QQ号码必须为数字且不能为空；(3) 两次输入的密码必须一致；
HTML用户注册表单
2201_75588145的博客
07-22 479
【代码】HTML用户注册表单。
注册表使用大全（html版）
08-02
比较详尽的注册表使用说明书，window用户居家旅行必备
简约清爽的HTML登陆/注册模板
04-13
简约清爽的HTML登陆页面 源码下载 稍作修改也可用作注册页面 不需要积分哦 赶快下载吧
html注册表基本格式和相关控件代码
02-25
日常练习
HTML.rar_html更改注册表_html注册页面
09-23
HTML页面修改注册表解密(CHM)，内涵ActiveX技术综述
Formulario_cadastro_DEVS:使用HTML和CSS开发的新开发者注册表
05-04
Registration_of_Devs 使用HTML和CSS开发的新开发者注册表
HTML页面修改注册表解密
04-26
这是对通过在HTML页面修改注册表的一些手段的解密
2010考研管理类联考综合能力答案解析.pdf
最新发布
04-24
考研管理类联考综合能力答案解析，考研真题，考研历年真题，考研管理类联考历年真题，真题解析。
NumPy Matplotlib Matplotlib 是 Python 的绘图库 .zip
04-24
matplotlib绘图 通过 Matplotlib，开发者可以仅需要几行代码，便可以生成绘图、直方图、功率谱、条形图、错误图、散点图等。 Matplotlib基础知识 1.Matplotlib中的基本图表包括的元素 x轴和y轴 水平和垂直的轴线 x轴和y轴刻度 刻度标示坐标轴的分隔，包括最小刻度和最大刻度 x轴和y轴刻度标签 表示特定坐标轴的值 绘图区域 实际绘图的区域 2.hold属性 hold属性默认为True，允许在一幅图中绘制多个曲线；将hold属性修改为False，每一个plot都会覆盖前面的plot。 但是不推荐去动hold这个属性，这种做法（会有警告）。因此使用默认设置即可。 3.网格线 grid方法 使用grid方法为图添加网格线 设置grid参数（参数与plot函数相同） .lw代表linewidth，线的粗细 .alpha表示线的明暗程度 4.axis方法 如果axis方法没有任何参数，则返回当前坐标轴的上下限 5.xlim方法和ylim方法 除了plt.axis方法，还可以通过xlim，ylim方法设置坐标轴范围
毕业设计：基于微信小程序大学校园二手教材与书籍拍卖系统（源码 + 数据库 + 说明文档）
04-24
毕业设计：基于微信小程序大学校园二手教材与书籍拍卖系统（源码 + 数据库 + 说明文档） 毕业设计：基于微信小程序大学校园二手教材与书籍拍卖系统（源码 + 数据库 + 说明文档） 第二章 需求分析 4 2.1可行性分析 4 2.1.1技术的可行性 4 2.1.2经济的可行性 4 2.1.3操作可行性 4 2.2需求调研 4 第三章 数据库设计 6 3.1数据库的分析与设计 6 3.1.1数据库的概念结构设计 6 3.1.2数据表的逻辑结构设计 7 第四章 系统功能实现 8 4.1 系统后台界面 8 4.2书籍类别管理 8 4.3 书籍信息界面 9 4.4竞拍管理界面 9 4.5 微信小程序首页 9 4.6书籍信息添加 10 4.7书籍竞拍界面 11 4.8用户后台界面 11 第五章 系统测试 12 5.1 系统测试的意义 12 5.2 系统测试的内容 12 5.3系统测试结果 12 总结 13
tmooc html注册表
11-12
很抱歉，我没有找到“tmooc html注册表”的相关信息。不过，我可以为您介绍HTML表单的相关知识，希望能对您有所帮助。 HTML表单是一种用于收集用户输入数据的标准方法。表单通常包含输入字段、单选框、复选框、提交按钮等元素。用户可以在表单中输入数据并将其提交到服务器进行处理。以下是一个简单的HTML表单示例： ```html <form action="/submit-form" method="post"> <label for="name">Name:</label> <input type="text" id="name" name="name"><br><br> <label for="email">Email:</label> <input type="email" id="email" name="email"><br><br> <label for="password">Password:</label> <input type="password" id="password" name="password"><br><br> <input type="submit" value="Submit"> </form> ``` 在上面的示例中，`<form>`元素定义了一个表单，`action`属性指定了表单提交的URL地址，`method`属性指定了提交方式（可以是GET或POST）。表单中包含了三个输入字段（姓名、电子邮件和密码），每个字段都有一个`<label>`元素和一个`<input>`元素。`<input>`元素的`type`属性指定了输入字段的类型，例如`text`表示文本输入字段，`email`表示电子邮件输入字段，`password`表示密码输入字段。最后，表单中还包含了一个提交按钮，用户点击该按钮后表单数据将被提交到服务器进行处理。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值