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

标签: WEB前端 input HTML5新增标签
97人阅读 评论(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:导航链接

查看评论

HTML5之新增标签,CSS3,js特效

HTML5发展如火如荼,是近十年来Web标准最巨大的飞跃,随着各大浏览器对 HTML5 技术支持的不断完善以及 HTML5 技术的不断成熟,未来 HTML5 必将改变创建 Web 应用程序的方式,它将Web带入一个成熟的...
  • 2015年08月27日 18:02

<form><textarea><label><fieldset><legend><optgroup><button>标签整理

标签整理
  • sipallan
  • sipallan
  • 2016-04-22 21:16:02
  • 489

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

在form表单中常常被忽视的两个标签fieldset和legend 下面我是用了bootstrap的样式,把一些默认样式去除了 ...
  • kuangshp128
  • kuangshp128
  • 2017-03-14 22:31:13
  • 2427

H5新标签元素学习笔记

1、新表单元素       全部都是由input标签组成       1.1 email       1.2 url             注意:输入的内容必须以http://      ...
  • sinat_30975247
  • sinat_30975247
  • 2015-11-11 21:09:38
  • 3481

CanvasInput, HTML5 Canvas 文本输入

CanvasInput, HTML5 Canvas 文本输入 源代码名称:CanvasInput源代码网址:http://www.github.com/goldfire/Canvas...
  • dowemo
  • dowemo
  • 2017-11-24 16:51:19
  • 440

WEB前端-HTML-常用标签

各种符号要想在页面上显示各种符号,需要根据html的符号对照表来进行编写。 详细请点这里p&br&hrp 表示段落,默认段落上下会有行间距; br 是换行,自闭和标签; h...
  • qq_34409701
  • qq_34409701
  • 2016-08-12 01:05:01
  • 7019

HTML实现输入框内插入QQ表情

  • 2015年09月18日 15:55
  • 291KB
  • 下载

(25)HTML标签详解之<form><input><label><fieldset><legend>

HTML标签详解之           标签用于为用户的输入创建 HTML 表单,用于向服务器传输数据。它是块级元素。 表单能够包含  标签" style="margin:0px; p...
  • yangli_world
  • yangli_world
  • 2016-07-28 01:19:47
  • 197

HTML <fieldset> 标签 label标签

fieldset 元素可将表单内的相关元素分组。 标签将表单内容的一部分打包,生成一组相关表单的字段。 当一组表单元素放到 标签内时,浏览器会以特殊方式来显示它们,它们可能有特殊的边界...
  • ios0213
  • ios0213
  • 2016-05-31 22:19:30
  • 106

fieldset和legend标签的属性和使用方法

除了可以用style设定他的样式以外,谁知道他还有什么其他纯html中自代的属性吗? 基本信息 意想不到的效果不错不知道他还有其他的属性吗? Fieldset的属性: CLA...
  • jpr1990
  • jpr1990
  • 2011-12-23 14:01:38
  • 4157
    个人资料
    持之以恒
    等级:
    访问量: 5775
    积分: 955
    排名: 5万+
    文章存档