html5新增属性体验
2015-08-04 13:23
573 查看
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<fieldset>
<legend>title(legend)</legend>
<p>hehehaha</p>
</fieldset>
<form id="f1"></form>
<p>
autofocus 在页面打开时自动获取焦点 可用于input select textaea button
不要滥用此属性，建议只有类似搜索页面的搜索文本框使用。
</p>
<p>autocomplete属性是默认打开的（on/off）</p>
<p>
<select name="s1" autofocus="autofocus">
<option value="1">1</option>
<option value="2">2</option>
</select>
</p>
<p>
<input type="text" form="f1" autofocus="autofocus" placeholder="提示文本：已添加required属性，在提交时检查内容不为空" required="required" />
</p>
<p>
<textarea form="f1" autofocus="autofocus" placeholder="提示文本：已添加required属性，在提交时检查内容不为空" required="required"></textarea>
</p>
<p>
<button form="f1" autofocus="autofocus" contenteditable="true">BUTTON</button>
</p>
<p>可对input output select textarea button fieldset指定form属性声明属于那个表单，不再需要放在表单内 </p>
<input type="file" multiple="multiple" >multiple选择多个文件</input>
<p contenteditable="true">这是段落标签,设置contenteditable属性可以允许用户编辑内容</p>
<p>designMode:指定整个页面是否可编辑，任何支持contenteditable的元素都变可编辑状态。必须在JavaScript中修改：document.designMode="on"</p>
<button id="edit" onclick="edit();">编辑（contenteditable)</button>
<p>hidden:适用于所有元素，隐藏</p>
<p id="p1">ualualualula</p><button id="hide" onclick="hide();">隐藏文字</button>
<p>pattern属性：正则表达式；定义input可接受的格式</p>
<form>
<input type="text" placeholder="正则表达式为：1234567890" pattern="1234567890"/>
<input type="submit" value="验证"/>
</form>
<p>各种input <button form="test" return false;>验证这些input</button></p>
<h4>search:有一个清除符号</h4>
<p>
<input form="test" type="search" />
</p>
<h4>email:自动验证Email是否合法 ,multiple设为true允许输入多个</h4>
<input form="test" type="email" multiple="true"/>
<h4>url验证</h4>
<input form="test" type="url" />
<h4>数字输入域：设置想要匹配的数字， max min step设置输入域合法间隔（点击箭头加减的数字，默认1） value指定默认值</h4>
<input form="test" type="number" max="10" min="0" step="2" value="6"/>
<h4>tel:验证号码，要配合pattern（正则表达式）使用</h4>
<input type="tel" pattern="1234567890" />
<h4>color:颜色拾取器，保存在value中</h4>
<input type="color" />
<h4>range:数字输入域：和number的区别在于它是滑动条选择 ,要用onChange监听</h4>
<input type="range" max="10" min="0" step="1" value="6"/>
<h4>date日期:(date month week time datetime(不支持) datetime-local)实测火狐不支持</h4>
<input type="date" />
<input type="time" />
<input type="datetime" />
<input type="month" />
<input type="week" />
<input type="datetime-local" />
<form id="test">
</form>
<script>
function edit () {
var btn = document.getElementById("edit");
if(btn.innerHTML == "编辑（contenteditable)"){
document.designMode="on";
btn.innerHTML = "编辑（contenteditable)."
}else{
document.designMode="off";
btn.innerHTML = "编辑（contenteditable)"
}
}
function hide () {
var btn = document.getElementById("hide");
if(btn.innerHTML == "隐藏文字"){
document.getElementById("p1").hidden="hidden";
btn.innerHTML = "显示文字"
}else{
document.getElementById("p1").hidden="";
btn.innerHTML = "隐藏文字"
}
}
</script>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<fieldset>
<legend>title(legend)</legend>
<p>hehehaha</p>
</fieldset>
<form id="f1"></form>
<p>
autofocus 在页面打开时自动获取焦点 可用于input select textaea button
不要滥用此属性，建议只有类似搜索页面的搜索文本框使用。
</p>
<p>autocomplete属性是默认打开的（on/off）</p>
<p>
<select name="s1" autofocus="autofocus">
<option value="1">1</option>
<option value="2">2</option>
</select>
</p>
<p>
<input type="text" form="f1" autofocus="autofocus" placeholder="提示文本：已添加required属性，在提交时检查内容不为空" required="required" />
</p>
<p>
<textarea form="f1" autofocus="autofocus" placeholder="提示文本：已添加required属性，在提交时检查内容不为空" required="required"></textarea>
</p>
<p>
<button form="f1" autofocus="autofocus" contenteditable="true">BUTTON</button>
</p>
<p>可对input output select textarea button fieldset指定form属性声明属于那个表单，不再需要放在表单内 </p>
<input type="file" multiple="multiple" >multiple选择多个文件</input>
<p contenteditable="true">这是段落标签,设置contenteditable属性可以允许用户编辑内容</p>
<p>designMode:指定整个页面是否可编辑，任何支持contenteditable的元素都变可编辑状态。必须在JavaScript中修改：document.designMode="on"</p>
<button id="edit" onclick="edit();">编辑（contenteditable)</button>
<p>hidden:适用于所有元素，隐藏</p>
<p id="p1">ualualualula</p><button id="hide" onclick="hide();">隐藏文字</button>
<p>pattern属性：正则表达式；定义input可接受的格式</p>
<form>
<input type="text" placeholder="正则表达式为：1234567890" pattern="1234567890"/>
<input type="submit" value="验证"/>
</form>
<p>各种input <button form="test" return false;>验证这些input</button></p>
<h4>search:有一个清除符号</h4>
<p>
<input form="test" type="search" />
</p>
<h4>email:自动验证Email是否合法 ,multiple设为true允许输入多个</h4>
<input form="test" type="email" multiple="true"/>
<h4>url验证</h4>
<input form="test" type="url" />
<h4>数字输入域：设置想要匹配的数字， max min step设置输入域合法间隔（点击箭头加减的数字，默认1） value指定默认值</h4>
<input form="test" type="number" max="10" min="0" step="2" value="6"/>
<h4>tel:验证号码，要配合pattern（正则表达式）使用</h4>
<input type="tel" pattern="1234567890" />
<h4>color:颜色拾取器，保存在value中</h4>
<input type="color" />
<h4>range:数字输入域：和number的区别在于它是滑动条选择 ,要用onChange监听</h4>
<input type="range" max="10" min="0" step="1" value="6"/>
<h4>date日期:(date month week time datetime(不支持) datetime-local)实测火狐不支持</h4>
<input type="date" />
<input type="time" />
<input type="datetime" />
<input type="month" />
<input type="week" />
<input type="datetime-local" />
<form id="test">
</form>
<script>
function edit () {
var btn = document.getElementById("edit");
if(btn.innerHTML == "编辑（contenteditable)"){
document.designMode="on";
btn.innerHTML = "编辑（contenteditable)."
}else{
document.designMode="off";
btn.innerHTML = "编辑（contenteditable)"
}
}
function hide () {
var btn = document.getElementById("hide");
if(btn.innerHTML == "隐藏文字"){
document.getElementById("p1").hidden="hidden";
btn.innerHTML = "显示文字"
}else{
document.getElementById("p1").hidden="";
btn.innerHTML = "隐藏文字"
}
}
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- H5+写文件
- Top HTML5 Frameworks in 2015
- html5中的table相关内容
- HTML5 canvas标签
- 在 HTML5 中使用 SVG
- HTML5_插入标记
- HTML5中File对象初探（转）
- html5 cache manifes异常问题
- HTML5 Canvas实现图片擦除效果
- HTML5 文件上传示例
- 获取iframe（angular 动态页面）高度
- html5 postMessage解决跨域、跨窗口消息传递[转载]
- HTML5与搜索引擎优化[转载]
- html5中不在支持cellpadding属性
- 5个超棒的HTML5框架
- HT for Web基础动画介绍
- 01_MUI之Boilerplate中：HTML5示例，动态组件，自定义字体示例，自定义字体示例，图标字体示例
- 01_MUI之Boilerplate中：HTML5示例，动态组件，自定义字体示例，自定义字体示例，图标字体示例
- HTML5 Canvas实现web画图之自由绘制矩形
- HTML5 Canvas实现web画图之自由画笔