H5 注册表单form 百度注册表单 写一个注册页面，若格式不整齐可以结合table

最新推荐文章于 2021-12-03 22:20:32 发布
最新推荐文章于 2021-12-03 22:20:32 发布
阅读量1.5k 收藏 4
点赞数 1
分类专栏： H5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42467563/article/details/83097272
版权
练习 同时被 2 个专栏收录
201 篇文章 8 订阅
订阅专栏
H5
59 篇文章 0 订阅
订阅专栏

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <!--<form> 
            用户名<input type="text" placeholder="请设置用户名"/><br />
            手机号<input type="tel" placeholder="可用于登录和找回密码" /><br />
            密码<input type="password" placeholder="请设置登录密码" /><br />
            验证码<input type="text" placeholder="请输入验证码" /><input type="submit" value="获取短信验证码" /><br />
            <input type="checkbox"/>阅读并接受《百度用户协议》及《百度隐私权保护声明》<br />
            <input type="submit" value="注册"/>
        </form>-->
        <table border="0" bordercolor="black" cellspacing="0">
            <tr>
                <td>用户名</td>
                <td><input type="text" placeholder="请设置用户名" style="width:400px;height:30px"/></td>
                                
            </tr>
            
            
            <tr>
                <td>手机号</td>
                <td><input type="tel" placeholder="可用于登录和找回密码" style="width:400px;height:30px" /></td>
                    
            </tr>
            
            
            <tr>
                <td align="right">密码</td>
                <td><input type="password" placeholder="请设置登录密码"  style="width:400px;height:30px"/></td>
                
            </tr>
            
            
            <tr>
                <td>验证码</td>
                <td><input type="text" placeholder="请输入验证码" style="width:200px;height:30px"/>&nbsp;&nbsp;<input type="submit" value="获取短信验证码" style="width:190px;height:35px"/></td>
                
            </tr>
            
            
            <tr height="30">
                <td></td>
                <td><input type="checkbox" /><font size="0.5">阅读并接受<font color="blue">《百度用户协议》</font>及<font color="blue">《百度隐私权保护声明》</font></font></td>
                
            </tr>
            
            
            <tr>
                <td></td>
                <td ><input type="submit" value="注册" style="width:400px;height:30px;background:dodgerblue;color: white"></td>
            
            </tr>

        </table>
        
        
    </body>
</html>

三尺秋水一点飞鸿
关注
专栏目录
HTML5实现注册表单
xiaowude_boke的博客
08-23 1724
HTML5实现注册表单
制作一个注册表单页面
y_y__d_d的博客
11-17 6801
制作一个表单注册页面 在Dreamweaver中创建一个.html文件，添加一个11行2列的表格，左侧的内容是手动输入（第一行也手动输入），右侧的内容是用代码来写的（最后一行也是用代码来写）（用代码写的原因是，不会用Dreamweaver操作） 表单页面的处理 （1）制作注册表单代码如下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTM...
html5写个表单注册页面,html5 + css3实现一个注册表单实例
weixin_36034659的博客
06-04 1120
注册表单采用html5 + css3布局实现，效果相当不错，发现的前端网页设计者可以参考下哈，希望可以帮助到你效果图如下：复制代码代码如下： 个人信息屏幕快照：密码：重复密码：邮箱地址：其他信息个人网址：年龄：月薪： 10000 函数showValue(value){document.getElementById(” rangevalue“)。innerHTML = value;}描述： cs...
H5用户注册表单页 注册模态框!
11-25
本实例为大家分享了H5表单验证新特性，如何用户注册表单页，供大家参考，具体内容如下 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>用户注册表单页</title> <style> #form_content{ width:600px; margin:0 auto; position:absolute; left:400px; } #form_content .dc{ width:600px; margin-top:10px; overflow
H5自适应登录和注册表单
03-27
H5编写的登录和注册表单，带验证、页面能切换，页面自适应
用HTML5制作注册表与验证码,初谈制作注册表REG脚本文件(中)
weixin_36130547的博客
06-17 517
三、制作REG文件的具体操作1.创建新键创建新键的写法：[路径\新键名]例1，在 HKEY_CLASSES_ROOT\*\shell 下创建主键，键名为：NewWindow。脚本写法：------------------------------------------------------------------------------------------------Windows Regi...
html写注册协议页面,注册页面编写（html/css）
weixin_28728443的博客
06-03 1388
图样展示 照片在WEB-INF下方的image中特别适用于初学者regist.htmlXINGGou 欢迎注册已有帐号?请登录支持中文、字母、数字、“-”、“_”的组合，4-20个字符建议使用数字、字母和符号两种以上的组合，6-20个字符两次密码输入不一致或验证邮箱我已阅读并同意《星构用户注册协议》 关于我们 | 联系我们 | 人才招聘 | 商家入驻 | 营销中心 | 星构爱游...
html登录注册页面本地验证,原生js验证简洁注册登录页面
weixin_34381073的博客
06-03 1087
序一个以js验证表单的简洁的注册登录页面，不多说直接上图效果主要文件完整代码1 sign_up.html 注册表单sign-up 创建账户已经拥有账户？登录2 log_in.html 登录表单log-in 登录没有账户？注册3 common_form.css 表单css样式/*重置样式*/html, body, div, span, applet, object, iframe, h1, h2, ...
HTML 注册页面 (表格、表单）
qq_53080910的博客
12-03 966
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do.
Html+js的注册界面、form表单、表格、事件、登录密码的隐藏与显示
WRJ_Jack的博客
08-16 5279
用html和js做一个登录/注册界面，不连接数据库，这个案例用到了js的引入，form表单结合表格的布局，以及登录界面常用的密码的隐藏与实现的方法。 进入正题，先看我们的成型案例：如下图 案例大概就是这个样子，讲道理，开始写代码之前得来一波案例分析。 首先，宏观看布局，然后局部看细节。布局来看这个界面的组成也很简单，有六个输入框，一个单选框，一个多选框，以及几个按钮。宏观布局首先抛开功能看界面，...
jquery表单验证代码百度注册页面表单验证
11-11
jquery表单验证代码百度注册页面表单验证
H5注册页面源码
11-21
H5注册页面源码 单页源码 CSS页面 完整登录界面
网页表单---一个注册表
11-16
在学网页的过程中，自己制作的一个用户注册的表，初学者可以看着学一下，简单易学
表单注册验证例子
10-06
这是一个表单注册验证的一个例子，在验证过程中有许多验证条件，需要通过才能完成注册。
H5注册页面源码 单页源码 CSS页面 完整登录界面
03-06
H5注册页面源码 单页源码 CSS页面 完整登录界面
HTML常用表单写一个百度搜索和注册页面
赵广陆
04-19 3333
目录 1.实战百度搜索，向百度服务器发送请求 2.注册的一个页面 1.实战百度搜索，向百度服务器发送请求 https://www.baidu.com/s？键1=值1&键2=值2 action：表单提交的位置 method（get/post）：表单提交的方式 GET: (1)参数会依附于url地址之后 (2)利用get方式提交数据，数据的长度有限制 ...
H5注册表单
m0_38027483的博客
09-03 877
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;fieldset&
模拟百度注册表单验证
qq_44687727的博客
11-07 1317
模拟百度注册表单验证 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http...
javascript操作注册表
weixin_34090643的博客
09-09 145
try{                     var shell = new ActiveXObject("WScript.Shell");      //读注册表值var  key1  = shell.RegRead("HKEY_CURRENT_USER//Software//Microsoft//Windows//CurrentVersion//Run//eip");          ...
帮忙写出一个工单系统的前端H5页面
最新发布
06-02
以下是一个简单的 H5 工单系统页面示例，包括工单列表、工单详情和提交工单三个页面： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>工单系统</title> <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css"> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script> </head> <body> <!-- 工单列表页面 --> <div class="container"> <h1>工单列表</h1> <table class="table"> <thead> <tr> <th>ID</th> <th>标题</th> <th>状态</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>工单标题1</td> <td>已完成</td> <td><a href="ticket_detail.html?id=1">查看详情</a></td> </tr> <tr> <td>2</td> <td>工单标题2</td> <td>未完成</td> <td><a href="ticket_detail.html?id=2">查看详情</a></td> </tr> <!-- 其他工单列表项 --> </tbody> </table> </div> <!-- 工单详情页面 --> <div class="container" style="display: none;" id="ticket-detail"> <h1>工单详情</h1> <p>ID：<span id="ticket-id"></span></p> <p>标题：<span id="ticket-title"></span></p> <p>状态：<span id="ticket-status"></span></p> <p>内容：</p> <div id="ticket-content"></div> </div> <!-- 提交工单页面 --> <div class="container" style="display: none;" id="ticket-submit"> <h1>提交工单</h1> <form> <div class="form-group"> <label for="title">标题</label> <input type="text" class="form-control" id="title" name="title" required> </div> <div class="form-group"> <label for="content">内容</label> <textarea class="form-control" id="content" name="content" rows="5" required></textarea> </div> <button type="submit" class="btn btn-primary">提交</button> </form> </div> <script> // 点击工单详情链接时显示工单详情页面 $('a[href^="ticket_detail.html"]').click(function(event) { event.preventDefault(); var ticketId = $(this).attr('href').split('=')[1]; $.ajax({ url: 'ticket_detail.json', data: {id: ticketId}, success: function(data) { $('#ticket-id').text(data.id); $('#ticket-title').text(data.title); $('#ticket-status').text(data.status); $('#ticket-content').html(data.content); $('#ticket-detail').show().siblings('div').hide(); }, error: function() { alert('获取工单详情失败！'); } }); }); // 点击提交工单按钮时提交工单 $('#ticket-submit form').submit(function(event) { event.preventDefault(); var title = $('#title').val(); var content = $('#content').val(); $.ajax({ url: 'ticket_submit.php', type: 'POST', data: {title: title, content: content}, success: function() { alert('提交工单成功！'); $('#ticket-list').show().siblings('div').hide(); }, error: function() { alert('提交工单失败！'); } }); }); </script> </body> </html> ``` 在上面的代码中，通过 Bootstrap 框架构建了一个简单的工单系统前端页面。其中包括三个页面： - 工单列表页面：列出所有的工单，并且提供链接跳转到工单详情页面； - 工单详情页面：显示某个工单的详情信息； - 提交工单页面：提供表单让用户提交新的工单。 在 JavaScript 代码中，通过 jQuery 库监听用户的点击事件，并且通过 Ajax 技术向服务器请求数据或者提交数据。请注意，这里只是一个简单的示例代码，实际情况需要根据具体需求进行修改和完善。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值