智能表单取色器<input type="color" name="myColor" id="shitColor" />$(function () { ...
智能表单
取色器
<input type="color" name="myColor" id="shitColor" />
$(function () {
$("#shitColor").change(function () {
alert($(this).val());
});
});
日期选择框
<h3>日期</h3>
<input type="date" name="now" />
datalist
<h3>datalist</h3>
<input type="text" name="txtDataList" list="nameList" />
<datalist id="nameList">
<option lable="lanwhy" value="Tlanwhy">lanwhy</option>
<option lable="709" value="T709">709</option>
</datalist>
placeholder
<input type="text" name="placeholder" placeholder="请输入验证码" />
自动完成
<input type="text" autocomplete="on" name="demoAutoComplete" list="autoNames" />
<datalist id="autoNames">
<option value="509">T5</option>
<option value="709V">V7</option>
<option value="709X">X7</option>
</datalist>
智能化的input
url:<input type="url" placeholder="请输入网址" name="url" />
email:<input type="email" name="email" placeholder="请输入注册邮箱" />
time:<input type="time" name="time" required="" />
number:<input type="number" value="2" name="number" step="3" />
<input type="tel" placeholder="输入电话" name="phone" />
progressbar
<progress id="pbar" value="30" name="pbar" max="100"><span>%</span></progress>
<input type="button" value="设置值" onclick="document.getElementById('pbar').value += 10;" />
<input form="frmdemo" type="text" name="demoOtherForm" autofocus="autofocus" />
文件操作API
<input type="file" multiple="multiple" name="fileDemo" id="fileDemo" /><br/><br/>
<input type="button" value="获取文件的名字" id="btnGetFile"/>
<input type="file" name="fileDemo" id="fileDemo" />
<input type="button" value="readAsDataURL" id="readAsDataURL" onclick="showDataByURL();"/>
<input type="button" value="readAsBinaryString" id="readAsBinaryString" onclick="showDataByBinaryString();"/>
<input type="button" value="readAsText" id="readAsText" onclick="showDataByText();"/>
<div id="result">
</div>
<script type="text/javascript"> if (typeof FileReader == "undified") { alert("您老的浏览器不行了!"); } function showDataByURL() { var resultFile = document.getElementById("fileDemo").files[0]; if (resultFile) { var reader = new window.FileReader(); reader.readAsDataURL(resultFile); reader.onload = function (e) { var urlData = this.result; document.getElementById("result").innerHTML += "<img src='/images/loading.gif' data-original='" + urlData + "' />"; }; } } function showDataByBinaryString() { var resultFile = document.getElementById("fileDemo").files[0]; if (resultFile) { var reader = new window.FileReader(); //异步方式,不会影响主线程 reader.readAsBinaryString(resultFile); reader.onload = function (e) { var urlData = this.result; document.getElementById("result").innerHTML += urlData; }; } } function showDataByText() { var resultFile = document.getElementById("fileDemo").files[0]; if (resultFile) { var reader = new window.FileReader(); reader.readAsText(resultFile, 'gb2312'); reader.onload = function (e) { var urlData = this.result; document.getElementById("result").innerHTML += urlData; }; } } </script>
原标题:HTML5的简单使用
关键词:HTML
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。