前端之用html做一个用户登陆界面

于 2024-03-12 11:37:27 发布
阅读量1.3k 收藏 6
点赞数 15
文章标签： 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/banliyaoguai/article/details/136647454
版权

用户登陆界面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册页面</title>
   
</head>
<body>
    <form action="https://www.baidu.com" method="post">
        <table border="1px" align="center" >
            <thead>
                <tr align="center">
                    <td colspan="3">用户注册</td>
                    
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td align="right">用户名</td>
                    <td colspan="2"><input type="text"></td>
                    
                </tr>
                <tr>
                    <td align="right">密码</td>
                    <td colspan="2"><input type="password"></td>
                    
                </tr>
                <tr>
                    <td align="right">性别</td>
                    <td colspan="2">男<input type="radio" name="性别" value="男">女<input type="radio" name="性别" value="女" checked></td>
                    
                </tr>
                <tr >
                    <td align="right">爱好</td>
                    <td colspan="2">
                        <input type="checkbox" name="hobby" value="打篮球">打篮球
                        <input type="checkbox" name="hobby" value="打羽毛球">打羽毛球
                        <input type="checkbox" name="hobby" value="踢足球">踢足球
                        <input type="checkbox" name="hobby" value="看书">看书
                    </td>
                </tr>
                <tr>
                    <td align="right">邮箱</td>
                    <td colspan="2"><input type="email" name="tel"></td>
                    
                </tr>
                <tr>
                    <td align="right">  出生日期</td>
                    <td colspan="2"> <input type="date"></td>
                </tr>
                <tr>
                    <td align="right">电话号码</td>
                    <td colspan="2"><input type="tel" name="tel"></td>
                </tr>
                <tr>
                    <td align="right">学历</td>
                    <td colspan="4">
                    <select name="学历" multiple>
                        <option value="">请选择你的学历</option>
                        <option value="小学">小学</option>
                        <option value="初中">初中</option>
                        <option value="高中">高中</option>
                        <option value="本科">本科</option>
                        <option value="研究生">研究生</option>
                        <option value="博士">博士</option>
                    </select>
                    </td>
                </tr>
                <tr>
                    <td align="right">个人简介</td>
                    <td colspan="2"><textarea name="introduce" id="" cols="30" rows="10"></textarea></td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td  colspan="3" align="center"><input type="submit" value="提交"><input type="reset" name="重置"></td>
                </tr>
            </tfoot>
        </table>
    </form>
</body>
</html>

结果

不嫌弃的点点关注，点点赞 ଘ(੭ˊᵕˋ)੭* ੈ✩‧₊˚ 

板栗妖怪
关注
  • 15
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
HTML5响应式用户登录界面模板.zip
07-28
响应式登录界面源码模板，需要的朋友可自行下载，初学者可以用来学习学习，里面的css样式和 js 动作
html实现用户简单的注册登录
03-06
1.用户可以填写信息 2.单选，多选操作 3.下拉框选择 4.用户名和密码正则表达式校验 5.有任何一项未校验成功（包括空白）都无法注册或提交 6.注册成功后跳转到注册成功界面，注册成功后几秒后再次跳转到注册界面。
【前端】利用HTML标签 实现简单用户登录界面【HTML+CSS+JavaScript(JS)】
02-11
【前端】利用HTML标签 实现简单用户登录界面 表单＜form＞ ＜input＞【HTML+CSS+JavaScript(JS)】
html用户界面工具包.zip
11-19
html用户界面工具包.zip
简单登录注册界面模板（HTML+CSS+JavaScript）【登录注册界面代码】
06-13
简单登录注册界面模板（HTML+CSS+JavaScript）【登录注册界面代码】 简单登录注册界面模板（HTML+CSS+JavaScript）。简单登录注册界面模板（HTML+CSS+JavaScript）。简单登录注册界面模板（HTML+CSS+JavaScript）。 简单登录注册界面模板（HTML+CSS+JavaScript）【登录注册界面代码】
纯前端实现—用户注册登录界面
热门推荐
孤寒者的博客
10-20 4万+
理想实现效果： 1.注册界面的实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>注册界面</title> <link rel="stylesheet" href="RESETCSS.css"> <style> div{ width: 300px;
用户登录前端html源码,Web前端开发用户登录代码_登录界面
weixin_35387135的博客
06-10 2809
/p><前端开发如何记录登录状态：登录界面@mediascreenand(max-width:768px){font-size:30px!important;}}@mediascreenand(max-width:420px){font-size:19px!important;}}@mediascreenand(max-width:400px){font-size:18px!impor...
html前端登录界面示例
西凉的悲伤博客
08-25 7075
效果如下： html代码如下： <!doctype html> <html> <head> <meta charset="utf-8"> <title>登录示例</title> <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0"> <script src=""
HTML写一个简单的登录注册界面
weixin_62854251的博客
10-30 6988
HTML5登录注册页面简单且详细的教程，内附源码。
web前端期末节课大作业 ~HTML学校后台用户登录界面模板.zip
06-18
web前端期末节课大作业 ,html+css+javascript实现~HTML学校后台用户登录界面模板，江西师范大学软件学院毕业设计选题，选项卡切换不同角色的登录，分别是学生登录、导师登录、教务登录，有表单验证功能。
以下是一个基本的HRM系统前端代码示例，使用HTML、CSS和JavaScript来实现用户界面和功能.txt
08-21
这个示例实现了一个简单的HRM系统前端，包含一个"Add Employee"的表单。用户可以输入员工的姓名、部门和职位，并点击"Add Employee"按钮。当提交表单时，JavaScript代码会捕获并输出员工的详细信息到浏览器的控制台，并清空表单字段，以方便添加下一个员工。 请注意，这只是一个简单的示例，用于展示基本的前端交互和数据处理。在实际应用中，你需要进一步开发和完善HRM系统的前端功能和界面。
用户登录界面 - 记事本风格HTML代码
05-16
这是一个记事本风格的用户登录界面，非常逼真，HTML代码已经改成了中文的，经过测试，兼容IE6+、Firefox、Chrome等浏览器。 优化了自适应问题。 喜欢的可以下载。 从dowebok搬砖来的。
常用HTML登录页面模板
05-11
常用HTML登录页面模板 扁平，简洁
利用php做服务器和web前端的界面进行交互
01-20
PHP与Web页面交互是实现PHP网站与用户交互的重要手段。希望查看本篇文章的学者首先查看一下PHP的基础知识,因为今天用到这个东西,现学现卖吧.后续会更新php服务器的基础知识! 1.首先你要有一个界面   我这里利用我项目开发的一个简单界面截取下来进行讲解!项目机密  请勿**,你懂得! html代码和界面 <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <html xmlns=
基于Html的信息管理系统前端界面设计源码
最新发布
03-28
这是一个基于Html的自制信息管理系统前端界面设计，包含26个文件，其中主要文件类型包括10个PNG图片文件、7个CSS文件、7个HTML文件和1个LICENSE文件。该项目的前端界面与Android信息管理系统配套，提供了良好的用户...
黄色扁平登录页面模板是一款界面漂亮简洁的HTML用户登录网页模板。.zip
02-18
黄色扁平登录页面模板是一款界面漂亮简洁的HTML用户登录网页模板。.zip黄色扁平登录页面模板是一款界面漂亮简洁的HTML用户登录网页模板。.zip
一个Vue前端框架使用简单实例
01-07
Vue 是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是，Vue 被...3.创建一个简单的前端页面simple.html，并将vue.min.js和simple.html处于同一目录下，二者均处于BootStrapDemo文件下，如下图
帮我生成一个前端的用户登录界面
05-27
好的，我可以提供一个简单的前端用户登录界面的代码示例，供您参考： ```html <!DOCTYPE html> <html> <head> <title>用户登录</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> body { background-color: #f2f2f2; font-family: Arial, sans-serif; font-size: 16px; } form { background-color: #fff; border-radius: 5px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); padding: 20px; width: 400px; margin: 50px auto; } h1 { text-align: center; margin-top: 0; } label { display: block; margin-bottom: 10px; } input[type="text"], input[type="password"] { border: 1px solid #ccc; border-radius: 3px; font-size: 16px; padding: 10px; width: 100%; margin-bottom: 20px; } input[type="submit"] { background-color: #4CAF50; border: none; color: #fff; cursor: pointer; font-size: 16px; padding: 10px; width: 100%; } input[type="submit"]:hover { background-color: #3e8e41; } .error { color: red; font-size: 14px; margin-bottom: 10px; } </style> </head> <body> <form> <h1>用户登录</h1> <label>用户名：</label> <input type="text" name="username" required> <label>密码：</label> <input type="password" name="password" required> <input type="submit" value="登录"> <div class="error"></div> </form> <script> // 用户登录验证 document.querySelector("form").addEventListener("submit", function(event) { event.preventDefault(); var username = document.querySelector('input[name="username"]').value; var password = document.querySelector('input[name="password"]').value; // TODO: 进行用户登录验证，验证成功则跳转到用户主页，否则在.error中显示错误信息 }); </script> </body> </html> ``` 这是一个基本的用户登录界面，包括用户名和密码输入框，以及登录按钮。当用户点击登录按钮时，JavaScript会获取用户名和密码并进行验证，验证成功则跳转到用户主页，否则在.error元素中显示错误信息。您可以根据实际需求进行修改。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值