<!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. JS截取字符串多余的为...

    如果截取字符串前几位,多余的用...表示该怎样做呢? JS代码 /** * js截取字符串,中英文都能用 * @param str:需要截取的字符串 * @param len: 需要截取的长度 */ ...

  2. mysql查询某一个字段是否包含中文字符

    在使用mysql时候,某些字段会存储中文字符,或是包含中文字符的串,查询出来的方法是: SELECT col FROM table WHERE length(col)!=char_length(col ...

  3. 21 go并发编程-下

    如何等待一组goroutine结束 1. 使用不带缓冲区的channel实现. 原理: 每个goroutine都往一个channel里写入一个值,然后我们去遍历这个管道的数值,由于不带缓冲区,那么必须 ...

  4. Linux下">/dev/null 2>&1 "相关知识说明

    在学习Linux的过程中,常会看到一些终端命令或者程序中有">/dev/null 2>&1"出现,由于已经遇到了好几次了,为了理解清楚,不妨花点时间百度或者go ...

  5. Android学习：代码控制UI界面示例

    package allegro.test2; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; im ...

  6. Go 用JSON加载表格数据

    支持热重载reload,但会有一些问题,下面注释有写 package table import ( "runtime/debug" ) //IntArray int类型数组 typ ...

  7. cf 938E

    哇自闭了. 一样个毛啊. 和之前见过的几道感觉很类似啊. 首先一个数如果有贡献那么在他后面一定有一个大于它的数,并且前面的全比他小,然后我就跑偏了... 于是我们先排个序,显然无影响,我们可以考虑从 ...

  8. 七牛 qshell 全命令实践

    七牛API服务的命名行测试工具,参考文档 七牛开发者中心 命令行工具(qshell) 实践目的 安装 account 设置ak.sk stat 查看文件状态 buckets/listbucket/do ...

  9. 45道sql

    一.设有一数据库,包括四个表:学生表(Student).课程表(Course).成绩表(Score)以及教师信息表(Teacher).四个表的结构分别如表1-1的表(一)~表(四)所示,数据如表1-2 ...

  10. Kafka的安装是否成功的简单测试命令

    首先了解一下kafka的基本概念 .1. BrokerKafka集群包含一个或多个服务器,这种服务器被称为broker2. Topic每条发布到Kafka集群的消息都有一个类别,这个类别被称为Topi ...