例子:

text,number,email 的输入框

       <!-- required:必填项 -->
<!-- autofocus:获得焦点 -->
<!-- placeholder="请输入姓名" --> <label for="name">
姓名:<input type="text" name="" id="name" required autofocus placeholder="请输入姓名">
</label>
<label class="lab">
手机号:<input type="tel" name="" pattern="1\d{10}" required placeholder="请输入手机号">
</label>
<label>
email:<input type="email" name="" placeholder="请输入email">
</label>

下拉框自动填充:、

      <label>                
        所属学院:<input type="text" name="" list="cla" placeholder="软件测试1503班">
<datalist id="cla">
<option value="软件测试1501班"></option>
<option value="软件测试1501班"></option>
<option value="软件测试1501班"></option>
<option value="软件测试1504班"></option>
</datalist>
</label>

其他:

            <label>
入学成绩:<input type="number" max="100" step="10" value="80" name="" id="score">
</label>
<label>
基础水平:<meter min="0" max="100" low="60" high="80" id="level" value="80"></meter>
</label>
<label>
入学时间:<input type="date" value="2016-09-01">
</label>
<label>
毕业时间:<input type="date" value="2017-09-01">
</label>
<label>
课程进度:<progress value="30" max="100" min="0"></picture>
</label>
<input type="submit" name="" value="提交" id="but">

html自定义字体:

     body{
font-family: 'myface', serif;
font-size: 24px;
}
@font-face {
font-family: 'myface';
src: url('./LANENAR_-webfont.ttf');
}

标题:

    <form action="">
<fieldset>
<legend>学生档案</legend> </fieldset>
</form>

html5-表单的更多相关文章

  1. 实现跨浏览器html5表单验证

    div:nth-of-type(odd){ float: left; clear: left; } .origin-effect > div:nth-of-type(even){ float: ...

  2. html5表单验证

    表单验证为终端用户检测无效的数据并标记这些错误,是一种用户体验的优化. 下面展现浏览器自带的验证功能也可在移动端中查看: HTML部分: <!DOCTYPE html> <html ...

  3. Ideal Forms – 帮助你建立响应式 HTML5 表单

    Ideal Forms 是建立和验证响应式 HTML5 表单的终极框架.它刚刚发布 V3 版本,更小,更快,更具可扩展性.它支持实时验证,完全自适应(适应容器,没有 CSS 媒体查询需要),键盘支持, ...

  4. HTML5学习总结-05 HTML5表单

    一 HTML5 新的类型 HTML5 拥有多个新的表单输入类型.这些新特性提供了更好的输入控制和验证. email url number range Date pickers (date, month ...

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

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

  6. HTML5跨浏览器表单及HTML5表单的渐进增强

    HTML5跨浏览器表单 http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-cross-browser-html5-f ...

  7. HTML5表单提交和PHP环境搭建

    HTML5表单提交相关内容和PHP环境搭建需要的软件(只备注) (2)举例介绍 (3)PHP环境搭建

  8. HTML5表单及其验证

    随笔- 15 文章- 1 评论- 115 HTML5表单及其验证   HTML表单一直都是Web的核心技术之一,有了它我们才能在Web上进行各种各样的应用.HTML5 Forms新增了许多新控件及其A ...

  9. HTML5表单新属性

    HTML5表单新属性 autofocus  自动聚焦 <input type="text" autofocus> placeholder占位文本 tel         ...

  10. HTML5 表单元素和属性

    HTML5 表单元素和属性学习 版权声明:未经博主授权,内容严禁转载 ! 表单元素简介 无论实现提交功能还是展示页面功能,表单在HTML中的作用都十分重要. 在其他版本的HTML中,表单能够包含的元素 ...

随机推荐

  1. Java 类加载机制

    类的加载: 类的初始化: 类什么时候才被初始化:1)创建类的实例,也就是new一个对象2)访问某个类或接口的静态变量,或者对该静态变量赋值3)调用类的静态方法4)反射(Class.forName(&q ...

  2. JS错误捕获

    try/catch/finally错误捕获 try { //一旦try中出现错误,直接跳到执行catch的内容,执行完catch的内容,代码继续执行 throw new Error('错误'); // ...

  3. ftp 530 This FTP serveris anonymous only,

    引用:http://blog.sina.com.cn/s/blog_7e16680c01018ox1.html 三.遇到的问题 1.只允许匿名用户登录 现象:ftp连接过程中,提示输入用户名,输入本机 ...

  4. 助手系列之连接mysql数据库

    import MySQLdbdef main(): try: conn=MySQLdb.connect(host='127.0.0.1',user='root',passwd='pass',db='a ...

  5. Turtlebot入门篇

    0.什么是TurtleBot? 我自己的理解就是:TurtleBot是一款移动机器人,就是主要研究让机器人自主决定应该想那个方向走,怎么绕过障碍物,最终到达目的地.与之对应还有很多机器人,比如goog ...

  6. [5] 智能指针boost::shared_ptr

    [1]boost::shared_ptr简介 boost::shared_ptr属于boost库,定义在namespace boost中,包含头文件#include<boost/shared_p ...

  7. python-操作csv文件

    import csv lv,er=[],[] #读 with open('date.csv') as mycsv: reader=csv.DictReader(mycsv) for row in re ...

  8. Css Study - 纵向Menu - By html and Css

    http://www.wikihow.com/Create-a-Dropdown-Menu-in-HTML-and-CSS HTML <div id="leftmenu"&g ...

  9. 页面缩放对css的影响

    昨天发现一个上线的项目css样式明显不对,但是查看别人的电脑上的页面样式都是没问题的,于是找了半天原因,原来是我的浏览器对这个页面缩放了,导致样式问题. 发现了页面缩放会作用在同一个域名下的所有页面, ...

  10. laravel框架总结(五) -- 服务提供者(提及契约Contracts)

    首先理解两个概念 1.契约:一组定义了框架核心服务的接口 2.服务提供者:所有 Laravel 应用程序启动的中心所在. 包括你自己的应用程序,以及所有的 Laravel 核心服务,都是通过服务提供者 ...