<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

     <title>学生档案</title>

     <style>

         body {

             margin: 0;

             padding: 0;

             background-color: #F7F7F7;

             font-family: '汉仪大隶书繁';

         }

         form {

             max-width: 640px;

             width: 100%;

             margin: 24px auto;

             font-size: 28px;

         }

         label {

             display: block;

             margin: 10px 10px 15px;

             font-size: 24px;

         }

         input {

             display: block;

             width: 100%;

             height: 40px;

             font-size: 22px;

             margin-top: 10px;

             padding: 6px 10px;

             color: #333;

             border: 1px solid #CCC;

             box-sizing: border-box;

         }

         meter, progress {

             display: block;

             width: 100%;

             margin-top: 10px;

         }

         .btn {

             margin-top: 30px;

         }

         .btn input {

             color: #FFF;

             background-color: green;

             border: 0 none;

             outline: none;

             cursor: pointer;

         }

     </style>

 </head>

 <body>

     <form action="">

         <fieldset>

             <legend>学生档案</legend>

             <label for="">

                 姓名: <input type="text" required autofocus placeholder="请输入姓名">

             </label>

             <label for="">

                 手机号码: <input type="tel" pattern="1\d{10}" placeholder="请输入手机号码">

             </label>

             <label for="">

                 邮箱地址: <input type="email" placeholder="请输入邮箱地址">

             </label>

             <label for="">

                 所属学院: <input type="text" list="course" placeholder="前端与移动开发学院">

                 <datalist id="course">

                     <option value="前端与移动开发"></option>

                     <option value="PHP"></option>

                     <option value="JAVA"></option>

                     <option value="Android"></option>

                     <option value="IOS"></option>

                     <option value="UI设计"></option>

                     <option value="C++"></option>

                 </datalist>

             </label>

             <label for="">

                 入学成绩: <input type="number" max="100" id="score" step="10" value="80">

             </label>

             <label for="">

                 基础水平: <meter min="0" max="100" low="60" high="80" value="80" id="level"></meter>

             </label>

             <label for="">

                 入学日期: <input type="date" value="2016-01-01">

             </label>

             <label for="">

                 毕业时间: <input type="date" value="2016-05-01">

             </label>

             <label for="">

                 课程进度: <progress min="0" max="100" value="10"></progress>

             </label>

             <label for="" class="btn">

                 <input type="submit" value="保存">

             </label>

         </fieldset>

     </form>

     <script>

         var score = document.getElementById('score');

         var level = document.getElementById('level');

         score.oninput = function () {

             level.value = this.value;

         }

     </script>

 </body>

 </html>

纯CSS3制作学生入学档案表单样式代码的更多相关文章

  1. CSS3制作美丽的3D表单

    <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...

  2. 纯css3单选框/复选框美化样式代码

    纯CSS 单/复选框 美化请选择iPhone 型号 iPhone 6s iPhone 6s Plus iPhone 7 iPhone 7 Plus   选择兴趣爱好 女 绘画 摄影 骑行   原理在这 ...

  3. 8个纯CSS3制作的动画应用及源码

    对于一个复杂的图形或者动画来说,之前我们的处理方式是图片叠加或者利用CSS+JavaScript的方法,然而随着CSS3标准的不断成熟,我们甚至完全可以利用CSS3来绘制一些图片和制作丰富的动画特效. ...

  4. CSS源码之纯css3制作的哆啦a梦图片

    本文章向大家介绍一个纯css3制作的哆啦a梦图像,主要巧妙的使用了css3的border-radius属性,需要的朋友介意参考一下本文章的源码. 效果图: 源码 <!doctype html&g ...

  5. 一款简易的CSS3扁平化风格联系表单

    CSS3扁平化风格联系表单是一款CSS3简易联系表单非常清新,整体外观不是那么华丽,但是表单扁平化的风格让人看了非常舒服,同时利用了HTML5元素的特性,表单的验证功能变得也相当简单.经测试效果相当不 ...

  6. 表单验证代码实例:jquery.validate.js表单验证插件

    jquery.validate.js是JQuery旗下的一个验证插件,借助JQuery的优势,我们可以迅速验证一些常见的输入,并且可以自己扩充自己的验证方法.使用前请先下载必要的JQuery插件:jq ...

  7. html5 表单样式 表单验证1 2 3

    html5 表单样式 ie9以下不支持 <!DOCTYPE html> <html lang="en"> <head> <meta cha ...

  8. HTML表单样式

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...

  9. div仿checkbox表单样式美化及功能

    div仿checkbox表单样式美化及功能(checkbox的样式不好看)素材在底部: 效果图: window.css .bj { position: absolute; top: 0; left: ...

随机推荐

  1. 关于重装系统与Visual Studio 2015

    开始入坑  ... 9.25左右,由于本人电脑上同时安装了社区版vs2013与社区版vs2015,.无奈天公不作美,vs2015我每次一点击右上角的“登录”,马上就白屏,并弹窗提示,停止运行(忘了截屏 ...

  2. Javascript小笔记

    1.315360000000 毫秒 = 10年 2.Javascript 取时间截: JavaScript 获取当前时间戳: 第一种方法: var timestamp = Date.parse(new ...

  3. 自定义动画方法animate

    animate的使用方法:animate(params,speed,callback); 例子:animate({ right: "-=600px",height:"+= ...

  4. net 数据库连接详解 相当经典啊

    ADO.NET与抽水的故事 ADO.NET是微软新一代.NET数据库的访问架构,ADO是ActiveX Data Objects的缩写.ADO.NET是数据库应用程序和数据源之间沟通的桥梁,主要提供一 ...

  5. 重新想象 Windows 8 Store Apps (69) - 其它: 自定义启动屏幕, 程序的运行位置, 保持屏幕的点亮状态, MessageDialog, PopupMenu

    [源码下载] 重新想象 Windows 8 Store Apps (69) - 其它: 自定义启动屏幕, 程序的运行位置, 保持屏幕的点亮状态, MessageDialog, PopupMenu 作者 ...

  6. MySQL联接操作

    在MySQL中,联接是一种对表的引用, 多表联接类型: 1．笛卡尔积(交叉联接):在MySQL中为CROSS JOIN或省略JOIN,如: select * from course, teachcou ...

  7. php中的常用数组函数（三）（获取数组交集的函数们 array_intersect()、array_intersect_key()、array_intersect_assoc()、array_intersect_uassoc()、array_intersect_ukey()）

    这5个获取交集的函数 有 5个对应的获取差集的函数.我是链接. array_intersect($arr1, $arr2); //获得数组同键值的交集 array_intersect_key($arr ...

  8. Ubuntu配置任意版本的apt-get镜像

    我们知道,迄今为止,Ubuntu已有多个发行版,如11.04.11.10,以至于现在最新的16.*.而我们平常通过apt-get来安装软件,如果OS版本不同,那么镜像源的配置就不同,否则就会出现找不到 ...

  9. C#中的接口实现多态

    我们都知道虚方法实现多态,抽象方法实现多态等,我们今天来看看如何使用接口实现多态 1.首先我们先要来了解了解什么是接口,它存在的意识 01.接口就是为了约束方法的格式(参数和返回值类型)而存在的 02 ...

  10. bootstrap dialog自行控制窗口的关闭

    在使用dialog的时候,我们通常不希望点击btn的时候自动隐藏dialog,通常需要做一些清理或者ajax操作,在bootstrap dialog中,这是通过 data-dismiss=" ...