html5 javascript 表单练习案例

时间：2022-09-24 18:09:59

<!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&sol;CSS3表单 带小图标

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

  8. HTML5新表单新功能解析

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

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

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

随机推荐

  1. 【leetcode】Minimum Depth of Binary Tree

    题目简述: Given a binary tree, find its minimum depth. The minimum depth is the number of nodes along th ...

  2. Provisioning Profile文件在哪找？

    ~/Library/MobileDevice/Provisioning Profiles

  3. SQL Server（五）——常用函数

    1.数学函数:操作一个数据,返回一个结果 --取上限ceiling select code,name,ceiling(price) from car ; --取下限 floor select floo ...

  4. 新发现了一个编辑器HBuilder，感觉蛮好的，关键是国产软件。

    http://www.dcloud.io/

  5. 微信开发之——Php批量生成带参数的二维码

    带参数的二维码对于渠道营销推广来说是很有用的,可以获得多个带不同场景值的二维码,用户扫描后,公众号可以接收到事件推送,可喜的是微信开通了这个接口,那下面就来研究一下吧. 具体接口说明请参见,微信公众平 ...

  6. 组播报文转发过程RPF

    单播报文的转发过程中,路由器并不关心组播源地址,只关心报文中的目的地址,通过目的地址决定向哪个接口转发.在组播中,报文是发送给一组接收者的,这些接收者用一个逻辑地址标识.路由器在接收到报文后,必须根据 ...

  7. 手机touch事件及参数【转】（自己懒得写了，找了一篇摘过来）

    [html5构建触屏网站]之touch事件 前言 一个触屏网站到底和传统的pc端网站有什么区别呢,交互方式的改变首当其冲.例如我们常用的click事件,在触屏设备下是如此无力. 手机上的大部分交互都是 ...

  8. robot framework 提示&OpenCurlyQuote;pybot 不是内部命令’

    command: pybot.bat --argumentfile c:\*\RIDEzsxpul.d\argfile.txt --listener C:\Python27\lib\site-pack ...

  9. C语言小程序——推箱子（窄字符和宽字符）

    C语言小程序——推箱子(窄字符Version) 推箱子.c #include <stdio.h> #include <conio.h> #include <stdlib. ...

  10. Python&&num;160&semi;获取被调用函数名称，所处模块，被调用代码行

    获取被调用函数名称,所处模块,被调用代码行 by:授客 QQ:1033553122 module2.py: #!/usr/bin/env python # -*- coding:utf-8 -*- _ ...

相关文章