html5world笔记
2024-04-09 01:39:30
HTML5学习笔记
一：表单及其他新增和改良的元素
1.1以前表单内的从属元素必须写在表单的内部，在5中可以把它写在任何的部位中的label的使用代码如下：
<!DOCTYPE html>
<html>
<head><title> labels属性的使用的示例 </title><meta charset="UTF-8"><script type="text/javascript">function Validate(){var txtName = document.getElementById("txt_name");var button = document.getElementById("btnValidate");var form = document.getElementById("testform");if(txtName.value.trim() == ""){if(txtName.labels.length == 1){var label = document.createElement("label");label.setAttribute("for","txt_name");form.insertBefore(label,button);txtName.labels[1].innerHTML = "input your name";txtName.labels[1].setAttribute("style","font-size:9px;color:red");}}else if(txtName.labels.length > 1){form.removeChild(txtName.labels[1]);}}</script></head><body><form id="testform"><label id="label" for="txt_name"> name:</label><input id="txt_name"><input type="button" id="btnValidate" value="yanzheng" οnclick="Validate()"></form>
</body>
</html>
1.2
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8">
</head><script type="text/javascript">function setValue()
{var label = document.getElementById("label");var textbox = label.control;textbox.value = "213001";}</script><body>
<form >
<label id="label">
邮编 :::
<input id="txt_zip" maxlength="6">
<small >please input 6</small></label>
<input type="button" value="默认值 " οnclick="setValue()"> </form></body>
</html>1.3文本框的list属性
<!DOCTYPE html>
<html>
<head><title></title><meta charset="UTF-8">
</head><body>text:<input type="text" name = "greeting" list="greetings"><datalist id="greetings" style = "display: none;"><option value="Good Morning"> Good Morning</option><option value="Hello"> Hello</option><option value="Good Afternoon"> Good Afternoon</option></datalist>
</body>
</html>选择文件：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"><title>FileReader与 file 示例 </title><script type="text/javascript">function ShowName(){var file;for(var i=0;i<document.getElementById("file").files.length;i++){file = document.getElementById("file").files[i];alert(file.name);}}</script>
</head><body><input type="file" id="file" multiple size="50"><input type="button" οnclick="ShowName();" value="上传" >
</body>
</html>使用Blob接口获取文件的类型和大小
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"><title>FileReader与 file 示例 </title><script type="text/javascript">function ShowFileType(){var file;file = document.getElementById("file").files[0];var size = document.getElementById("size");size.innerHTML = file.size;var type = document.getElementById("type");type.innerHTML = file.type;}</script>
</head><body>
选择 文件 ::: <input type="file" id="file">
<input type="button" value="Show" οnclick="ShowFileType();"></br>LEngth:<span id="size"></span></br>LEIXing:<span id="type"></span> </body>
</html>读取文件的操作
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><script type="text/javascript">var result = document.getElementById("result");var file = document.getElementById("file");if(typeof FileReader == 'undefined'){result.innerHTML ="<p>NO:</p>";file.setAttribute('disabled','disabled');}function readAsDataURL(){//jian cha shibuhsi tuxiang wenjianvar file = document.getElementById("file").files[0];if(!/image\/\w+/.test(file.type)){alert("Image");return false;}var reader = new FileReader();//Data in yemianreader.readAsDataURL(file);reader.onload = function(e){var result = document.getElementById("result");result.innerHTML = '<img src = "'+this.result+'" alt = "">'}}function readAsText(){var file = document.getElementById("file").files[0];var reader = new FileReader();reader.readAsText(file);reader.onload = function(f){ var result = document.getElementById("result");alert(result);result.innerHTML = this.result;}}</script></head><body>
<p ><label > please choice a file </label>
<input type="file" id="file">
<input type="button" value="readImage" οnclick="readAsDataURL()">
<input type="button" value="readBirData" οnclick="readAsBinaryString()">
<input type="button" value="readTxt" οnclick="readAsText()"></p>
<div name="result" id="result"></div></body>
</html>
转载于:https://www.cnblogs.com/aicpcode/p/4280728.html
html5world笔记相关推荐
- 【读书笔记】知易行难，多实践
前言: 其实,我不喜欢看书,只是喜欢找答案,想通过专业的解答来解决我生活的困惑.所以,我听了很多书,也看了很多书,但看完书,没有很多的实践,导致我并不很深入在很多时候. 分享读书笔记: <高效1 ...
- 【运维学习笔记】生命不息，搞事开始。。。
001生命不息,搞事不止!!! 这段时间和hexesdesu搞了很多事情! 之前是机械硬盘和固态硬盘的测速,我就在那默默的看着他一个硬盘一个机械测来测去. 坐在他后面,每天都能看到这位萌萌的小男孩,各 ...
- SSAN 关系抽取 论文笔记
20210621 https://zhuanlan.zhihu.com/p/353183322 [KG笔记]八.文档级(Document Level)关系抽取任务 共指id嵌入一样 但是实体嵌入的时候 ...
- pandas以前笔记
# -*- coding: utf-8 -*- """ Created on Sat Jul 21 20:06:20 2018@author: heimi "& ...
- PyTorch 学习笔记（六）：PyTorch hook 和关于 PyTorch backward 过程的理解 call
您的位置 首页 PyTorch 学习笔记系列 PyTorch 学习笔记(六):PyTorch hook 和关于 PyTorch backward 过程的理解 发布: 2017年8月4日 7,195阅读 ...
- 容器云原生DevOps学习笔记——第三期：从零搭建CI/CD系统标准化交付流程
暑期实习期间,所在的技术中台-效能研发团队规划设计并结合公司开源协同实现符合DevOps理念的研发工具平台,实现研发过程自动化.标准化: 实习期间对DevOps的理解一直懵懵懂懂,最近观看了阿里专家带 ...
- 容器云原生DevOps学习笔记——第二期：如何快速高质量的应用容器化迁移
暑期实习期间,所在的技术中台-效能研发团队规划设计并结合公司开源协同实现符合DevOps理念的研发工具平台,实现研发过程自动化.标准化: 实习期间对DevOps的理解一直懵懵懂懂,最近观看了阿里专家带 ...
- 王道考研 计算机网络笔记 第六章：应用层
本文基于2019 王道考研 计算机网络: 2019 王道考研 计算机网络 个人笔记总结 第一章:王道考研 计算机网络笔记 第一章:概述&计算机网络体系结构 第二章:王道考研 计算机网络笔记 第 ...
- 王道考研 计算机网络笔记 第五章：传输层
本文基于2019 王道考研 计算机网络: 2019 王道考研 计算机网络 个人笔记总结 第一章:王道考研 计算机网络笔记 第一章:概述&计算机网络体系结构 第二章:王道考研 计算机网络笔记 第 ...
最新文章
- mysql 5.6 uf8mb4_MySQL5.7升级到8.0过程详解
- 【基础知识】如何在浏览器中查找元素属性节点
- JAVA基础11-继承(2)
- docker安装启动nginx详细步骤
- Java 操纵XML之修改XML文件
- tensorrt轻松部署高性能dnn推理_部署环境之：tensorRT的插件
- 电视盒安装php,全志a20安卓电视盒子安装可道云kodexplorer服务-编译安装php7.3+nginx...
- 30天python从入门到精通_2019最新《Python从入门到精通之30天快速学Python教程 》
- 中国人上淘宝喜欢干啥 你知道吗？
- 基于spring reactor3构建的即时通讯api。
- smtp发送邮件和pop3收取邮件
- 自学车载以太网笔记（1）
- mysql备份与恢复方案_MYSQL备份与恢复
- 黑马程序员---继承（下）
- C语言typedef和define、字节对齐的问题
- lack名词形式_lack用法
- POI文件上传及使用详解
- office（Excel）里面如何提取身份证中的出生日期
- Zookeeper--简介
- 古文觀止卷七_原道_韓愈