<!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. SQLServer根据不同前缀生成多套流水号

    --种子表 --@prefix 前缀 --@seed 种子值 create table RefNoSeed( prefix ) unique, seed int ) go --测试表 --@inser ...

  2. php配合jquery实现增删操作

    后台使用php,前台引用jquery,实现增删操作,代码如下: <script type="text/javascript" src="http://keleyi. ...

  3. 【循序渐进学Python】7.面向对象的核心——类型(上)

    我们知道Python是一门面向对象的脚本语言.从C#的角度来看:首先Python支持多继承.Python 类型成员通常都是public的,并且所有成员函数都是virtual的(可以直接重写). 1. ...

  4. WebApi传参总动员(四)

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

  5. 金山快盘有Linux版了

    似乎是2013-09-29最早发出的新闻. 怎么会没有一点传播呢,难道这么不招待见吗? 出品方是中科麒麟. http://www.ubuntukylin.com/applications/showim ...

  6. php中的引用类型和值类型

    PHP中的四种简单类型和复杂类型array都是值类型.同类型间赋值传递的是值,即创建一个副本给新变量. 例如: $int1 = 123; $int2 = $int1;//直接传递的是值,只是做了一个叫 ...

  7. [WP8] 使用ApplicationMenu与使用者互动

    [WP8] 使用ApplicationMenu与使用者互动 范例下载 范例程序代码:点此下载 功能说明 使用过Lumia系列手机的开发人员,对于内建的相机功能相信都很熟悉.在Lumia内建的相机功能中 ...

  8. jQuery eislideshow 图片轮播

    在线实例 基础演示 自动播放 使用方法 <div id="ei-slider" class="ei-slider"> <ul class=&q ...

  9. PHP写日志函数

    初学,写一个函数用于存储日志调试. function WriteLog($msg) { $filename = dirname(__FILE__) ."\\Debug.log"; ...

  10. VC连接mysql数据库错误：libmysql.lib : fatal error LNK1113: invalid machine 解决方法

    VC连接MySQL的配置过程在上一篇博文中,不过当你设置好,以为万事大吉的时候,运行却出现这个错误:libmysql.lib : fatal error LNK1113: invalid machin ...