当前位置： 首页 > news >正文

使用HTML、CSS和JavaScript编写一个注册界面（一）

news 文章来源：https://blog.csdn.net/weixin_72939806/article/details/139448420 2024/11/16 17:33:47

倘若文章或代码中有任何错误或疑惑，欢迎提出交流哦~

HTML和CSS

首先，我们需要编写一个简洁的注册界面。
简单编写下，如下：

呈现效果为：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>结合JavaScript编写注册界面</title>
</head><body><div class="main"><h3>注册界面</h3><form action="#"><ul><li><input type="text" id="name" placeholder="请输入用户昵称"></li><li><input type="text" id="account" placeholder="请输入账号"></li><li><input type="text" id="password" placeholder="请输入密码"></li><li><input type="text" id="phone" placeholder="请输入你的手机号码"></li><li><input type="email" id="email" placeholder="请输入邮箱地址"></li></ul><input type="submit" id="submit" value="注册"></form></div>
</body></html>

在添加一定的css样式后，得到下面文中的效果。

注册按钮

给注册按钮添加完css样式后，因为将按钮向右浮动，会导致上浮，所以添加了清除浮动类。这个比较重要我觉得。

添加如下要求：

  1. 用户名：只能包含英文字符、中文字符、数字，长度在2-15。
  2. 账号：只能包含字母和数字，长度在6-20，不允许包含任何的特殊符号。
  3. 密码：密码长度至少6个字符，且必须同时包含大写字母，小写字母，数字和特殊字符 (例如 !@#$%^&* )。
  4. 手机号：长度为11位的中国号码。
  5. 邮箱：符合电子邮件的常规格式。

效果如下：
在这里插入图片描述

也就是说，如果用户输入的内容错误了，那么输入框下的提示信息就会变成红色，来提醒出错。

密码显示按钮

可以看到我们使用类型为password的input输入框时，输入的内容都是不可见的，而我们在日常使用经常看到，显示密码的按钮，现在加上这个按钮。
在这里插入图片描述
下面是添加眼睛按钮的HTML和CSS代码，下一篇文章使用Javascript解决问题。

CSS和HTML代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>结合JavaScript编写注册界面</title><style>.main {/* 设置内容宽度以及水平居中 */width: 80%;margin: 0 auto;margin-left: 20px;/* 边框以及边框圆角 */border: 1px solid #ccc;border-radius: 5px;/* 背景颜色 */background-color: #f5f5f5;padding: 20px;}form ul li {list-style: none;margin-bottom: 10px;}form ul li input[type="text"],form ul li input[type="password"],form ul li input[type="email"] {width: 80%;margin-top: 5px;padding: 10px;border: 1px solid #ccc;border-radius: 4px;}/* 提示信息部分 */.prompt {/* 让文本和输入框更紧凑 */margin-top: 2px;width: 80%;/* 设置提示信息为合适的大小，以及颜色 */font-size: 12px;color: rgba(0, 0, 0, 0.3);}/* 注册按钮部分 */form ul li input[type="submit"] {float: right;margin-top: 10px;padding: 10px 20px;border: none;background-color: #4CAF50;color: white;cursor: pointer;}form ul li input[type="submit"]:hover {background-color: #45a049;}/* 显示图标部分 */form ul li input[type="password"],button {display: inline;}button {border: none;cursor: pointer;padding-top: 5px;height: 25px;width: 30px;}img {/* 让图片占满整个区域 */width: 100%;height: 100%;}</style>
</head><body><div class="main"><h3>注册界面</h3><form action="#"><ul><li><input type="text" id="name" placeholder="请输入用户昵称"><p class="prompt">用户名只能包含英文字符、中文字符、数字，长度在2-15。</p></li><li><input type="text" id="account" placeholder="请输入账号"><p class="prompt">账号只能包含字母和数字，长度在6-20，不允许包含任何的特殊符号。</p></li><li><input type="password" id="password" placeholder="请输入密码"><button id="button"><img src="./image/view.png" alt="显示" id="img"></button><p class="prompt">密码长度至少6个字符，且必须同时包含大写字母，小写字母，数字和特殊字符</p></li><li><input type="text" id="phone" placeholder="请输入你的手机号码"><p class="prompt">手机号为长度11位的中国号码。</p></li><li><input type="email" id="email" placeholder="请输入邮箱地址"><p class="prompt">请输入符合电子邮件的常规格式。</p></li><li><input type="submit" id="submit" value="注册"><!-- 消除浮动类，避免上浮 --><div style="clear: both"></div></li></ul></form></div>
</body></html>

页面效果如下：
在这里插入图片描述

相关文章：

使用HTML、CSS和JavaScript编写一个注册界面（一）

倘若文章或代码中有任何错误或疑惑&#xff0c;欢迎提出交流哦~ HTML和CSS 首先&#xff0c;我们需要编写一个简洁的注册界面。 简单编写下&#xff0c;如下&#xff1a; 呈现效果为&#xff1a; <!DOCTYPE html> <html lang"en"><head><me…...

编程日记 2024/6/9 22:46:29

什么是档案数字化管理

档案数字化管理指的是将传统的纸质档案转换为数字形式&#xff0c;并通过电子设备、软件和网络技术进行管理和存储的过程。 档案数字化管理包括以下几个步骤&#xff1a; 1. 扫描和数字化&#xff1a;将纸质档案通过扫描仪转换为数字图像或文档。可以使用OCR&#xff08;光学字…...

编程日记 2024/6/9 22:44:27

vuInhub靶场实战系列--prime:1

免责声明 本文档仅供学习和研究使用,请勿使用文中的技术源码用于非法用途,任何人造成的任何负面影响,与本人无关。 目录 免责声明前言一、环境配置1.1 靶场信息1.2 靶场配置 二、信息收集2.1 主机发现2.1.1 netdiscover2.1.2 nmap主机扫描2.1.3 arp-scan主机扫描 2.2 端口扫描…...

编程日记 2024/6/9 22:42:25

L48---1637. 两点之间不包含任何点的最宽垂直区域(排序）---Java版

1.题目描述 2.思路 &#xff08;1&#xff09;返回两点之间内部不包含任何点的 最宽垂直区域 的宽度。 我的理解是相邻两个点&#xff0c;按照等差数列那样&#xff0c;后一个数减去相邻的前一个数&#xff0c;才能保证两数之间不含其他数字。 &#xff08;2&#xff09;所以&…...

编程日记 2024/6/9 22:40:23

在线渲染3d怎么用？3d快速渲染步骤设置

在线渲染3D模型是一种高效的技术&#xff0c;它允许艺术家和设计师通过互联网访问远程服务器的强大计算能力&#xff0c;从而加速渲染过程。无论是复杂的场景还是高质量的视觉效果&#xff0c;在线渲染服务都能帮助您节省宝贵的时间。 在线渲染3D一般选择的是&#xff1a;云渲染…...

编程日记 2024/6/9 22:39:22

《软件定义安全》之二：SDN/NFV环境中的安全问题

第2章 SDN/NFV环境中的安全问题 1.架构安全 SDN强调了控制平面的集中化&#xff0c;从架构上颠覆了原有的网络管理&#xff0c;所以SDN的架构安全就是首先要解决的问题。例如&#xff0c;SDN实现中网络控制器相关的安全问题。 1.1 SDN架构的安全综述 从网络安全的角度&…...

编程日记 2024/6/9 22:35:18

Qt图表类介绍

本文主要介绍QCharts相关的模块及类。 Qt中图表模块有以下几种类型&#xff1a;折线图&#xff0c;样条曲线图&#xff0c;面积图&#xff0c;散点图&#xff0c;条形图&#xff0c;饼图&#xff0c;方块胡须图&#xff0c;蜡烛图&#xff0c;极坐标图。 QCharts的图表框架类似…...

编程日记 2024/6/9 22:34:18

时隔很久运行苍穹外卖项目，出现很多错误

中途运行了很多其他项目&#xff0c;maven的配置文件还被我修改了一次。导致再次运行苍穹外卖项目出现很多错误。 发现没有办法&#xff0c;把本地的仓库删了个干干净净。然后点击clean发现报错&#xff1a; Cannot access alimaven (http://mavejavascript:void(0);n.aliyun.…...

编程日记 2024/6/9 22:32:15

补篇协程:协程(Coroutine)里通过挂起suspend函数实现异步IO操作

异步IO的概念 异步IO是一种非阻塞的数据读写方法&#xff0c;异步IO与同步IO相对。 当一个异步过程调用发出后&#xff0c;调用者不能立刻得到结果。 实际的IO处理部件在完成操作后&#xff0c;会通过状态、通知或回调机制来通知调用者。 在一个CPU密集型的应用中&#xff0c…...

编程日记 2024/6/9 22:30:13

qmt量化交易策略小白学习笔记第16期【qmt编程之获取北向南向资金（沪港通，深港通和港股通）】

qmt编程之获取北向南向资金 qmt更加详细的教程方法&#xff0c;会持续慢慢梳理。 也可找寻博主的历史文章&#xff0c;搜索关键词查看解决方案 &#xff01; 北向南向资金&#xff08;沪港通&#xff0c;深港通和港股通&#xff09; #北向南向资金交易日历 获取交易日列表…...

编程日记 2024/6/9 22:29:12

开源项目学习——vnote

一、介绍 vnote是一款免费且开源的markdown编辑器&#xff0c;用C开发&#xff0c;基于Qt框架&#xff0c;windows/linux/mac都能用。 二、编译 $ git clone --recursive https://github.com/vnotex/vnote.git $ cd vnote && mkdir build $ cd build $ cmake ../ $ …...

编程日记 2024/6/9 22:26:08

5_1 Linux 计划任务

5_1 Linux 计划任务 文章目录 5_1 Linux 计划任务[toc]1. crontab 命令2. 计划任务书写格式 用途&#xff1a;按照设置的时间间隔&#xff0c;为用户反复执行某一固定的系统任务 软件包&#xff1a;cronie、crontabs 系统服务&#xff1a;crond 日志文件&#xff1a;/var/log/c…...

编程日记 2024/6/9 22:24:05

接口框架项目实战-pytest（六）csv数据驱动

csv 数据驱动 为了解决数据量大 导致yaml文件重复太多 yaml_util.py import osimport jsonpath import yamlfrom pytestdemo.common.base_util import get_path from pytestdemo.common.csv_util import analysis_parametersdef read_config_file(one_node,two_node):with ope…...

编程日记 2024/6/9 22:23:04

【Apache Doris】周FAQ集锦：第 5 期

【Apache Doris】周FAQ集锦&#xff1a;第 5 期 SQL问题数据操作问题运维常见问题其它问题关于社区 欢迎查阅本周的 Apache Doris 社区 FAQ 栏目&#xff01; 在这个栏目中&#xff0c;每周将筛选社区反馈的热门问题和话题&#xff0c;重点回答并进行深入探讨。旨在为广大用户和…...

编程日记 2024/6/9 22:22:03

再读高考作文题

新课标I卷&#xff1a;讨论了随着互联网和人工智能的普及&#xff0c;问题是否会变得越来越少&#xff0c;要求考生写一篇文章&#xff0c;表达自己对于这一现象的联想和思考。 从来就没有什么救世主 AI也不是​​​​​ 一直不会写作文&#xff0c;直到高中&#xff0c;才堪堪…...

编程日记 2024/6/9 22:21:01

小程序中实现自定义头部导航组件

在页面中实现自定义头部导航的组件&#xff0c;如果仅是单个页面中需要自定义可在页面的json文件中配置"navigationStyle": “custom”&#xff0c;如果是项目中所有页面都想使用自定义的组件&#xff0c;可在app.json的window中全局配置"navigationStyle"…...

编程日记 2024/6/9 22:20:00

算数运算符与表达式（打印被10整除的数）

打印100以内&#xff08;包含100&#xff09;能被10整除的正整数 #include <stdio.h>#define UPPER 100int main() {int i 1;while (i < UPPER)if (i % 10 0)printf("%d\n", i);return 0; } 自增运算符 i 用于递增变量 i 的值。在 while 循环中&#xf…...

编程日记 2024/6/9 22:17:57

kv视频如何转码mp4格式，kv转换mp4最简单方法

在数字化时代&#xff0c;视频格式转换成为了一项日常需求。有时候我们需要把kv格式转换为MP4格式。下面将详细介绍kv转MP4的方法 方法一、 1、使用 "小白兔视频格式在线转换网站" 2、地址发给"小白兔视频格式在线转换网站"的客服&#xff0c;客服下载即可…...

编程日记 2024/6/9 22:16:56

哈夫曼树详解

哈夫曼树 例题 有n堆果子&#xff0c;每堆果子的质量已知&#xff0c;现在需要把这些果子合并成一堆&#xff0c;但是每次只能把两堆果子合并到一起&#xff0c;同时会消耗与两堆果子质量之和等值的体力。显然&#xff0c;在进行n-1次合并之后&#xff0c;就只剩下一堆了。为…...

编程日记 2024/6/9 22:15:55

LangChain4j实战

基础 LangChain4j模型适配: Provider Native Image Sync Completion Streaming Completion Embedding Image Generation Scoring Function Calling OpenAI ✅ ✅ ✅ ✅ ✅ ✅ Azure OpenAI ✅ ✅ ✅ ✅ ✅ Hugging Face ✅ ✅ Amazon Bedrock ✅ ✅…...

编程日记 2024/6/9 22:12:51

57.Semaphore信号量

用来限制能同时访问共享资源的线程上限。只是适合限制单机线程数量。 Slf4j public class SemaphoreDemo {public static void main(String[] args) {Semaphore semaphore new Semaphore(3);for (int i 0; i < 10; i) {new Thread(() -> {try {semaphore.acquire();//…...

编程日记 2024/6/9 22:11:50

生成式人工智能 - 文本反转（Textual Inversion）：一种微调稳定扩散模型的方法

一、简述 大型文本到图像稳定扩散模型已经展示了前所未有的能力，可以使用文本提示合成新场景。这些文本到图像模型提供了通过自然语言指导创作的自由。然而，它们的使用受到用户描述特定或独特场景、艺术创作或新实体产品的能力的限制。很多时候，用户被限制行使她的艺术自由来…...

编程日记 2024/6/9 22:10:49

minio的一个基础使用案例：用户头像上传

文章目录 一、minio下载安装&#xff08;Windows&#xff09;二、案例需求分析三、后端接口开发 一、minio下载安装&#xff08;Windows&#xff09; 1. 下载minio服务端和客户端 minio下载地址 2. 手动搭建目录 /minio/binmc.exeminio.exe/data/logs手动创建minio应用程序目…...

编程日记 2024/6/9 22:09:48

Linux用户和用户组的管理

目录 前言一、系统环境二、Linux用户组的管理2.1 新增用户组2.2 删除用户组2.3 修改用户组2.4 查看用户组 三、Linux用户的管理3.1 新增用户3.2 删除用户3.3 修改用户3.4 查看用户3.5 用户口令&#xff08;密码&#xff09;的管理 总结 前言 本篇文章介绍如何在Linux系统上实现…...

编程日记 2024/6/9 22:07:44

项目-五子棋双人对战:游戏房间的管理(5)

完整代码见: 邹锦辉个人所有代码: 测试仓库 - Gitee.com 之前我们已经实现了玩家匹配的功能, 我们都知道, 匹配完过后就可以进入游戏房间进行对战了, 所以我们下一步关注的重点就是对于游戏房间的管理. 模块详细讲解 功能需求 通过匹配的方式, 自动给玩家加入到一个游戏房间…...

编程日记 2024/6/9 22:04:40

LocalDate和Date有什么区别？两者如何转换？

LocalDate与Date 在Java中&#xff0c;LocalDate和Date是用来处理日期的两种不同的类。 区别&#xff1a; Date是Java早期的日期类&#xff0c;它包含了日期和时间的信息。但是在Java 8之后&#xff0c;Date类被标记为过时的&#xff0c;推荐使用新的日期时间API&#xff0c;…...

编程日记 2024/6/9 22:03:39

铝合金货物运输鉴定书办理 货物危险性鉴定

货物运输鉴定书/货物危险性鉴定 项目背景&#xff1a; 为了运输的安全&#xff0c;航空运输、公路运输、铁道运输、水路运输都必须了解货物的运输危险性。货物运输条件鉴定就是对货物的运输适宜性作出评价和建议。 货物运输条件鉴定一般依据IATA危险货物规章(DGR)2005、联合国危…...

编程日记 2024/6/9 22:02:37

php操作数据库

<?php session_start(); #面向过程 function create_connection(){ $conn mysqli_connect(127.0.0.1,root,123456,learn_2) or die("数据库连接失败"); mysqli_query($conn,"set names utf8"); return $conn; } #面向对象 function create_connection…...

编程日记 2024/6/9 22:01:36

python记录之集合

Python中的集合&#xff08;Set&#xff09;是一个无序且不包含重复元素的数据结构。集合主要用于成员检测和数据去重。 1. 集合的创建 在Python中&#xff0c;你可以使用大括号{}或set()函数来创建一个集合。注意&#xff0c;如果你使用大括号{}并且只包含一个元素&#xff…...

编程日记 2024/6/9 22:00:35

ResourceManager 的 rpc server 模型

一. yarn ResourceManager 的三种通信协议 ResourceTrackerProtocol NodeManager 和 ResourceManager 的 RPC 通信协议。其中 ResourceManager 充当RPC Server的角色&#xff0c;而 NodeManager 充当 RPC Client 的角色。NodeManager 通过该协议向 ResourceManager 注册、汇报…...

编程日记 2024/6/9 21:59:34

建设一个网站app需要多少钱/一个新产品的营销方案

0效果 1来由 首先我有个程序需要用到进度条&#xff0c;我首先试了一下MATLAB自带的进度条&#xff1a; barwaitbar(0,读取数据中...); % waitbar显示进度条 for i1:1000A(i)rand();str[计算中...,num2str(100*i/1000),%]; % 显示的文本waitbar(i/1000,bar,str) …...

编程日记 2024/11/16 16:53:46

企业官方网站建设规划/自媒体账号申请

不知道哦是不是不小心点了哪里&#xff0c;pycharm开始不停闪烁并且显示updating indices, 暂停服务重启电脑都不起作用&#xff0c;用以下操作就成功解决了问题。 File-> 选中Invalidate Caches/Restart ->Invalidate Caches/Restart 好像是因为项目中有大量的文件&…...

编程日记 2024/11/16 16:28:45

英文网站如何做关键词/网址查询入口

事情是这样的 前段时间面试了阿里&#xff0c;大家也都清楚&#xff0c;如果你在简历上面写着你精通XX技术&#xff0c;那面试官就会跟你死磕到底。 我就是在自己的简历上写了精通MySQL&#xff0c;然后就开启了和阿里面试官的死磕之路&#xff0c;结果就是拿到了一份不错的高…...

编程日记 2024/11/16 15:42:28

建设网站报告书/免费推广引流平台

我有些尴尬地拿着水杯&#xff0c;正对面坐着来访的王总&#xff0c;他是在别处打拼的人&#xff0c;这几年据说收获颇丰&#xff0c;见移动互联网如火如荼&#xff0c;自然也想着要进来干一场&#xff0c;尽管王总从事的行当也算跟IT沾边&#xff0c;但毕竟太长时间不接触技术…...

编程日记 2024/11/16 13:54:02

网站访问量什么意思/最近新闻事件

请问唐氏筛查低风险人群&#xff0c;有必要做无创DNA吗&#xff1f;唐氏筛查低风险&#xff0c;有必要做无创DNA检查吗&#xff1f;这个问题问的好&#xff0c;如果单纯性的唐氏筛查低风险&#xff0c;那么根本没有必要再做无创DNA检查了。现实生活中还是存在很多唐氏筛查低风险…...

编程日记 2024/11/16 9:40:41

自学做网站的/网页搭建

返璞归真&#xff0c;代码规范也是一门艺术 黄金定律 永远遵循同一套编码规范 -- 可以是这里列出的&#xff0c;也可以是你自己总结的。如果你发现本规范中有任何错误&#xff0c;敬请指正。通过open an issue on GitHub为本规范添加或贡献内容。 不管有多少人共同参与同一项目…...

编程日记 2024/11/16 8:53:54