<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>QQ注册验证</title>
    </head>
    <body>
        <form method="get" action="success.html">
            <img src="img/bg_chs.png" />
            <p><strong>注册账号</strong></p>
            <p>
                昵称<input type="text" required="required" pattern="[-\w\u4E00-\u9FA5]{4,10}" /> 长度为4-10个字符
            </p>
            <p>
                密码<input type="password" name="password" required="required" pattern="[\dA-Za-z]{6,16}" /> 长度为6-16个字符
            </p>
            <p>
                确认密码<input type="password" name="password" required="required" pattern="[\dA-Za-z]{6,16}" /> 长度为6-16个字符
            </p>
            <p>
                手机号码<input type="text" required="required" pattern="1[3578]\d{9}" /> 密码长度为11位,以13|5|7|8开头
            </p> 
            <p>
                邮箱<input type="email" />无需请求,可选填!
            </p>
            <p>
                年龄<input type="number" required="required" pattern="\d|[1-9]\d|1[0-2]\d" />最小0岁最大129岁
            </p>
            <p>
                <input type="image" src="img/btn.bmp"/>
            </p>
        </form>
        
    </body>
</html>

表单标签中input标签有不同的类型属性 :

文本框属性值

密码属性值(即输入密码时显示出的是圆点)

图片按钮属性值(即插入图片后它会变成一个按钮,点击它也可以提交)

提交属性(它也是一个空按钮,可以给它附一个叫value的默认属性值)

input标签有个属性叫required(即在这种类型的标签里你输入的内容不能为空 否则无法提交表单) 

pattern属性(即它是一种规范样式,属性值的规范原则遵循正则表达式,不懂的读者可以去百度搜正则表达式了解它,开头必须为^,结尾必须为dollar符$)

实例运行结果

用html中表单标签实现QQ登录注册静态页面相关推荐

  1. H5CS3酷炫登录注册静态页面

  2. 仿小米商城和登录的静态页面

    仿小米商城和登录的静态页面 以下仅为参考,下载学习请前往本人gitee仓库 主页(index).html index.css search.js login.html login.css login. ...

  3. 玩转HTML中表单标签的使用

     html中标签个数不多,但是标签的属性非常之多,所以实际除非专业做前端的,否则没必要把所有的属性都记下来,需要查查w3c文档即可,只需要掌握常见的用法,看得懂即可.详细请查阅:W3C官网网站 表单用 ...

  4. HTML 表格标签、列表标签、表单标签(案例: 注册页面)

    1. 表格标签 表格是实际开发中非常常用的标签: 1. 表格的主要作用 2. 表格的基本语法 1.1 表格的主要作用 表格主要用于显示.展示数据,因为它可以让数据显示的非常的规整,可读性非常好.特别是 ...

  5. Lance老师UI系列教程第三课-QQ登录注册界面的实现(android-2012最新版)

    分类: android UI教程2012-08-06 22:37 3731人阅读 评论(6) 收藏 举报 uiandroidqqlayoutbutton UI系列教程第三课:腾讯登录注册界面的实现 今 ...

  6. Android实现qq登录注册和好友列表界面

    学习Android已经有一个多月了,老师留了实现qq登陆注册和好友列表的作业,要求: 设计登录界面,注册界面和好友列表界面. 在登录界面输入用户名"admin",密码"a ...

  7. 标签页如何用php静态显示,php使用标签替换的方式生成静态页面

    这段代码演示了php如何通过自定义的模板页面和自定义标签生成静态页面.原理非常简单,就是将模板页面中的标签替换成动态数据即可.希望能给你一定的启发. template.html 模板文件 {site_ ...

  8. Springboot只允许进入登录注册的页面,没登录页面进行拦截。

    首先是index.html页面: <body style="text-align:center;"><form action="/denglu" ...

  9. php制作网页登录注册,登录注册的页面制作

    下面来做一个超简易的登录注册 先来说注册 得先写个大标题证明是注册页面,然后再就是文本框填内容,在注册这里建三个文本框,用户名,密码,还有姓名,最后还有一个注册的按钮,用来跳转页面 分析好了之后,先建 ...

最新文章

  1. nutch的index-writers.xml
  2. weblogic在处理jsp tag的scope属性时的BUG???
  3. Golang笔记——反射
  4. STM32工作笔记0047--认识DTU什么是4GDTU设备
  5. Oracle Net Services 配置:Xlib: connection to :0.0 refused by server
  6. 通过skimmer发动供应链攻击,苏富比地产100多个网站受影响
  7. SpringBoot集成Swagger2自动生成友好的RestApi测试页面及文档
  8. 《深入理解Spark:核心思想与源码分析》——SparkContext的初始化(叔篇)——TaskScheduler的启动...
  9. 【第四章】 资源 之 4.4 Resource通配符路径 ——跟我学spring3
  10. HTC扣动板机出现射线。获得射线与VR中物体的交点并用linerender表示出来
  11. Ubuntu16.04镜像下载
  12. 高频交揭密美五大高交商访谈录
  13. pandas计算环比与同比
  14. 红米4x 刷android 8.0,【红米4X 安卓6.0.1救砖线刷包】免解锁MIUI V8.5.4.0.MAMCNED稳定版 精简线刷包...
  15. ABC164 E - Two Currencies(二维最短路)
  16. 一年半的外包程序员心得体会
  17. 腾讯云服务器php设置,Windows 腾讯云服务器的 PHP 配置
  18. Python调用R出现“UnicodeDecodeError: ‘utf-8‘ codec can‘t decode byte 0xb2” 问题
  19. 傻瓜式使用SpringSecurity完成前后端分离+JWT+登录认证+权限控制
  20. java之黑帽子逻辑题_一道逻辑推理题有2种帽子,黑的和

热门文章

  1. work-notes(15):私服报错401,Sonatype Nexus Repository Manager,may not contain non-url-safe chars如何解决?
  2. 如何让HTML字体变的更小
  3. Android 性能优化 (一)APK高效瘦身
  4. 华为笔记本能装手机App了,华为移动应用引擎(公测版)
  5. git 加速代理设置,单仓库设置代理,指定仓库设置单独代理
  6. 通达信破底翻选股公式,用缠论底分型进行优化
  7. 腾讯广告算法大赛(即腾讯社交广告算法大赛)
  8. C++ 的未来——第 2 部分
  9. matlab误码率计算函数,matlab通信系统性能估计(误码率、误比特率、眼图、星座图….) | 学步园...
  10. 18、try...catch