大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
首先先说一个html5中表单新增的一个功能,在我们之前的html中,表单元素必须放在form元素所包含的里面,在html5中,可以把他们写在页面上的任何一个地方,然后给该元素增加一个form属性,form属性的值为form表单的id,如下:
公司主营业务:成都网站设计、网站建设、移动网站开发等业务。帮助企业客户真正实现互联网宣传,提高企业的竞争能力。创新互联建站是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化,感谢他们对我们的高要求,感谢他们从不同领域给我们带来的挑战,让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。创新互联建站推出夏津免费做网站回馈大家。
[html] view plain copy
form method="get" id="test"
input type="text" name="name"/
input type="password" name="password"/
input type="submit" value="提交"
/form
input type="text" name="confirm" form="test"
在form元素里面的表单元素可以不用添加form属性,如果你想利用form获取所有表单元素的值,那么在form元素外面的表单元素就必须添加form属性,input、select、textarea等元素都满足该功能。
接下来开始介绍html5新增的表单元素,所有例子均用谷歌浏览器展示。
新增表单元素
email:提交表单的时候验证输入值是否满足email的格式
input type="email" name="email"/
url:提交表单的时候验证输入值是否满足url的格式
input type="url" name="url"/
number:根据你的设置提供选择数字的功能,其中min为最小值,max为最大值,value为默认值,step为点击箭头时数字的变化量,max、min、step、value均可不写,目前某些浏览器还不支持。
input type="number" name="number" min=2 max=100 step=5 value="15"/
range:会以一个滑块的形式表现包含一定范围内数字值的输入域,max为最大值,min为最小值,value为默认值,如果没有设置max和min,默认值是1-100
input type="range" name="range" min=20 max=200 value="60"/
日期和时间类型:
date:选取日、月、年
input type="date" name="date"/
month:选取月、年
input type="month" name="month"/
week:选取周、年
input type="week" name="week"/
time:选取小时、分钟
input type="time" name="time"/
datetime:选取时间、日、月、年(UTC时间)(我这里浏览器显示不出效果)
input type="datetime" name="datetime"/
datetime-local:选取时间、日、月、年(本地时间)
input type="datetime-local" name="datetime-local"/
search:用于搜索域,若加上result="s"属性,则会在搜索框前面加一个搜索图标(我这里浏览器显示不出效果)
input type="search" name="search" result="s"/
tel:验证输入的是否是电话号码的格式(我这里浏览器显示不出效果)
input type="tel" name="tel" /
color:color类型会提供颜色拾取器,供用户选择颜色,并将用户选择的颜色填充到此元素中
input type="color" name="color"/
新增input属性(部分容易理解的就不进行代码演示了),后面为支持该属性的元素
autofocus:在打开页面时使元素自动获取焦点 //input,button,select,textarea
placeholder: 在用户输入时进行提示 // input,textarea
form:这篇文章的开头就有这个属性,它用于表明元素属于哪个表单,无论元素的位置在哪里,所属表单都能获取该元素的值 //input,output,button,select,textarea,fieldset
required:表明该元素是必填项,当提交表单的时候会自动验证该元素的内容是否不为空 //input,textarea
max/min/step:限制值的输入范围,以及值的变化程度。上面的新增number元素有介绍。 //input
autocomplete:使form元素或者input元素拥有自动完成功能,既记录用户之前输入的值,关闭为off,默认为on。 //form,input
表单重写属性: //input
formaction:重写表单的action属性
formenctype:重写表单的enctype属性。
enctype属性管理的是表单的MIME编码,MIME就是一种电子邮件传输的互联网标准,表明传递的信息类型和编码,共有三个值可选:
1,application/x-www-form-urlencoded(默认),设置表单传输的编码。
2,multipart/form-data,指定传输数据的特殊类型,主要就是上传的非文本内容,比如文件、图片。
3,text/plain,纯文本传输。
formmethod: 重写表单的method属性
formnovalidate:重写表单的novalidate属性
formtarget:重写表单的target属性。
比如:
[html] view plain copy
form action="test.html" method="get" autocomplete="on"
姓名: input type="text" name="name" /br /
密码: input type="password" name="pwd" /br /
input type="submit" formnovalidate="true" value="提交未经验证"/
/form
multiple:规定输入字段可选择多个值 //input,select
list:list属性的值为datalist元素的id,datalist元素类似于选择框,在文本框获得焦点的时候以提示输入的方式显示。如下:
[html] view plain copy
姓名:input type="text" name="name" list="name"/
datalist id="name"
option value="zhangsan"张三/option
option value="lisi"李四/option
option value-"wanger"王二/option
/datalist
pattern:验证input输入域的格式,即正则表达式。
input type="text" name="name" pattern="[A-z0-9]{8}"/
为了更好地处理今天的互联网应用,HTML5添加了很多新元素及功能,比如: 图形的绘制,多媒体内容,更好的页面结构,更好的形式 处理,和几个api拖放元素,定位,包括网页 应用程序缓存,存储,网络工作者,等。
canvas 标签定义图形,比如图表和其他图像。该标签基于 JavaScript 的绘图 API
新多媒体元素:
audio 定义音频内容
video 定义视频(video 或者 movie)
source 定义多媒体资源 video 和 audio
embed 定义嵌入的内容,比如插件。
track 为诸如 video 和 audio 元素之类的媒介规定外部文本轨道。
新表单元素:
datalist 定义选项列表。请与 input 元素配合使用该元素,来定义 input 可能的值。
keygen 规定用于表单的密钥对生成器字段。
output 定义不同类型的输出,比如脚本的输出。
新的语义和结构元素:
article 定义页面独立的内容区域。
aside 定义页面的侧边栏内容。
bdi 允许您设置一段文本,使其脱离其父元素的文本方向设置。
command 定义命令按钮,比如单选按钮、复选框或按钮
details 用于描述文档或文档某个部分的细节
dialog 定义对话框,比如提示框
summary 标签包含 details 元素的标题
figure 规定独立的流内容(图像、图表、照片、代码等等)。
figcaption 定义 figure 元素的标题
footer 定义 section 或 document 的页脚。
header 定义了文档的头部区域
mark 定义带有记号的文本。
meter 定义度量衡。仅用于已知最大和最小值的度量。
nav 定义运行中的进度(进程)。
progress 定义任何类型的任务的进度。
ruby 定义 ruby 注释(中文注音或字符)。
rt 定义字符(中文注音或字符)的解释或发音。
rp 在 ruby 注释中使用,定义不支持 ruby 元素的浏览器所显示的内容。
section 定义文档中的节(section、区段)。
time 定义日期或时间。
wbr 规定在文本中的何处适合添加换行符。
html5新增标签大致如下:
canvas 新元素
canvas 标签定义图形,比如图表和其他图像。该标签基于 JavaScript 的绘图 API
新多媒体元素
audio 定义音频内容
video 定义视频(video 或者 movie)
source 定义多媒体资源 video 和 audio
embed 定义嵌入的内容,比如插件。
track 为诸如 video 和 audio 元素之类的媒介规定外部文本轨道。
新表单元素
datalist 定义选项列表。请与 input 元素配合使用该元素,来定义 input 可能的值。
keygen 规定用于表单的密钥对生成器字段。
output 定义不同类型的输出,比如脚本的输出。
新的语义和结构元素
HTML5提供了新的元素来创建更好的页面结构:
article 定义页面独立的内容区域。
aside 定义页面的侧边栏内容。
bdi 允许您设置一段文本,使其脱离其父元素的文本方向设置。
command 定义命令按钮,比如单选按钮、复选框或按钮
details 用于描述文档或文档某个部分的细节
dialog 定义对话框,比如提示框
summary 标签包含 details 元素的标题
figure 规定独立的流内容(图像、图表、照片、代码等等)。
figcaption 定义 figure 元素的标题
footer 定义 section 或 document 的页脚。
header 定义了文档的头部区域
mark 定义带有记号的文本。
meter 定义度量衡。仅用于已知最大和最小值的度量。
nav 定义导航链接的部分。
progress 定义任何类型的任务的进度。
ruby 定义 ruby 注释(中文注音或字符)。
rt 定义字符(中文注音或字符)的解释或发音。
rp 在 ruby 注释中使用,定义不支持 ruby 元素的浏览器所显示的内容。
section 定义文档中的节(section、区段)。
time 定义日期或时间。
wbr 规定在文本中的何处适合添加换行符。
初学者建议多访问下菜鸟教程:网页链接,都是比较全面的基础知识,可以看做编程词典,即使老司机也经常去查一些资料。
新增的结构标签:
1、header元素
表示页面中一个区块或真个页面的标题。
2、内hgroup元素
表示对真个页面或页面中的容一个内容区块的标题进行组合。
3、article元素
表示页面中一块与上下文不相关的独立内容。比如一篇文章。
4、aside元素
表示article元素内容之外的、与article元素内容相关的辅助信息。
5、footer元素
表示整个页面或页面中一个内容区块的脚注。一般来说,他会包含创作者的姓名、创作日期以及创作者的联系信息。
HTML5新规则:
新特性应该基于 HTML、CSS、DOM 以及 JavaScript。 减少对外部插件的需求(比如 Flash),更优秀的错误处理,更多取代脚本的标记,HTML5 应该独立于设备开发进程应对公众透明 ;
HTML5 新特性:
新的特殊内容元素,比如 article、footer等,新的表单控件,比如 calendar、date、time、email、url、search;用于媒介回放的 video 和 audio 元素;用于绘画的 canvas 元素
对本地离线存储的更好的支持。
html5新增标签如下:
1、结构性标记结构性标记主要用来对页面结构进行划分,就像在设计网页时将页面分为导航、内容部分、页脚等,确保HTML文档的完整性。
2、多媒体标记多媒体标记主要解决了以往通过Flash等进行视频的一些展示,新增的标记使HTML功能变得更加强大了。
3、表单标记表单标记主要用于功能性的内容表达,会有一定的内容和数据的关联。
html5的意义及应用。
在HTML页面中,带有“ ”符号的元素被称为HTML标签,如上面提到的 HTML、head、body都是HTML标签。所谓标签就是放在“ ” 标签符中表示某个功能的编码命令,称为HTML标签。
该语法中“标签名”表示该标签的作用开始,一般称为“开始标签(start tag)”,“/标签名” 表示该标签的作用结束,一般称为“结束标签(end tag)”。和开始标签相比,结束标签只是在前面加了一个关闭符“/”。