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> ...

随机推荐

POJ-3436 ACM Computer Factory---最大流+拆点
题目链接: https://vjudge.net/problem/POJ-3436 题目大意: 每台电脑有p个组成部分,有n个工厂加工电脑.每个工厂对于进入工厂的半成品的每个组成部分都有要求,由p个数 ...
Feign + Hystrix 服务熔断和服务降级
本机IP为 192.168.1.102 1. 新建 Maven 项目 feign 2. pom.xml <project xmlns="http://maven.apa ...
Java读取properties配置文件工具类
1. PropertyUtils.java package javax.utils; import java.io.InputStream; import java.util.Properties ...
Charles拦截请求
一.通过Charles抓包,可拦截请求并篡改交互信息 1.可篡改客户端向服务器发起的请求信息(服务器收到的是假消息) 2.可篡改服务器返回给客户端的响应结果(客户端看到的是假消息) 二.篡改用户请求 ...
Ubuntu安装mysql和简单使用
一.安装mysql sudo apt-get install mysql-server sudo apt-get isntall mysql-client sudo apt-get install l ...
MySql-8.0.12 安装教程随笔
下载地址: https://www.mysql.com/downloads/ 现在最下边的社区版本,也就是免费版本之后我们会看到有两个选择的下载,一个为zip压缩包格式,一个是Install版本,个 ...
1412: [ZJOI2009]狼和羊的故事
Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 4017 Solved: 2037[Submit][Status][Discuss] Descript ...
自动化运维工具——ansible剧本playbook（三）
一.Playbook--Ansible剧本 playbook是由一个或多个 "play"组成的列表 play的主要功能在于将事先归并为一组的主机装扮成事先通过ansible中的ta ...
win 系统下制作U盘安装 linux系统
win 系统制作U盘安装硬盘镜像用ultraiso_v9.5.3.2901将Centos.iso写进U盘.安装过程全程区分大小写.过低的ultraiso不能正确读取文件.本文所有资料均能在网上免费下载 ...
HTML5/CSS3 第二章页面组件
页面组件 1 元素的尺寸/边框/背景 1.1 css尺寸相关属性 height 高度 min-height 最小高度 max-height 最大高度 width 宽度 min-width 最小宽度 m ...

HTML表单与文件

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

随机推荐

热门专题