html5 css3表单

<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
div{
margin:20px;
}
</style>
<script type="text/javascript"></script>
</HEAD>

<BODY>
	<form id="redemption" method="post">
		<hgroup>
			<h1>Oscar Redemption</h1>
			<h2>Here`s your chance to set the record straight:tell us what year the wrong film got nominated,and which film <b>should</b>have received a nod ...</h2>
		<hgroup>
		<fieldset>
		<legend>About the offending film (part 1 of 3)</legend>
		<div>
			<label for="film">The film in question?</label>
			<input id="film" name="film" type="text" placeholder="e.g.King Kong" required aria-required="true">
		</div>
		<div>
			<label for="search">Search the site...</label>
			<input id="search" name="search" type="search" placeholder="Wyat Earp" autofocus>
		</div>
		<div>
			<label for="tel">Thphone(so we berate you if you're wrong)</label>
			<input id="tel" name="tel" type="tel" placeholder="1-234-546758" autocomplete="off" required aria-required="true">
		</div>
		<div>
			<label for="awardWon">Award Won</label>
			<input id="awardWon" name="awardWon" type="text" list="awards">
			<datalist id="awards">
				<select>
					<option value="Best Picture1"></option>
					<option value="Best Picture2"></option>
					<option value="Best Picture3"></option>
					<option value="Best Picture4"></option>
				</select>
			</datalist>
		</div>
	</form>
</BODY>
</HTML>

时间: 2024-10-24 10:22:02

html5 css3表单的相关文章

精美的HTML5/CSS3表单 带小图标

今天我们要来分享一款非常精美的HTML5/CSS3表单,准备地说,这是一款经过美化的input输入表单,每一个输入表单都可以定义其两侧的小图标,非常华丽.另外,这款表单应用还采用了3种不同的风格主题,你可以在演示页的菜单栏中选择一种样式.需要高版本的浏览器才能支持. 你也可以在这里在线演示 下面我们来简单分析一下这款表单的源代码,源代码由HTML代码.CSS代码及Javascript代码组成.一共3组样式,我们只对其中一组作解说. HTML代码: <ul data-for="prefix&

html5 css3表单新特性

2如何给不支持新特性的浏览器打补丁1 2如何给不支持新特性的浏览器打补丁1Modernizr补丁下载 <!DOCTYPE html> <HTML> <HEAD> <TITLE> New Document </TITLE> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style type="

HTML5 智能表单

1.表单新增属性  ? autofocus 属性 <input type="text" autofocus/>设置 autofocus 属性,使文本框自动获得焦点 注意:一个页面中最多只能有一个表单元素设置该属性,否则功能将失效,建议对第一个input元素设置autofocus属性. ? formaction 属性 <input type="submit" formaction="处理逻辑"><!-- 处理逻辑可为a

HTML5的表单新特性(2)

HTML5 表单新特性:等待了12年之久,我们迎来了HTML5主要修订版本.虽然此版本仍处于测试阶段并且没有宣布正式推出的日期,HTML5的网页设计师和程序员已经就开始关注,并对最新功能展开了热烈讨论. HTML5新特性的目的是改善嵌入,比如视频和音频等多媒体的支持,为开发者和终端用户供简单的编程和更好的用户体验.现在互联网世界都在等待,浏览器更新时能支持HTML5的新版本.HTML5已经被很多浏览器支持,比如Safari, Chrome, FireFox, Opera, IE9,它是向后兼容的

HTML5的表单新特性(3)

虽然目前各种浏览器对HTML5的支持程度参差不齐,但是不可否认HTML5将会成为未来的流行趋势. 一.HTML5表单新增属性 (1)placeholder 这个属性的用处是颇大的,可以向用户显示描述性说明或者提示信息.如果浏览器不支持的话,此属性 会忽略掉,显示浏览器默认的状态.当输入框中有值或者获得焦点的时候,不显示placeholder的值 eg:  您的名字: <input type="text" placeholder="请输入您的真实姓名" name

5.9 HTML5 新增表单控件 ---不是特别重要

HTML5 新增表单控件新增类型:网址 邮箱 日期 时间 星期 数量 范围 电话 颜色 搜索这些控件基本不使用:因为在不同的浏览器中效果不一样.产品设计中不允许多个浏览器效果不同,必须统一. <label>网址:</label><input type="url" name="" required><br><br> <label>邮箱:</label><input type=&q

SpringMVC+Mybatis框架整合源码 项目 下载 rest websocket html5 自定义表单

获取[下载地址]   [免费支持更新]三大数据库 mysql  oracle  sqlsever   更专业.更强悍.适合不同用户群体[新录针对本系统的视频教程,手把手教开发一个模块,快速掌握本系统] A 集成代码生成器 [正反双向(单表.主表.明细表.树形表,开发利器)+快速构建表单; freemaker模版技术 ,0个代码不用写,生成完整的一个模块,带页面.建表sql脚本,处理类,service等完整模块B 集成阿里巴巴数据库连接池druid;  数据库连接池  阿里巴巴的 druid.Dr

小习html5为表单添加的新属性

输入框html5新增属性 在学习任何一种语言时都提到“渐进增强”原则,说白了就是兼容性有木有.虽然html5一些新属性在实际使用中受到限制,但是依然阻挡不了伟大的同伴们学习的脚步.近来有点儿忙,这是2016年第一篇文章.内容比较简单只是了解学习. 输入框按输入的内容分,也就是单行输入和多行输入,既是<input type="">和<textarea></textarea> <textarea></textarea>标签属性 a

HTML5之表单新增属性

之前已经接触过的新增属性:autocomplete.autofocus.list.multiple.placeholder.required.min.max.step from属性:将表单外的内容与表单进行关联 <form action="" id="kc" > <input type="text" name="dd" form="kc" >(不再form表单中) novalidat