HTML5新标签与特性---新表单+新属性----综合案例1
HTML5新标签与特性
兼容性问题 (ie9 以上的版本)
文档类型设定
- document
- HTML: sublime 输入 html:4s
- XHTML: sublime 输入 html:xt
- HTML5 sublime 输入 html:5 ! <!DOCTYPE html>
字符设定
- <meta http-equiv="charset" content="utf-8">:HTML与XHTML中建议这样去写
- <meta charset="utf-8">:HTML5的标签中建议这样去写
常用新标签
w3c 手册中文官网 : http://w3school.com.cn/
header:定义文档的页眉 头部
nav:定义导航链接的部分
footer:定义文档或节的页脚 底部
article:定义文章。
section:定义文档中的节(section、区段)
aside:定义其所处内容之外的内容 侧边
<header> 语义 :定义页面的头部 页眉</header>
<nav> 语义 :定义导航栏 </nav>
<footer> 语义: 定义 页面底部 页脚</footer>
<article> 语义: 定义文章</article>
<section> 语义: 定义区域</section>
<aside> 语义: 定义其所处内容之外的内容 侧边</aside>
datalist 标签定义选项列表。请与 input 元素配合使用该元素
<input type="text" value="请输入明星" list="star"/>
<datalist id="star">
<option value="刘德华">刘德华</option>
<option value="刘若英">刘若英</option>
<option value="刘晓庆">刘晓庆</option>
<option value="戚薇">戚薇</option>
<option value="戚继光">戚继光</option>
</datalist>
fieldset 元素可将表单内的相关元素分组,打包 legend 搭配使用
<fieldset>
<legend>用户登录</legend> 标题
用户名: <input type="text"><br /><br />
密 码: <input type="password">
</fieldset>
新增的input type属性值:
类型**** | 使用示例**** | 含义**** |
---|---|---|
email**** | <input type="email"> | 输入邮箱格式 |
tel**** | <input type="tel"> | 输入手机号码格式 |
url**** | <input type="url"> | 输入url格式 |
number**** | <input type="number"> | 输入数字格式 |
search**** | <input type="search"> | 搜索框(体现语义化) |
range**** | <input type="range"> | 自由拖动滑块 |
time**** | <input type="time"> | 小时分钟 |
date**** | <input type="date"> | 年月日 |
datetime**** | <input type="datetime"> | 时间 |
month**** | <input type="month"> | 月年 |
week**** | <input type="week"> | 星期 年 |
常用新属性
属性**** | 用法**** | 含义**** |
---|---|---|
placeholder**** | <input type="text" placeholder="请输入用户名"> | 占位符 当用户输入的时候 里面的文字消失 删除所有文字,自动返回 |
autofocus**** | <input type="text" autofocus> | 规定当页面加载时 input 元素应该自动获得焦点 |
multiple**** | <input type="file" multiple> | 多文件上传 |
autocomplete**** | <input type="text" autocomplete="off"> | 规定表单是否应该启用自动完成功能 有2个值,一个是on 一个是off on 代表记录已经输入的值 1.autocomplete 首先需要提交按钮 2.这个表单您必须给他名字 |
required**** | <input type="text" required> | 必填项 内容不能为空 |
accesskey**** | <input type="text" accesskey="s"> | 规定激活(使元素获得焦点)元素的快捷键 采用 alt + s的形式 |
综合案例
<form action="">
<fieldset>
<legend>学生档案</legend>
<label for="userName">姓名:</label>
<input type="text" name="userName" id="userName" placeholder="请输入用户名"> <br>
<label for="userPhone">手机号码:</label>
<input type="tel" name="userPhone" id="userPhone" pattern="^1\d{10}$"><br>
<label for="email">邮箱地址:</label>
<input type="email" required name="email" id="email"><br>
<label for="collage">所属学院:</label>
<input type="text" name="collage" id="collage" list="cList" placeholder="请选择"><br>
<datalist id="cList">
<option value="前端与移动开发学院"></option>
<option value="java学院"></option>
<option value="c++学院"></option>
</datalist><br>
<label for="score">入学成绩:</label>
<input type="number" max="100" min="0" value="0" id="score"><br>
<label for="inTime">入学日期:</label>
<input type="date" id="inTime" name="inTime"><br>
<label for="leaveTime">毕业日期:</label>
<input type="date" id="leaveTime" name="leaveTime"><br>
<input type="submit">
</fieldset>
</form> <form action="">
<fieldset>
<legend>学生档案思密达</legend>
<label>姓名: <input type="text" placeholder="请输入学生名字"/></label> <br /><br />
<label>手机号: <input type="tel" /></label> <br /><br />
<label>邮箱: <input type="email" /></label> <br /><br />
<label>所属学院: <input type="text" placeholder="请选择学院" list="xueyuan"/>
<datalist id="xueyuan">
<option>java学院</option>
<option>前端学院</option>
<option>php学院</option>
<option>设计学院</option>
</datalist>
<br /><br /> <label>出生日期: <input type="date" /></label> <br /><br />
<label>成绩: <input type="number" /></label> <br /><br />
<label>毕业时间: <input type="date" /></label> <br /><br />
<input type="submit" /> <input type="reset" />
</fieldset>
</form>
HTML5新标签与特性---新表单+新属性----综合案例1的更多相关文章
- HTML5 十大新特性(二)——表单新特性
H5的表单新特性可以分为两大类. 一.10个input的type值 1.email:邮件输入域,在表单提交时提供简单的邮箱格式验证,并弹出一个提示窗口. 2.url:地址输入域,在表单提交时提供简单的 ...
- html基础 表单相关属性综合实战案例 附有注释
html结构代码: <form > <!-- form 为了让重置按钮生效--> <h1>青春不常在,抓紧谈恋爱</h1> <hr> 昵称: ...
- HTML5_01之表单新特性
1.WebStorm快捷键: Ctrl+Alt+(向下方向键):快速复制当前行 Alt+(向上/下方向键):移动当前行 Ctrl+D:删除当前行 Ctrl+/:快速(取消)注释当前行 Ctrl+Alt ...
- H5表单新特性
1.HTML5表单新特性之——新的input type <input type=" "> HTML5之前已有的input type: text.password.rad ...
- 完善:HTML5表单新特征简介与举例——张鑫旭
一.前言一撇 其实关于HTML5的表单特征早在去年“你必须知道的28个HTML5特征.窍门和技术”一文中就有所介绍(在第十一项),不过,有些遗憾的是,此部分的介绍是以视频形式展示的,其实,是视频还好啦 ...
- HTML5表单新属性
HTML5表单新属性 autofocus 自动聚焦 <input type="text" autofocus> placeholder占位文本 tel ...
- HTML5新表单新功能解析
HTML5新增了很多属性功能.但是有兼容性问题,因为这些表单功能新增的.我这里做了一个简单的练习,方便参考.如果完全兼容的话,那我们写表单的时候就省了很多代码以及各种判断. <!DOCTYPE ...
- html5之table嵌入form表单布局(务必注意:table标签必须在form表单内部,不能再form表单外部!)
切记:用table标签来布局form表单元素,table标签必须放在form表单内部,否则可能会出现各种bug 原文地址:https://blog.csdn.net/weixin_43343144/a ...
- HTML5 学习08——Input 类型、表单元素及属性
注意:并不是所有的主流浏览器都支持新的input类型,不过您已经可以在所有主流的浏览器中使用它们了.即使不被支持,仍然可以显示为常规的文本域. (1)Input 类型: color color 类型: ...
随机推荐
- 基于STM32F429,Cubemx的SAI音频播放实验
书接上文:https://www.cnblogs.com/feiniaoliangtiangao/p/11060674.html 和 https://www.cnblogs.com/feiniaoli ...
- python爬虫执行js代码-execjs
一.安装模块 pip install PyExecJS execjs会自动使用当前电脑上的运行时环境(建议用nodejs,与Phantomjs) 二.简单的使用 import execjs js_ob ...
- 怎样使用element-starter快速搭建ElementUI项目
场景 为了能快速搭建起一个ElementUI项目,我们可以使用element-starter这个模板进行快速搭建. element-starter的Github https://github.com/ ...
- iOS---------查看界面的流畅度
iOS查看屏幕帧数工具--YYFPSLabel iOS 保持界面流畅的技巧 iOS 优化界面流畅度的探讨 先研究一下 改天自己出一篇文章
- 循环语句for基本概述
循环语句for基本概述 01. for循环基础语法 for 变量名 in [ 取值列表 ]do 循环体done 02. for循环基本使用示例 #取值列表有多种取值方式,可以直接读取in后面的值,默认 ...
- 读书笔记_python网络编程3_(3)
3.TCP:传输控制协议 第一个版本在1974年定义,建立在网际层协议(IP)提供的数据包传输技术之上.TCP使程序可以使用连续的数据流进行相互通信. 除非网络原因导致连接中断/冻结,TCP都能保证将 ...
- 'Specifying a namespace in include() without providing an app_name '
'Specifying a namespace in include() without providing an app_name ’ 从include()函数可以看出来,这个函数有两个参数,一个a ...
- Octave绘图数据
t = [0:0.01:0.98] :设置一个步长为0.01的矩阵 y1 = sin(2*pi*4*t) :设置一个sin函数 plot(t,y1) :绘制出以 t 为横轴 以 y1为纵轴的图 ...
- Ubuntu18.04初始化
Ubuntu18.04初始化 更新源: sudo cp /etc/apt/sources.list /etc/apt/sources.list.bak sudo gedit /etc/apt/sour ...
- LG5337/BZOJ5508 「TJOI2019」甲苯先生的字符串 线性动态规划+矩阵加速
问题描述 LG5337 BZOJ5508 题解 设\(opt_{i,j}(i \in [1,n],j \in [1,26])\)代表区间\([1,i]\),结尾为\(j\)的写法. 设\(exist_ ...