<!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. 认识 SSH 密钥对

    SSH 密钥对是阿里云为您提供的新的远程登录 ECS 实例的认证方式. 相较于传统的用户名和密码认证方式,SSH 密钥对有以下特点: 仅适用于 Linux 实例: SSH 密钥对登录认证更为安全可靠: ...

  2. Android大图片之缩略图，以及对原图依照指定宽高裁剪成缩略图

     <Android大图片之变换缩略图,以及对原始大图片依照指定宽.高裁剪成缩略图> 在Android的ImageView载入图像资源过程中,出于性能和内存开销的须要.有时候须要把一个原 ...

  3. 【GIS】GeoHash

  4. ActiveQt框架 禁止弹出ActiveX控件交互提示

    重点重写QAxBindable的createAggregate() 参考Qt例子: qtactiveqt\activeqt\opengl\glbox.cpp

  5. My google script which based on Google Sheet and Form

    My google script which based on Google Sheet and Form // get sheet data function getSpreadsheetData( ...

  6. EgretPaper学习笔记一 （安装环境，新建项目）

    参考: 官方Egret3D教程 白鹭引擎5.3.0正式发布,支持3D游戏开发 一 下载安装EgretPaper Egret3D 编辑器的开发代号为“Paper”,于2018年9月份开始小规模内测,并在 ...

  7. hdu 4486 Pen Counts

    Pen Counts Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total ...

  8. 萌新 学习 vuex

    vuex官网文档 https://vuex.vuejs.org/zh-cn/ 注: Mutation事件使用commit触发, Actions事件使用dispatch触发 安装 npm install ...

  9. 基本的sqlplus命令

    以下是一些sqlpus命令 remark          注释行set headsep     标题分隔符ttitle          头标题btitle          尾标题column   ...

  10. css 控制文字超出部分显示省略号

    该文章转自:http://www.daqianduan.com/6179.html 如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽 ...