关闭

WEB前端 -- input类型、fieldset、HTML5新标签

标签: WEB前端inputHTML5新增标签
70人阅读 评论(0) 收藏 举报
分类:

1.fieldset:将表单中的相关元素进行分组,生成一组相关表单的字段

<form action="">
   <fieldset>
    	<legend>学生信息</legend>
        姓名:<input type="text" name="xm" placeholder="请输入用户名"/><br/><!-- name:需要提交到后台时需要设置 -->
        性别:
        <label for="boy">男</label>
        <input type="radio" id="boy" name="gender"/>
        <label for="girl">女</label>
        <input type="radio" id="girl" name="gender"/>
        <br />
        <input  type="submit" value="提交"/><!-- value:设置按钮的名称,这样可以不用担心因浏览器的不同按钮显示值不一样 -->
        <input  type="reset" value="重置"/>
    </fieldset>
</form>

2.input类型

请选择数字:<input type="number" min="6" max="10" value="7"/><br />

改变值:<input type="range" min="0" max="200" value="100"/><!--value:默认到的值--><br />
颜色:<input type="color"/><br />
日期:<input type="date"/><br />

搜索:<input type="search"/>

3.HTML5部分新标签

1)progress:进度标签 value:当前值,max:最大值,min:默认为0

2)section:文档中的节或章(一般与div作用一样,用于布局)

3)video:支持视频

4)audio:支持音频

5)source:资源

6)datalist:提示可能的值,与select写法不一样,datalist需要显示的内容写在option的value属性中

     和input一起使用,list="datalist的id"

<input list="tools" />
<datalist id="tools">
          <option value="tools1"></option>
          <option value="tools2"></option>
          <option value="tools3"></option>
</datalist>

7)embed:引入Flash或插件

8)canvas:画布标签,默认300px*150px

9)header

10)footer

11)aside:定义页面的侧边栏内容,不会对页面的样式有修改,只有更有语义

12)article:定义页面的独立的内容区域,一般为文章

13)details:文档某个地方的细节

14)summary:details中的标题

15)time:定义日期或时间,datetime="2017-12-24"

16)ruby:2个子元素。rt:音标和rp:不支持时显示

17)mark:标记

18)nav:导航链接

0
0
查看评论

HTML5新增input元素的类型

记住这些可以省去很多麻烦
  • qq_35095321
  • qq_35095321
  • 2017-03-16 12:30
  • 746

HTML5中新增的input类型及其属性

HTML5中新增的input类型及其属性HTML4.01中,input的类型只有text、button、password、submit、radio、checkbox和hidden(隐藏域)。H5中新增了一些类型,使用起来更加方便,包括: color 点击时弹出颜色选择器,可以选择任意颜色 nu...
  • rishonyou
  • rishonyou
  • 2017-02-22 11:48
  • 3238

(HTML控件篇)fieldset和legend标签的属性和使用方法

  晚上在随便看一个网页Ajax无刷新聊天室程序的时候,突然看到了fieldset和legend标签,这是我第一次接触和看到这两个HTML标签,感觉很陌生,这或许就是我从弃医从IT的悲剧吧,没怎么完整的学过HTML,不过我不叹息,亡羊补牢,现在就把这两个标签好好学习学习。知识嘛本来就是一个...
  • nanyida0416sushe
  • nanyida0416sushe
  • 2010-05-30 01:06
  • 24390

HTML5新增标签最有用的总结

HTML5新增标签:概要1. HTML5 简介: (HTML5 是目前-2017年来说,是最新的一代HTML标准)2. HTML5 一些新的规则: 新特性应该基于 HTML、CSS、DOM 以及 JavaScript。 减少对外部插件的需求(比如 Flash) ...
  • AndyNikolas
  • AndyNikolas
  • 2017-02-06 16:50
  • 3725

解决HTML5新标签不兼容的问题

方式一:Coding JavaScript    (function() {      if (!      /*@cc_on!@*/    ...
  • ptyzhu
  • ptyzhu
  • 2014-02-19 10:27
  • 4698

使用form表单中自带的fieldset与legend

在form表单中常常被忽视的两个标签fieldset和legend 下面我是用了bootstrap的样式,把一些默认样式去除了 <div class="container"> <div class="col-md-5"> ...
  • kuangshp128
  • kuangshp128
  • 2017-03-14 22:31
  • 1323

html5 中新添加的标签以及新增表单类型

一html5新增标签1.主体结构元素包括 article、section、nav、aside、time article定义来自外部的内容 外部内容可以是来自一个外部的新闻提供者的一篇新的文章,或者来自 blog 的文本,或者是来自论坛的文本。亦或是来自其他外部源内容。<article> ...
  • sinat_32067081
  • sinat_32067081
  • 2016-11-19 16:13
  • 1792

html5 input search

无标题文档
  • jianguo_liao19840726
  • jianguo_liao19840726
  • 2012-05-25 22:48
  • 5098

浅谈fieldset标签的使用

使用ieldset>在一组控件周围建立边框,表明这些控件是相关的并用为由元素圈起的一组控件添加标题。(必须是的一个子元素)     用户登录           用户名 &#...
  • WiteWater
  • WiteWater
  • 2016-11-18 09:14
  • 2750

HTML5新增的INPUT输入类型

输入类型 HTML代码 文本域 单选按钮 复选框 下拉列表 密码域 提交按钮 可单击按钮 图像按钮 隐藏域 重置按钮 文件域 在HTML5中,增加了多个新的表单input输入类型,通过使用这些新增元素,可以实现更好的输入控制和验证。 1、email类型...
  • dotuian
  • dotuian
  • 2014-05-14 17:42
  • 1078
    个人资料
    • 访问:2478次
    • 积分:497
    • 等级:
    • 排名:千里之外
    • 原创:39篇
    • 转载:20篇
    • 译文:0篇
    • 评论:0条
    文章分类