<!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. WebApi传参总动员(四)

    前文介绍了Form Data 形式传参,本文介绍json传参. WebApi及Model: public class ValuesController : ApiController { [HttpP ...

  2. 转收藏：Git常用命令速查表

    一. Git 常用命令速查 git branch 查看本地所有分支git status 查看当前状态 git commit 提交 git branch -a 查看所有的分支git branch -r ...

  3. Ansible用于网络设备管理 part 3 使用NAPALM成品库

    闲话 经过了这俩月的闲暇时间的瞎逛和瞎琢磨,我发现NAPALM是一条路,NAPALM是由帅哥David Barroso和美女Elisa Jasinska创建的一个项目,都是颜值高的技术牛人啊,真是不给 ...

  4. js中获取css属性

    直接获取 window.onload = function() { var but = document.getElementById('button'); var div = document.ge ...

  5. Snort - manual 笔记（三）

    1.6 Reading pcap files Snort 不仅可以监听interface, 还可以读取和分析已经捕获的数据包. 1.6.1 Command line arguments 下面的命令都可 ...

  6. 在 SharePoint Server 2013 中配置建议和使用率事件类型

    http://technet.microsoft.com/zh-cn/library/jj715889.aspx 适用于: SharePoint Server 2013 利用使用事件,您可以跟踪用户与 ...

  7. 转：EClipse 10个最有用的快捷键

    Eclipse快捷键 10个最有用的快捷键 Eclipse中10个最有用的快捷键组合  一个Eclipse骨灰级开发者总结了他认为最有用但又不太为人所知的快捷键组合.通过这些组合可以更加容易的浏览源代 ...

  8. windows 80端口被占用的解决方法

    参考文献: 文献1: http://wenku.baidu.com/view/af4681bcfd0a79563c1e7289.html 文献2: http://www.2cto.com/os/201 ...

  9. Android 身份证号码查询、手机号码查询、天气查询

    1.基本信息 身份证号码查询:http://apistore.baidu.com/apiworks/servicedetail/113.html 手机号码:http://apistore.baidu. ...

  10. 浅谈PopupWindow弹出菜单

    实现将一个View显示在某一位置,而且是浮于当前窗口 首先要有一个要显示的view的布局,可以是任意View,包括ViewGroup <?xml version="1.0" ...