<!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. ActiveReports 报表应用教程 (7)---交叉报表及数据透视图实现方案

    在 ActiveReports 中可以通过矩阵控件非常方便的实现交叉报表,同时还可以设置数据的分组.排序.过滤.小计.合计等操作,可以满足您报表的智能数据分析等需求.在矩阵控件中组的行数和列数由每个行 ...

  2. Spring核心概念之AOP

    一.AOP 的概念 AOP(Aspect Oriented Programming)的缩写,面向切面编程,主要作用就是对代码进行增强处理. 理解面向切面编程的含义:就是在不改变原有程序的基础上为代码增 ...

  3. ECMAScript 6学习笔记（一）：展开运算符

    同步发布于:https://mingjiezhang.github.io/(转载请说明此出处). JavaScript是ECMAScript的实现和扩展,ES6标准的制定也为JavaScript加入了 ...

  4. 同源策略和JSONP（概念性）

    同源策略 浏览器有一个很重要的概念——同源策略(Same-Origin Policy). 所谓同源是指,域名,协议,端口相同.不同源的客户端脚本(javascript.ActionScript)在没明 ...

  5. 软件快速开发平台 JEPF

    JEPF新一代软件快速开发平台(Java Elephant Platform)是一款优秀的平台产品,它本着灵活.快捷开发.高性能.高协作性.高稳定性.高可用性.人性化的操作体验为设计宗旨历经2年研发成 ...

  6. SharePoint通过stsadm备份和还原子网站(不是网站集)

    大家都知道SharePoint的stsadm命令提供了很多便捷甚至是唯一的操作方法! 这里列出的所有命令:http://www.cnblogs.com/dadongzuo/archive/2013/0 ...

  7. 自定义控件--CircleImageView（类似于QQ、微信圆形头像自定义控件）

    现在基本上所有的需要用户注册的APP都有一个需要用户上传头像的需求,上传的头像基本都是类似于QQ.微信等社交应用圆形头像.最近,正在做的一个社交应用多处需要用到这种圆形头像的处理,总不能每次都对图片做 ...

  8. App开发流程之图像处理工具类

    先罗列一下工具类中提供的方法: /** * 根据原始view和毛玻璃样式,获取模糊视图,并自动作为原view的subview(如果不需要作为子视图,自行调用removeFromSuperview) * ...

  9. 读书笔记-Autonomous Intelligent Vehicles（一）

    Autonomous intelligent vehicles have to finish the basic procedures: perceiving and modeling environ ...

  10. 朝花夕拾-android 一个注册新用户时，多步填写用户资料的框架

    源码地址:http://git.oschina.net/zj2012zy/Android-Demo/tree/master/AndroidDemo/setpregister 效果如下: 基本思路: 1 ...