HTML表单与文件

<!DOCTYPE html>

<html>

<head lang="en">

    <title></title>

    <meta charset="utf-8">

</head>

<body>

    当前行车速度：<meter value="159" min="0" max="220" low="0" high="160">120</meter>千米/小时<br/>

    <!--

    属性说明：

        value:当前值 默认0

        min：最小值 默认0

        max：最大值 默认1

        low：指定范围最小值 必须 > min

        high：指定范围最大值 必须 < max

        optimun：有效范围最佳值 如果该值 > high 说明越大越好，< low 说明越小越好

    -->

    任务完成比例：<progress value="30" max="100">30/100</progress><br/>

<script type="text/javascript">

</script>

</body>

</html>

新增元素与属性

form：指明元素归属哪个表单，可以写在form标签的外部，以前所有的表单元素都必须写在form表单内的
formaction：元素所属的action
formmethod：元素提交方式
placeholder：提示输入
autofocus：获取输入焦点
list：与datelist配合生成下拉框

 <input type="text" name="greeting" list="greetings">

     <datalist id="greetings" style="disable:none">

         <option value="1">早上好</option>

         <option value="2">中午好</option>

         <option value="3">晚上好</option>

     </datalist>

新增与改良的input type属性

search：用于站点搜索，样式与text一样，但safari中search与text是不同的
tel：与text类似，但用于电话
url：与text文本框类似，但必须输入满足url格式的文字
email：可以使用multiple属性，传递多个email地址，用逗号分隔
datetime、date、month、week、time、datetime-location
number
range：只允许输入一定范围内数值的文本框，包含min与max属性，默认0~100
color：颜色文本选择框
file：可以通过指定multiple属性，选择多个文件

验证

required：是否必填
pattern：指定正则表达式
min、max：对于数值或日期类型，设置了最值
step：增大或减小时的步幅
formnovalidate：配置在提交按钮上或input上，对应的校验会消失

文件API

FileList对象：表示用户选择的文件列表
file对象：FileList中的每个元素都是file对象

举例：获取多选的文件

    <!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script type="text/javascript">

        function showFileName(){

            var file;

            var upFiles = document.getElementById("file").files;

            var len = upFiles.length;

            for (var i = 0;i < len;i++){

                file = upFiles[i];

                document.write(file.name);

                document.write("<br/>");

            }

        }

    </script>

</head>

<body>

    文件选择:<input type="file" multiple id="file" size="80" /><input type="button" value="文件上传" onclick="showFileName()">

</body>

</html>

1 下拉框

<!DOCTYPE html>

<html>

<head lang="en">

    <title></title>

    <meta charset="utf-8">

</head>

<body>

    <form>

        单选

        <select>

            <option>1</option>

            <option>2</option>

            <option>3</option>

            <option>4</option>

        </select><tr>

        多选

        <select multiple="multiple">

            <option>1</option>

            <option>2</option>

            <option>3</option>

            <option>5</option>

            <option>6</option>

            <option>7</option>

            <option>8</option>

            <option>9</option>

            <option>0</option>

        </select><tr>

        optiongroup

        <select multiple="multiple">

            <optgroup label="书籍1">

                <option>1_1</option>

                <option>1_2</option>

                <option>1_3</option>

                <option>1_4</option>

                <option>1_5</option>

                <option>1_6</option>

            </optgroup>

            <optgroup label="书籍2">

                <option>2_1</option>

                <option>2_2</option>

                <option>2_3</option>

                <option>2_4</option>

                <option>2_5</option>

                <option>2_6</option>

            </optgroup>

        </select>

    </tr>

    </form>

<script type="text/javascript">

</script>

</body>

</html>

2 表单属性

<!DOCTYPE html>

<html>

<head lang="en">

    <title></title>

    <meta charset="utf-8">

</head>

<body>

    <form>

        <!-- placeholder 属性指定提示内容 -->

        <input type="text" placeholder="提示内容"><br/>

        <!--输入与下拉同时使用-->

        <input type="text" name="book" list="books" /><br/>

        <!--通过指定formaction属性提交给不同的Action，不再需要通过JavaScript修改提交的Action-->

        <input type="submit" formaction="action1">

        <input type="submit" formaction="action2">

    </form>

    <datalist id="books">

        <option>书籍_1</option>

        <option>书籍_2</option>

        <option>书籍_3</option>

        <option>书籍_4</option>

    </datalist>

    <hr/>

    多文件上传

    <input type="file" multiple id="images" accept="image/*" />

    <input type="button" value="显示文件" onclick="showDetails()" />

    <script type="text/javascript">

        var showDetails = function(){

            var imageFile = document.getElementById("images");

            var fileList = imageFile.files;

            for(var i = 0;i < fileList.length;i++){

                var file = fileList[i];

                var div = document.createElement("div");

                div.innerHTML = "第"+(i+1)+"个文件的文件名是："+file.name+"，该文件大小是："+file.size;

                document.body.appendChild(div);

            }

        }

    </script>

</body>

</html>

3 读取上传文件内容

<!DOCTYPE html>

<html>

<head lang="en">

    <title></title>

    <meta charset="utf-8">

</head>

<body>

    浏览文件：<input type="file" id="file1" /><br/>

    <div id="result"></div>

    <input type="button" value="读取文本文件" onclick="readText();"><br/>

    <input type="button" value="读取二进制文件" onclick="readBinary();"><br/>

    <input type="button" value="以DataURL方式读取" onclick="readURL();"><br/>

<script type="text/javascript">

    var reader = null;

    if(FileReader){

        reader = new FileReader();

    }else{

        alert("浏览器暂不支持FileReader对象");

    }

    var readText = function(){

        reader.readAsText(document.getElementById("file1").files[0],"gbk");

        reader.onload = function(){

            document.getElementById("result").innerHTML = reader.result;

        }

    }

    var readBinary = function(){

        reader.readAsBinaryString(document.getElementById("file1").files[0]);

        reader.onload = function(){

            document.getElementById("result").innerHTML = reader.result;

        }

    }

    var readURL = function(){

        reader.readAsDataURL(document.getElementById("file1").files[0]);

        reader.onload = function(){

            document.getElementById("result").innerHTML = reader.result;

        }

    }

</script>

</body>

</html>

HTML表单与文件的更多相关文章

js实现无刷新表单提交文件，将ajax请求转换为form请求方法
最近在做项目的时候遇到一个需要上传文件的需求,因为ajax请求是无法上传二进制文件流的,所以只能用form表单提交,而form提交有一个问题就是会使页面刷新,本文解决了form表单提交文件时页面刷新的 ...
Struts2文件上传（基于表单的文件上传）
•Commons-FileUpload组件 –Commons是Apache开放源代码组织的一个Java子项目,其中的FileUpload是用来处理HTTP文件上传的子项目 •Commons-Fil ...
[原创]java WEB学习笔记49：文件上传基础，基于表单的文件上传,使用fileuoload 组件
本博客为原创:综合尚硅谷(http://www.atguigu.com)的系统教程(深表感谢)和网络上的现有资源(博客,文档,图书等),资源的出处我会标明本博客的目的:①总结自己的学习过程,相当 ...
SpringMVC 完美解决PUT请求参数绑定问题(普通表单和文件表单)
一解决方案修改web.xml配置文件将下面配置拷贝进去(在原有的web-app节点里面配置其它配置不变)  <filt ...
formidable处理提交的表单或文件的简单介绍
一般来说,客户端向服务端提交数据有GET和POST这两种方式,在之前的文章node.js当中的http模块与url模块的简单介绍当中我们可以知道通过req.url与url模块的配合处理可以快速得到客户 ...
FastAPI 学习之路（十八）表单与文件
系列文章: FastAPI 学习之路(一)fastapi--高性能web开发框架 FastAPI 学习之路(二) FastAPI 学习之路(三) FastAPI 学习之路(四) FastAPI 学习之 ...
表单多文件上传样式美化 && 支持选中文件后删除相关项
开发中会经常涉及到文件上传的需求,根据业务不同的需求,有不同的文件上传情况. 有简单的单文件上传,有多文件上传,因浏览器原生的文件上传样式及功能的支持度不算太高,很多时候我们会对样式进行美化,对功能进 ...
Ajax提交Form表单及文件上传
刚刚申请下来的博客,写得第一篇.有点小激动,本人以前是一名工业3D设计师突然有些变故做上了JavaWeb开发: 前几天,发现了一些小问题.我在写后台管理页面时,需要上传一张图片.于是我就用很普通的Fo ...
.net c# 提交包含文件file 的form表单获得文件的Stream流
1.前台html代码要写一个有id的form,可是不能有runat="server"属性.由于一个页面中,有这个属性的form表单仅仅能有一个. 再要有一个有name的ifram ...
php表单提交--文件
创建一个文件上传表单允许用户从表单上传文件是非常有用的. 请看下面这个供上传文件的 HTML 表单: <!doctype html> <html> <head> ...

随机推荐

[论文理解]Focal Loss for Dense Object Detection（Retina Net）
Focal Loss for Dense Object Detection Intro 这又是一篇与何凯明大神有关的作品,文章主要解决了one-stage网络识别率普遍低于two-stage网络的问题 ...
python_29_三级菜单
menu={ '北京':{ '海淀':{ '五道口':{ '搜狐':{}, '网易':{}, 'Google':{}, }, '中关村':{ '爱奇艺':{}, '汽车之家':{}, '优酷':{}, ...
Python小脚本程序
本文旨在搜集最简单最原子性的代码块,简单清晰容易阅读,然后由用户自己组合.Python代码排版请自行修改. 这里是索引目录: 1. 下载网站文件 2. 下载网站多个文件 1. 下载网站文件 impor ...
C/C++程序基础（二）常用知识点
使用宏实现max 注意括号在宏内的使用 #define MAX(x, y) ( ( (x) > (y) ) ? (x) : (y) ) 宏参数连接 a##e##b 转化为字符串 #a const ...
DevOps - 部署系统 - Cobbler
Cobbler简介 Cobbler由python语言开发,是对PXE和Kickstart以及DHCP的封装.融合很多特性,提供了CLI和Web的管理形式.更加方便的实行网络安装.适用场景:需要大批量的 ...
5458. 【NOIP2017提高A组冲刺11.7】质数
5458. [NOIP2017提高A组冲刺11.7]质数 (File IO): input:prime.in output:prime.out Time Limits: 1000 ms Memory ...
关于在namanode上编写脚本控制DataNode的...
脚本如下:(我的虚拟机名字分别为:wang201 wang 202 wang 203 wang 204) params=$@ i= ; i <= ; i++)) ; do echo ====== ...
Python数据类型的用法
字符串的用法 res = 'hellow,world' print(res) #res.显示的都是它的方法,下划线的除外 1 判断字符串的结尾字符,返回的值的布尔形式 endswith 判断字符串的开 ...
Python中的dict
dict_lst = [ ('字典的键必须可哈希',), ('字典的键重复覆盖',), ('字典可迭代') ('增',), ('删',), ('改',), ('查',), ('练习',), ] 字典的 ...
python读取xls文件
#!/usr/bin/env python # -*- coding: utf-8 -*- # @Time : 2018/10/17 14:41 # @Author : Sa.Song # @Desc ...

HTML表单与文件

HTML表单与文件的更多相关文章

随机推荐

热门专题