<!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. phalcon bug： model的findFirst会自动忽略一些空格

    version: Phalcon 3 如果DB存在一条记录phone='13012345678 '(后边有一个空格), 则在查询User::findFirst("phone = '13012 ...

  2. C# 获取对象 大小 Marshal.SizeOf (sizeof 只能在不安全的上下文中使用)

    C# 能否获取一个对象所占内存的大小? 今日,在项目重构的时候忽然想到一个问题,一个类哪些成员的增加,会影响一个类所占内存的大小?C#有没有办法知道一个对象占多少内存呢? 第一个问题:很快想到是类的非 ...

  3. Tensorflow1.4 高级接口使用（estimator, data, keras, layers）

    TensorFlow 高级接口使用简介(estimator, keras, data, experiment) TensorFlow 1.4正式添加了keras和data作为其核心代码(从contri ...

  4. nfs文件共享服务

    文件共享服务端10.100.1.13: yum install -y rpcbind nfs-utils  #rpcbind可以给nfs开多个端口 service rpcbind start serv ...

  5. linux 之挂载和解压

    第3天 磁盘管理 存储设备:硬盘.U盘.移动硬盘.光盘.软盘. 攒电脑.(组装一台电脑) 无法被修改. 矿长.欧阳大神. 分区.->格式化ntfs df -h  #查看磁盘分区情况,可用的. 查 ...

  6. windows 下安装 mongodb 时间太久，卡在那里不动

    1.mongodb官网下载:http://www.mongodb.org/downloads 2.双击程序安装,会出现如下,卡着不动,时间太久,也取消不了 3.是因为安装时默认勾选 compass 图 ...

  7. 22.1 、react生命周期(一)

    在每个react组件中都有以下几个生命周期方法~我们需要在不同阶段进行讨论 组件生命周期概述 1.初始化 在组件初始化阶段会执行 constructor static getDerivedStateF ...

  8. 9、socket.io,websocket 前后端实时通信,(聊天室的实现)

    websocket 一种通信协议 ajax/jsonp 单工通信 websocket 全双工通信 性能高 速度快 2种方式: 1.前端的websocket 2.后端的 socket.io 一.后端so ...

  9. PM2.5环境检测系统的设计与分析

    PM2.5环境检测系统的设计与分析   摘要: 大气颗粒物污染对人类健康和生态环境造成了很大的影响,这让人们逐渐重视起对细颗粒物PM2.5检测技术的研究.本文阐述了PM2.5浓度检测的五种方法,在对上 ...

  10. [No000017F]如何监控注册表的修改

    今天我们将向您展示如何使用我们最喜欢的工具之一Proc Mon,在您更改PC上的组策略设置时查看编辑的注册表项. 使用Proc Mon查看组策略对象修改的注册表设置 您要做的第一件事就是从Sys In ...