html5 main form 结合,web组件之表单(HTML5)
话说表单在html5之前,如果想交互验证的话,需要js、jquery脚本来支撑,更别提日期控件,颜色控件,数字控件了。
最近系统的学习了HTML5的表单,外加CSS3(不得不说CSS3真的是吊炸天啊 ),于是乎就有了web组件之表单。
废话就不多说了,分享上来主要是让大家能够用的。关于表单中的日期控件,数字,颜色,进度条,大家可以在github上尝试。
啰嗦两句的是,为了适应IE8,以及一些浏览器的兼容,用了腻子脚本
这样这个表单可以在低版本浏览器里,不暴露丑陋的外表了。
样式中用到了css3的背景渐变,其中按钮用到了浮雕设计。
在此感谢 《响应式Web设计:HTML5和CSS3实战》让我受益匪浅,也欢迎大家购买阅读。
html代码片段:
HTML5 Form
Here's the HTML5 Form controlers Let's try ...
About the HTML (part 1 of 3)
The HTML Name
Year
Datalist
Textarea
Range
5
function showValue(newValue)
{
document.getElementById("range").innerHTML=newValue;
}
About the HTML (part 2 of 3)
HTML
Textarea
Number Step
About the HTML (part 3 of 3)
Your Name
Your favorite color
Date/Time
Telephone
Your Email address
Your Web address
css代码片段:
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
}
ol, ul {
list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}
/* self-clear floats */
.group:after {
content: ".";
display: block;
height: 0px;
clear: both;
visibility: hidden;
}
/* wrap url's */
pre {
white-space: pre; /* CSS 2.0 */
white-space: pre-wrap; /* CSS 2.1 */
white-space: pre-line; /* CSS 3.0 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: -moz-pre-wrap; /* Mozilla */
white-space: -hp-pre-wrap; /* HP Printers */
word-wrap: break-word; /* IE 5+ */
}
/* @group Fonts Group */
@font-face {
font-family: 'BitstreamVeraSansRoman';
src: url('../fonts/Vera-webfont.eot');
src: url('../fonts/Vera-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/Vera-webfont.woff') format('woff'),
url('../fonts/Vera-webfont.ttf') format('truetype'),
url('../fonts/Vera-webfont.svg#BitstreamVeraSansRoman') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'BebasNeueRegular';
src: url('../fonts/BebasNeue-webfont.eot');
src: url('../fonts/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/BebasNeue-webfont.woff') format('woff'),
url('../fonts/BebasNeue-webfont.ttf') format('truetype'),
url('../fonts/BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'ColaborateThinRegular';
src: url('../fonts/ColabThi-webfont.eot');
src: url('../fonts/ColabThi-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/ColabThi-webfont.woff') format('woff'),
url('../fonts/ColabThi-webfont.ttf') format('truetype'),
url('../fonts/ColabThi-webfont.svg#ColaborateThinRegular') format('svg');
font-weight: normal;
font-style: normal;
}
/* @end */
#content{
width:72%;
margin:0 auto;
height:100%;
}
#content h1 {
text-transform: uppercase;
font-family: 'BebasNeueRegular';
font-size: 6.375em; /* 102 ÷ 16 */
text-shadow: 0px 1px white,4px 4px 0px #dad7d7 ; /* 4 ÷ 102 */
}
* {
-webkit-transition: all 1s;
}
#content a span {
font-size: 1.3em;
}
#content p i {
font-weight: normal;
font-style: normal;
}
#content h2 {
font-family: 'BebasNeueRegular'; font-size: 1.875em/* 30px ÷ 16 */; text-transform: uppercase;
}
#redemption {
width: 100%;
font-family: 'ColaborateThinRegular';
font-weight: 400;
}
#redemption hgroup{
margin-bottom: 20px;
}
#redemption div {
width: 100%;
margin-bottom: 15px;
float: left;
}
#redemption span#range {
float: left;
font-size: 3em;
width: 100%;
color: red;
clear: both;
text-align: center;
}
#h_number,#h_Year {
text-align: right;
}
#redemption fieldset{
border: 1px dotted #ccc;
padding: 2%;
margin-bottom: 20px;
background: #ffffff;
background: -moz-linear-gradient(top, #ffffff 77%, #f2f2f2 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(77%,#ffffff), color-stop(100%,#f2f2f2));
background: -webkit-linear-gradient(top, #ffffff 77%,#f2f2f2 100%);
background: -o-linear-gradient(top, #ffffff 77%,#f2f2f2 100%);
background: -ms-linear-gradient(top, #ffffff 77%,#f2f2f2 100%);
background: linear-gradient(top, #ffffff 77%,#f2f2f2 100%);
border-radius: 4px;
box-shadow: 2px 2px 5px hsla(0, 0%, 16.6667%, 0.3);
}
#redemption legend{
font-style: italic;
margin-bottom: 20px;
float: left;
color:#434242;
width:100%;
font-size: 0.8em;
}
#redemption label {
width: 40%;
float: left;
}
input {
height: 20px;
font-size: 1em;
width: 40%;
float: right;
}
#redemption textarea {
height: 60px;
font-size: 1em;
width: 40%;
float: right;
}
#redemption input#submit {
text-decoration: none;
height: 34px;
font: 1.25em /* 36px ÷ 16 */ 'BebasNeueRegular';
background-color: #b01c20;
border-radius: 8px;
color: white;
float: right;
margin-bottom: 10px;
background: -moz-linear-gradient(top, rgb(241,92,96) 0%, rgb(176,28,32) 100%);
background: -webkit-linear-gradient(top, rgb(241,92,96) 0%,rgb(176,28,32) 100%);
margin-top: 10px;
box-shadow: 5px 5px 5px hsla(0, 0%, 26.6667%, 0.8);
text-shadow: 0px 1px black;
border: 1px solid #bfbfbf;
}
input:not([type="range"]), textarea, select {
border: 1px solid #bfbfbf;
padding: 0.2em;
font-size: 1.1em;
line-height: 1.2em;
background: #ffffff;
background: -moz-linear-gradient(top, #ffffff 0%, #ededed 8%, #ffffff 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(8%,#ededed), color-stop(100%,#ffffff));
background: -webkit-linear-gradient(top, #ffffff 0%,#ededed 8%,#ffffff 100%);
background: -o-linear-gradient(top, #ffffff 0%,#ededed 8%,#ffffff 100%);
background: -ms-linear-gradient(top, #ffffff 0%,#ededed 8%,#ffffff 100%);
background: linear-gradient(top, #ffffff 0%,#ededed 8%,#ffffff 100%);
border-radius: 4px;
/* -webkit-appearance: none; */
box-shadow: 2px 2px 5px hsla(0, 0%, 16.6667%, 0.1);
}
.polyfill-important .input-range,.polyfill-important .step-controls {
float: right;
}
input:required {
border: 1px solid rgba(253, 8, 8, 0.29);
}
html5 main form 结合,web组件之表单(HTML5)相关推荐
- web元件库/常用web组件/常用表单/导航栏/边框/图标/日期时间选择器/评分组件/穿梭框/输入框/步骤条/计数器/输入框/Axure原型/axure元件库/rp原型/交互控件/五星评分器/导航框架
web元件库/axure元件库/常用web组件/常用表单/导航栏/边框/图标/日期时间选择器/评分组件/穿梭框/输入框/步骤条 /交互控件:单/多选框.输入框.计数器.选择器.级联选择.滑动开关.滑块 ...
- web元件库/axure元件库/常用web组件/常用表单/导航栏/边框/图标/日期时间选择器/评分组件/穿梭框/输入框/步骤条/
web元件库/axure元件库/常用web组件/常用表单/导航栏/边框/图标/日期时间选择器/评分组件/穿梭框/输入框/步骤条/ Axure原型演示及下载地址请点击:https://www.pmdan ...
- tornado 自定义WEB框架 、与Tyrion组件做表单验证
一:目录结构: app.py文件中写程序逻辑,路由.表单验证(使用Tyrion 开源组件完成 ) import Tyrion import tornado.web import tornado.iol ...
- html5 form表单,html5 教程
2019独角兽企业重金招聘Python工程师标准>>> html5 form表单 html5 教程 html5 form表单表单介绍 1.XHTML中需要放在form之中的诸如inp ...
- Element-UI组件之表单Form
Element-UI组件之表单Form Radio 单选框 基础用法 禁用状态 单选框组 按钮样式 带有边框 Checkbox 多选框 基础用法 禁用状态 多选框组 indeterminate 状态 ...
- ASP.NET Web Pages:表单
ylbtech-.Net-ASP.NET Web Pages:表单 1.返回顶部 1. ASP.NET Web Pages - HTML 表单 表单是 HTML 文档中放置输入控件(文本框.复选框.单 ...
- Web开发-Django表单
Django表单 简述 虽然在Django的核心组件中没有看到表单的影子,但是熟悉Web开发的都知道,表单控制是至关重要的. 表单一般放在某个app目录下的forms.py文件中. 基本操作 表单绑定 ...
- web网页的表单排版利器--960css
表单排版样式 960css 前言 一般web网页的表单排版,大家都习惯用table排版,自己需要根据实际需要去定义TR和TD,很多时候对于TD的高宽度.是否合并行,合并列,都要去做一些处理,这些都是比 ...
- onsubmit=“return check() 给form加onsubmit 验证所有表单后再提交,可以用返回false 来阻止submit提交
onsubmit="return check() 给form加onsubmit 验证所有表单后再提交,可以用返回false 来阻止submit提交<form class="f ...
- form 表单 + HTML5(FileReader) +iframe 实现无刷新图片上传+图片预览效果
作为一个初入前端的菜鸟,最近因为一个无刷新上传图片问题走了很多弯路,所以在这里给大家分享一下,不足之处希望谅解.无刷新上传图片一般有两种方式,一种是 form 表单+iframe ,还有一种是 aja ...
最新文章
- 【每日一算法】买卖股票的最佳时机
- OpenStack 界面开发中的排序问题
- python编程语言创始人-Python简史:开发者的小小副业如何成为全球最热编程语言?...
- python专科就业难吗-python好就业吗
- C语言小知识点练习总结
- tensorflow教程 开始——Premade Estimators(预制评估器)
- 水晶报表分组分栏_web报表可视化设计器工具推荐
- 数据装载全/存量直接装载到目标表_09
- 基于vue的video播放组件
- 用C#实现屏幕键盘!
- 计算机学院会会,欢迎访问武汉理工大学计算机科学与技术学院
- 自动化测试指南-自动化测试工程师必备的技能
- Dll学习心得(2)
- html 编辑器插件安装,最新版CKEditor的配置方法及插件(Plugin)编写示例
- Java面试题(全)
- paypal 付款、支出接入文档及官方示例
- uniapp开发微信小程序教程(一)
- 你写论文时发现了哪些神网站?
- springboot+uniapp上传图片
- DevExpress的双击获取单元格数据
热门文章
- 【华为二面】2020/3/25_华为第二次技术面试_45分钟
- 指环王中那个白色头发、擅长用弓箭的精灵族男子
- 一个管理系统实体联系图
- Android.Oldboot.1,腾讯手机管家发布全球首款可根除Oldboot病毒专杀
- HTML CSS设计与构建网站 ([美]达科特) PDF原版​
- uniapp签名使用canvas实现多张图片合成一张
- window10 重装后“未安装任何音频输出设备”
- 设置QQ空间评论回复权限,包括日志、相册、说说、留言板的评论回复和留言权限,限制名单成员无评论回复权限
- docker安装Lefse和分析流程
- 注塑缺陷浮纤的原因及解决对策