<!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. node.js实现CURL功能

    PHP中的CURL功能很好实现,直接四五行代码封装一下就OK了.node.js中如何实现CURL的功能呢,下面详细介绍. 这里需要用到request这个库,所以先安装此包: npm install r ...

  2. mongodb学习6--js操作mongodb

    一,mongo知识储备:1. 获取mongoDB中数据库的大小命令use databasenamedb.stats()显示信息如下 > db.stats() { "collection ...

  3. 记录php日志

    1.记录PHP错误日志 display_errors与log_errors的区别 display_errors 错误回显,一般常用于开发模式,但是很多应用在正式环境中也忘记了关闭此选项.错误回显可以暴 ...

  4. [小北De编程手记] : Lesson 01 - Selenium For C# 之 环境搭建

    在我看来一个自动化测试平台的构建,是一种很好的了解开发语言,单元测试框架,自动化测试驱动,设计模式等等等的途径.因此,在下选择了自动化测试的这个话题来和大家分享一下本人关于软件开发和自动化测试的认识. ...

  5. sql server 2008空间释放

    今天一原来的同事打电话说他们两个表加起来1.2t(每个表都有三四十个字段,6亿条记录),创建了索引之后空间增长到了2.2t,然后没有执行成功.问题在于虽然没执行成功,可是空间没有释放,整个系统只有2. ...

  6. stl空间配置器线程安全问题补充

    摘要 在上一篇博客<STL空间配置器那点事>简单介绍了空间配置器的基本实现 两级空间配置器处理,一级相关细节问题,同时简单描述了STL各组件之间的关系以及设计到的设计模式等. 在最后,又关 ...

  7. SQL注入技术专题—由浅入深【精华聚合贴】

    SQL注入技术专题—由浅入深[精华聚合贴] 不管用什么语言编写的Web应用,它们都用一个共同点,具有交互性并且多数是数据库驱动.在网络中,数据库驱动的Web应用随处可见,由此而存在的SQL注入是影响企 ...

  8. 参加2015年TOP100会议的零散笔记

    2015年出差很少,感到整个技术都已经荒废了,收到12月份TOP100的会议通知后,还是去充点电吧,不然心慌啊.对于软件大会这种大杂烩式的会议已经没有多少兴趣了,看看这个TOP100组织得有何不同? ...

  9. Android Studio 使用小技巧

    1.如何打开设置界面? File --> Settings 快捷键  Ctrl + Alt  + s 2.修改Java文件字体大小 ? File --> Settings --> E ...

  10. 关于const和define的内存分配问题的总结

    关于const和define的内存分配问题 const与#define宏定义的区别----C语言深度剖析 1,  const定义的只读变量在程序运行过程中只有一份拷贝(因为它是全局的只读变量,存放在静 ...