html5-表单


例子:
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-表单的更多相关文章
- 实现跨浏览器html5表单验证
div:nth-of-type(odd){ float: left; clear: left; } .origin-effect > div:nth-of-type(even){ float: ...
- html5表单验证
表单验证为终端用户检测无效的数据并标记这些错误,是一种用户体验的优化. 下面展现浏览器自带的验证功能也可在移动端中查看: HTML部分: <!DOCTYPE html> <html ...
- Ideal Forms – 帮助你建立响应式 HTML5 表单
Ideal Forms 是建立和验证响应式 HTML5 表单的终极框架.它刚刚发布 V3 版本,更小,更快,更具可扩展性.它支持实时验证,完全自适应(适应容器,没有 CSS 媒体查询需要),键盘支持, ...
- HTML5学习总结-05 HTML5表单
一 HTML5 新的类型 HTML5 拥有多个新的表单输入类型.这些新特性提供了更好的输入控制和验证. email url number range Date pickers (date, month ...
- html5 表单样式 表单验证1 2 3
html5 表单样式 ie9以下不支持 <!DOCTYPE html> <html lang="en"> <head> <meta cha ...
- HTML5跨浏览器表单及HTML5表单的渐进增强
HTML5跨浏览器表单 http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-cross-browser-html5-f ...
- HTML5表单提交和PHP环境搭建
HTML5表单提交相关内容和PHP环境搭建需要的软件(只备注) (2)举例介绍 (3)PHP环境搭建
- HTML5表单及其验证
随笔- 15 文章- 1 评论- 115 HTML5表单及其验证 HTML表单一直都是Web的核心技术之一,有了它我们才能在Web上进行各种各样的应用.HTML5 Forms新增了许多新控件及其A ...
- HTML5表单新属性
HTML5表单新属性 autofocus 自动聚焦 <input type="text" autofocus> placeholder占位文本 tel ...
- HTML5 表单元素和属性
HTML5 表单元素和属性学习 版权声明:未经博主授权,内容严禁转载 ! 表单元素简介 无论实现提交功能还是展示页面功能,表单在HTML中的作用都十分重要. 在其他版本的HTML中,表单能够包含的元素 ...
随机推荐
- 加密解密及其javascript实现
前端提交数据到后台,如果不适用https协议,则提交的数据就有被第三者窃取的可能.前端使用js来编码数据主要分为以下三种: 1.摘要算法 2.对称加密 3.非对称加密 下面分别介绍三种算法中对应的一个 ...
- ZeroClipboard 插件实现文本复制到剪贴板
ZeroClipboard 的官网 点这里,github地址 点这里. 事例如下: 在引入 ZeroClipboard.js 之后, <button id="clip_button&q ...
- div显示滚动条
div显示上下左右滚动条 <div style="width:260px;height:120px; overflow:scroll; border:1px solid;"& ...
- C++用递归方式实现在对不更改随机数组的情况下查找最大值
#include <iostream> #include <iomanip> #include <ctime> using namespace std; int M ...
- 什么是JSP?它有哪些特点?
什么是JSP? 它有哪些特点? JSP是服务器端的一种基于java语言的网页技术,它是由一些JSP标记,java程序段以及HTML文件组成的结合体,以java语言作为其内置的脚本语言. 实质上是通 ...
- java权限修饰符
- 【001:转载 ubuntu下: 建立本地SVN服务器】
1.安装 svn 工具 $sudo apt-get install subversion 2. 创建工程文件夹,用于存放工程 $mkdir ~/localsvn $mkdir ~/localsvn/ ...
- 【转】PowerShell入门(九):访问.Net程序集、COM和WMI
转至:http://www.cnblogs.com/ceachy/archive/2013/02/28/PowerShell_DotNet_COM_WMI.html PowerShell可以设计的大而 ...
- .Net程序员安卓学习之路4:使用xutils Get Post数据
前面使用了一些网络上找来的类进行网络访问,后来发现了安卓开发中有一个国人写的类库xutils比较全面,也比较经典,故后续使用xutils类库进行记录. 本例服务端使用WCF来实现,写好的WCF服务端在 ...
- VBA 操作 Excel 生成日期及星期
直接上代码~~ 1. 在一个 Excel 生成当月或当年指定月份的日期及星期 ' 获取星期的显示 Function disp(i As Integer) Select Case i disp = & ...