html5表单file HTML5表单属性

js获取HTML5 多文件file选择的数量

1、并没有原生的方法控制个数。

2、解决办法：等选择完了用js去计算有多少个，如果超出了就提示。思路如下：

1）你可以在选择完文件后，你的input的onchange事件中，判断event.target.files.length就可以知道你的文件多少了。

2）在onchange事件中使用

if (event.target.files.length 10) {

console.log("图片太多啦！超过十张啦！");

let files = event.target.files

files = Array.from(files).slice(0,10)

//此处写你的上传接口，参数就是files

console.log("只上传10张哦",files)

}

这个方法可以限制文件只需要上传选中的前10个。

扩展资料：

1、关于input标签上传文件，还有一个属性是accept。可以限制只能上传图片类型，这样可以避免用户上传很多非图片的文件，不好处理。使用方法：input id="File1" type="file"  accept="image/*"  /

2、调用接口上传文件的方法，可以使用FormData,FromData 是一次 http mulitpartfrom-data 的请求内容可以使用 append 方法向其添加名词对,然后使用 XMLHttpRequest 的 send() 方法发送.

eg:

var fileObj = new FromData();

fileObj.append('key',value);   // value 可以是一个字符串 string 也可以是一个 blob （代表，file对象）

var xhr = new XMLHttpRequest();

xhr.open('POST','url',true);

xhr.send(fileObj);

参考资料：

MDN技术文档-input type='file'/

求一个HTML5 表单的写法例子

表单是用来获取用户输入的一些数据，最常见的就是注册，登录之类的；

首先，打开IDEA软件，并新建一个工程，建好后，右键创建一个html5文件，完成后便完成了最开始的工作；

接着我们先熟悉一些较常用的表单标签：表单form，  输入域input，文本域textarea，按钮button，域的标题legend，控制标签label等。我们创建一个form,如图，输入一些你想要创建的东西（我演示的仅为用户密码）；

打开网页看效果图，便是这样的效果了，拥有了最简单的帐号密码；

同时，我们还可以添加一些选择的元素，如你喜欢什么游戏；

HTML5有哪些新的表单属性

表单结构更灵活要提交数据的控件可以布局在form标签之外，看下面的代码，表单元素可以写到form元素之外，只需在元素中加入form="form1"属性，也可提交到form元素指定的服务器地址新增表单元素我们以前学过的表单元素包括“text”、“button”、“file”、"radio"等，html5中新增加了一些表单元素，下面列出这些元素及其作用email类型用于验证email的格式，当提交表单时会自动验证email域的值url类型用于验证URL地址的格式，当提交表单时会自动验证url域的值number类型会根据你的设置提供选择数字的功能，min属性设置最小值、max属性设置最大值，value属性设置当前值，step属性设定每次增长的值，某些浏览器还不支持range类型用于应该包含一定范围内数字值的输入域，其会以一个滑块的形式展现，min属性设置最小值、max属性设置最大值，value属性设置当前值，如果没有设置，则其默认值的范围是1-100日期和时间类型：HTML5拥有多个可供选取日期和时间的新输入类型：date-选取日、月、年month-选取月、年week-选取周和年time-选取时间（小时和分钟）datetime-选取时间、日、月、年（UTC时间）datetime-local-选取时间、日、月、年（本地时间）search类型用于搜索域，比如站点搜索或Google搜索，为其加上results="s"属性，则会在搜索框前面加上一个搜索图标tel类型用于验证输入的是否是电话格式的内容，此元素现在还没有浏览器支持color类型会提供一个颜色拾取器，供用户选择颜色，并将用户选择的颜色填充到此元素中案例如下，大家可以将代码拷贝或者自己编写之后，在浏览器中查看效果浏览器的支持情况chrome：firefox：Opera：MicrosoftEdge：好，我们对微软的进步进行表扬！新增表单属性除了新增的表单元素之外，html5中还新增了一些表单属性新的form属性：autocompletenovalidate新的input属性：autocompleteautofocusformformoverrides(formaction,formenctype,formmethod,formnovalidate,formtarget)height和widthlistmin,max和stepmultiplepattern(regexp)placeholderrequired在下面的案例中，我们对一些常用的属性做了解释，大家直接看代码和代码旁边的注释，然后对照浏览器的运行结果就理解其意义了

请通过检索工具检索html5新增了哪些表单标签

1. datalist标签

datalist标签规定输入域的选项列表，列表是通过datalist内的option元素创建的。如需把datalist绑定到输入域，用输入域的list属性引用datalist的id，如下面的实例：

网址是：input type="url" list="user_list" name="link" /

datalist id="user_list"

option label="新浪网" value="" /

option label="搜狐网" value="" /

option label="网易" value="" /

/datalist

提示：option元素永远都要设置value属性值。

2. keygen标签

keygen标签的作用是提供一种验证用户的可靠方法。keygen标签是密钥对生成器（key-pair generator）。当提交表单时，会生成两个键，一个是私钥，一个是公钥。私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）。如：

form action="demo_form.asp" method="get"

Username: input type="text" name="usr_name" /

Encryption: keygen name="security" /

input type="submit" /

/form

3. output标签

output标签用于不同类型的输出，比如计算或脚本输出，如：

html

head

script type="text/javascript"

function resCalc()

{

　numA=document.getElementById("num_a").value;

　numB=document.getElementById("num_b").value;

　document.getElementById("result").value=Number(numA)+Number(numB);

}

/script

/head

body

　p使用output 元素的简易计算器：/p

　form onsubmit="return false"

input id="num_a" / +

input id="num_b" / =

output id="result" onforminput="resCalc()"/output

　/form

/body

/html

二. 新增属性

HTML5新的form 属性：autocomplete、novalidate；新的input 属性：autocomplete、autofocus、form、form overrides (formaction, formenctype,formmethod, formnovalidate, formtarget)、height、width、list、min、max、step、multiple、pattern (regexp)、placeholder和required。

1. autocomplete属性

autocomplete属性规定form 或input 域是否应该拥有自动完成功能，适用于form标签，以及text,、search、url、telephone、email、password、datepickers、range和color类型的input 标签。当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项，如：

!DOCTYPE HTML

html

body

　form action="/example/HTML 5/demo_form.asp" method="get" autocomplete="on"

First name:input type="text" name="fname" /br /

Last name: input type="text" name="lname" /br /

E-mail: input type="email" name="email" autocomplete="off" /br /

input type="submit" /

　/form

　p请填写并提交此表单，然后重载页面，来查看自动完成功能是如何工作的。/p

　p请注意，表单的自动完成功能是打开的，而e-mail 域是关闭的。/p

/body

/html

2. autofocus属性

autofocus属性规定在页面加载时，域自动地获得焦点，autofocus属性适用于所有input标签的类型。如：

User name: input type="text" name="user_name" autofocus="autofocus" /

3. form属性

form属性规定输入域所属的一个或多个表单，适用于所有input 标签的类型，必须引用所属表单的id，如需引用一个以上的表单，使用空格分隔的列表。

form action="demo_form.asp" method="get" id="user_form"

　First name:input type="text" name="fname" /

　input type="submit" /

/form

Last name: input type="text" name="lname" form="user_form" /

4. form override attributes

允许重写form元素的某些属性设定，表单重写属性有：

formaction：重写表单的action 属性

formenctype：重写表单的enctype 属性

formmethod：重写表单的method 属性

formnovalidate：重写表单的novalidate 属性

formtarget：重写表单的target 属性

表单重写属性适用于submit和image类型的input 标签。如：

form action="demo_form.asp" method="get" id="user_form"

　E-mail: input type="email" name="userid" /br /

　input type="submit" value="Submit" /br /

　input type="submit" formaction="demo_admin.asp" value="Submit as admin" /br /

　input type="submit" formnovalidate="true" value="Submit without validation" /br /

/form

这些属性对于创建不同的提交按钮很有帮助。

5. height和width属性

height和width属性规定用于image类型的input标签的图像高度和宽度，height和width属性只适用于image类型的input 标签。如：

input type="image" src="img_submit.gif" width="99" height="99" /

6. list属性

list属性规定输入域的datalist，datalist是输入域的选项列表。list属性适用于text、search、url、telephone、email、date pickers、number、range和color类型的input 标签。

7. min、max和step属性

min、max和step属性用于为包含数字或日期的input 类型规定限定（约束）。max属性规定输入域所允许的最大值，min属性规定输入域所允许的最小值，step属性为输入域规定合法的数字间隔。min、max和step属性适用于date pickers、number和range类型的input标签。

8. multiple属性

multiple属性规定输入域中可选择多个值，multiple 属性适用于emial和file类型的input 标签。

Select images: input type="file" name="img" multiple="multiple" /

9. novalidate属性

novalidate属性规定在提交表单时不应该验证form或input域，novalidate属性适用于form以及text、search、url、telephone、email、password、date pickers、range和color类型的input 标签。如：

form action="demo_form.asp" method="get" novalidate="true"

10. pattern属性

pattern属性规定用于验证input域的模式（pattern），模式（pattern）是正则表达式。pattern属性适用于text、search、url、telephone、email以及password类型的input 标签。下面的例子显示了一个只能包含三个字母的文本域（不含数字及特殊字符）：

Country code: input type="text" name="country_code" pattern="[A-z]{3}" title="Three letter country code" /

11. placeholder属性

placeholder属性提供一种提示（hint），描述输入域所期待的值。placeholder属性适用于text、search、url、telephone、email以及password类型的input 标签。提示（hint）会在输入域为空时显示出现，会在输入域获得焦点时消失，例如：

input type="search" name="user_search"placeholder="Search W3School" /

12. required属性

required属性规定必须在提交之前填写输入域（不能为空）。required属性适用于text、search、url、telephone、email、password、date pickers、number、checkbox、radio以及file类型的input标签，如：

Name: input type="text" name="usr_name" required="required" /

HTML5新增的8类INPUT输入类型介绍

已经有的输入类型

HTML代码示例：

代码如下:

文本域

input

type="text"

单选按钮

input

type="radio"

复选框

input

type="checkbox"

下拉列表

selectoption

密码域

input

type="password"

提交按钮

input

type="submit"

可单击按钮

input

type="button"

图像按钮

input

type="image"

隐藏域

input

type="hidden"

重置按钮

input

type="reset"

文件域

input

type="file"

在HTML5中，增加了多个新的表单input输入类型，通过使用这些新增元素，可以实现更好的输入控制和验证。

1、email类型的应用

email类型的input元素是一种专门用于输入E-mail地址的文本输入框，在提交表单的时候，会自动验证email输入框的值。

代码如下:

input

type="email"

name="user_email"

/

2、url类型的应用

url类型的input元素提供用于输入url地址这类特殊文本的文本框。

代码如下:

input

type="url"

name="user_url"

/

3、number类型的应用

number类型的input元素提供用于输入数值的文本框。

代码如下:

input

type="number"

name="number1"

min="1"

max="20"

step="4"

/

4、range类型的应用

range类型的input元素提供用于输入包含一定范围内数字值得文本框，在网页中显示为滚动条。

代码如下:

input

type="range"

name="range1"

min="1"

max="30"

/

5、日期检出类型的应用

输入类型

HTML代码

功能说明

代码如下:

date

input

type="date"

选取日、月、年

month

input

type="month"

选取月、年

代码如下:

week

input

type="week"

选取周和年

代码如下:

time

input

type="time"

选取时间（小时和分钟）

代码如下:

datetime

input

type="datetime"

选取时间、日、月、年（UTC时间）

代码如下:

datetime-local

input

type="datetime-local"

选取时间、日、月、年（本地时间）

6、search类型的应用

search类型的input元素提供用于输入搜索关键词的文本框。

代码如下:

input

type="search"

name="search1"

/

input[type="search"]{

-webkit-appearance:textfield;

}

7、tel类型的应用

tel类型的input元素提供专门用于输入电话号码的文本框。

代码如下:

input

type="tel"

name="tel"

/

8、color类型的应用

color类型的input元素提供专门用于设置颜色的文本框。

代码如下:

input

type="color"

name="color"

/

html5新增的表单元素有哪些

html5新增的表单元素有以下几种：

datalist，keygen，output三种无素。

1.datalist 元素

datalist 元素规定输入域的选项列表。

列表是通过 datalist 内的 option 元素创建的。

如需把 datalist 绑定到输入域，请用输入域的 list 属性引用 datalist 的 id。

2.keygen 元素

keygen 元素的作用是提供一种验证用户的可靠方法。

keygen 元素是密钥对生成器（key-pair generator）。当提交表单时，会生成两个键，一个是私钥，一个公钥。

私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）。

3.output 元素

output 元素用于不同类型的输出，比如计算或脚本输出。

根据具体问题类型，进行步骤拆解／原因原理分析／内容拓展等。

具体步骤如下：／导致这种情况的原因主要是……

关于html5表单file和HTML5表单属性的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。