<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单练习</title>
    <style type="text/css">
form{ width: 400px; background: #9370d8;padding: 10px;margin-left: 500px;margin-top: 150px;}
button{background: #808080;padding: 8px;border-radius: 5px;}
button.hover{background: #2F4F4F;padding: 10px;border-radius: 5px;}
input{padding: 8px;background: #f8f8f8;}
input:focus{background: #FFC0CB;}
    </style>
</head>
<body>
    <form action="">
    <fieldset>
        <legend>注册用户</legend>
            <p><label for="user">账户</label><input type="text" name="user" id="user" placeholder="账号" required=""></p>
            <p><label for="password">密码</label><input type="password" name="password" id="password" placeholder="密码"></p>
            <p><label for="tel">电话号码</label><input type="tel" name="tel" id="tel" placeholder="电话"></p>
            <p><label for="email">电子邮件</label><input type="email" id="email" placeholder="电子邮箱"></p>
            <!--     <p><input type="submit" value="注册"></p> -->
    <button>注册用户</button>
    </fieldset>                
    </form>
</body>
</html>

html5 javascript 表单练习案例的更多相关文章

  1. JavaScript 表单验证 案例

    JavaScript 表单验证 案例 版权声明:未经授权,严禁转载!   编写 HTML 文件,搭建主体界面 <html> <head> <meta charset=&q ...

  2. 推荐几款很棒的 JavaScript 表单美化和验证插件

    表单元素让人爱恨交加.作为网页最重要的组成部分,表单几乎无处不在,从简单的邮件订阅.登陆注册到复杂的需要多页填写的信息提交功能,表单都让开发者花费了大量的时间和精力去处理,以期实现好用又漂亮的表单功能 ...

  3. 前端工具 - 15个最佳的 JavaScript 表单验证库

    客户端验证在任何项目都是不够的,因为 JavaScript 可以直接忽略,人们可以提交请求到服务器. 然而这并不意味着客户端验证都没必要了,很多时候我们需要在用户提交到服务器之前给予提示.JavaSc ...

  4. HTML5 智能表单

    HTML5 智能表单 1.表单新增属性  ☀ autofocus 属性 <input type="text" autofocus/>设置 autofocus 属性,使文 ...

  5. JavaScript表单

    JavaScript表单 这篇文章的主要目的是介绍表单相关的知识,如表单基础知识.文本框脚本相关用法.选择框脚本相关用法以及等知识.虽然在现代web开发中,很少会使用form默认行为提交表单数据,而是 ...

  6. HTML5智能表单

    HTML5 智能表单 1.表单新增属性  ☀ autofocus 属性 <input type="text" autofocus/>设置 autofocus 属性,使文 ...

  7. 精美的HTML5/CSS3表单 带小图标

    今天我们要来分享一款非常精美的HTML5/CSS3表单,准备地说,这是一款经过美化的input输入表单,每一个输入表单都可以定义其两侧的小图标,非常华丽.另外,这款表单应用还采用了3种不同的风格主题, ...

  8. HTML5新表单新功能解析

    HTML5新增了很多属性功能.但是有兼容性问题,因为这些表单功能新增的.我这里做了一个简单的练习,方便参考.如果完全兼容的话,那我们写表单的时候就省了很多代码以及各种判断. <!DOCTYPE ...

  9. hTML5实现表单内的上传文件框，上传前预览图片，针刷新预览images

    hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images, 本例子主要是使用HTML5 的File API,建立一個可存取到该file的url, 一个空的img标签,ID为img0,把 ...

随机推荐

  1. LiDAR、LAS、LAS Dataset与点云

    LiDAR Light Detection And Ranging,激光探测及测距,是一种光学遥感技术,使用激光对地球表面的密集采样,产生高精度X.Y.Z测量值. 激光雷达系统的主要硬件组成部分包括一 ...

  2. IDEA下搭建Shiro-web环境，总是报BasicDataSource，classnotfound；问题解决

    进入报错跟踪,查看加载的classloader中没有dbcp相关jar包 猜测结果是,jar没有被加载,但是maven引用没错,而且也能找到对应的class 后来又查看IDEA配置中,相关jar也引入 ...

  3. solr搜索分词优化

    solr服务器配置好在搜索时经常会搜出无关内容,把不该分的词给分了,导致客户找不到自己需要的内容,那么我们就从配置词典入手解决这个问题. 首先需要知道自带的词典含义: 停止词:停止词是无功能意义的词, ...

  4. Hystrix入门与分析（二）：依赖隔离之线程池隔离

    1.依赖隔离概述 依赖隔离是Hystrix的核心目的.依赖隔离其实就是资源隔离,把对依赖使用的资源隔离起来,统一控制和调度.那为什么需要把资源隔离起来呢?主要有以下几点: 1.合理分配资源,把给资源分 ...

  5. phpcms栏目标签调用

    $CATEGORY[$catid][catid]                栏目id   $CATEGORY[$catid][module]                栏目所在的模块   $C ...

  6. Oracle课程档案，第六天

    体系结构: instance:实例 database:数据库 RAC:多实例对一个数据库 SGA:最大总数 (系统全局区域)缓存区 PGA:其中的一块, 也是一个缓存区 server process: ...

  7. 基于bootstrap-treeview做的一个漂亮的无限分类树层级联动菜单

    2017年12月11日09:59:15 因为工作需要把原来的bootstrap-treeview做了一些小改动,方便后台开发人员使用 最终效果,看起来还行,但是其实不是特别友好对用户来说,但是对开发者 ...

  8. 实现Linux下的ls和ls-l

    ls的C语言代码实现 #include <stdio.h> #include <sys/types.h> #include <sys/stat.h> #includ ...

  9. Codeforces 1089K - King Kog's Reception - [线段树][2018-2019 ICPC, NEERC, Northern Eurasia Finals Problem K]

    题目链接:https://codeforces.com/contest/1089/problem/K time limit per test: 2 seconds memory limit per t ...

  10. [No0000193]Chrome浏览器控制台（console）花式调试

    对前端开发者来说,Chrome Dev Tools(开发者工具,以下简称CDT)是一个不可或缺的开发调试工具,但是你可能只用过console.log(),却不知道console还有很多功能强大的调试方 ...