html详解之input

nput框作为一个简单的输入框,你对它的属性知道有多少？
常见的属性（带new为h5新增属性）:

1、accept：accept 属性规定了可通过文件上传提交的服务器接受的文件类型。仅用于input的type类型为"file"的时候。

属性值：

audio/*，音频

video/* ，视频

image/* ，图片

MIME_type，一个有效的 MIME 类型，不带参数

  <input type="file" name="pic" accept="image/*" />

// 如需规定多个值，请使用逗号分隔

<input  type="file" accept="audio/*,video/*,image/*" />

2、value：指定元素的value值。

属性值：text

value 属性对于不同 input 类型，用法也不同：

对于 "button"、"reset"、"submit" 类型 - 定义按钮上的文本
对于 "text"、"password"、"hidden" 类型 - 定义输入字段的初始（默认）值
对于 "checkbox"、"radio"、"image" 类型 - 定义与 input 元素相关的值，当提交表单时该值会发送到表单的 action URL。

注意：value 属性对于 <input type="checkbox"> 和 <input type="radio"> 是必需的。

注意：value 属性不适用于 <input type="file">。

<input value="文本" />

3、name:表示的该文本输入框名称。用于表单提交后引用表单数据。只有设置了 name 属性的表单元素才能在提交表单时传递它们的值。

属性值：text

<input type="text" name="email" />

4、size：输入框的长度大小。

属性值：number

<input type="text" name="email" size="35" />

注意：size 属性适用于下面的 input 类型：text、search、tel、url、email 和 password。

5、maxlength：输入框中允许输入字符的最大数。

属性值：number

<input type="text" name="usrname" maxlength="10" />

6、readonly：表示该框中只能显示，不能添加修改。

<input type="text" name="country" value="中国" readonly />

7、required（new）：属性规定必须在提交表单之前填写输入字段。

 <input type="text" name="username" required />

8、alt：定义图像输入的替代文本。 (只针对type="image")

属性值：text

<input type="image" src="submit.gif" alt="Submit" width="48" height="48" />

9、autocomplete（new）：autocomplete 属性规定输入字段是否应该启用自动完成功能。

属性值：on/off，默认启动自动完成功能。

<input autocomplete="off" />

注意：autocomplete 属性适用于下面的 <input> 类型：text、search、url、tel、email、password、datepickers、range 和 color。

10、autofocus（new）：属性规定当页面加载时 <input> 元素应该自动获得焦点。

属性值：autofocus

<input type="text"  autofocus />

11、checked：checked 属性规定在页面加载时应该被预先选定的 <input> 元素。 (只针对 type="checkbox" 或者 type="radio")

属性值：checked

<input type="checkbox" name="vehicle" value="Car" checked />小汽车

12、disabled：disabled 属性规定应该禁用的 <input> 元素。

属性值：disabled

<input type="text" name="lname" disabled />

13、form（new）: form 属性规定 <input> 元素所属的一个或多个表单。

位于 form 表单外的输入字段（但仍然属于 form 表单的一部分）：

<form action="demo-form.php" id="form1">
    First name: <input type="text" name="fname"><br>
   <input type="submit" value="提交">
</form>

14、formaction（new）:属性规定当表单提交时处理输入控件的文件的 URL。(只针对 type="submit" 和 type="image")

属性值：URL

<input type="submit" formaction="demo-admin.php" value="提交" />

注意：

formaction 属性规定当表单提交时处理输入控件的文件的 URL。

formaction 属性覆盖 <form> 元素的 action 属性。

15、formenctype（new）：属性规定当表单数据提交到服务器时如何编码(只适合 type="submit" 和 type="image")。

属性值：application/x-www-form-urlencoded ；multipart/form-data text/plain

<input type="submit" formenctype="multipart/form-data" value="以 Multipart/form-data 提交" />

注意：

formenctype 属性规定当表单数据提交到服务器时如何编码（仅适用于 method="post" 的表单）。

formenctype 属性覆盖 <form> 元素的 enctype 属性。

16、formmethod （new）：定义发送表单数据到 action URL 的 HTTP 方法。 (只适合 type="submit" 和 type="image")

属性值：get / post

<input type="submit" formmethod="post" formaction="demo-post.php" value="使用 POST 提交" />

17、formnovalidate（new）：formnovalidate 属性覆盖 <form> 元素的 novalidate 属性。

属性值：formnovalidate

<input type="submit" formnovalidate="formnovalidate" value="不验证提交">

18、formtarget （new）:规定表示提交表单后在哪里显示接收到响应的名称或关键词。(只适合 type="submit" 和 type="image")

属性值：_blank； _self； _parent； _top； framename

<input type="submit" formtarget="_blank" value="提交到一个新的页面上">

19、height （new）;width（new）:属性规定 <input> 元素的高度和宽度。 (只针对type="image")

属性值：pixels

<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48" />

20、max （new）;min（new）:属性规定 <input> 元素的最大值和最小值。

属性值：number；date

 <input type="date" name="bday" max="1979-12-31">
  <input type="date" name="bday" min="2000-01-02">  
<input type="number" name="quantity" min="1" max="5">

21、multiple （new）：属性规定允许用户输入到 <input> 元素的多个值。

属性值：multiple

<input type="file" name="img" multiple>

注意：multiple 适用于以下 input 类型：email 和 file。

22、pattern （new）：pattern 属性规定用于验证 <input> 元素的值的正则表达式。

属性值：regexp;

<form action="demo_form.html">
   Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">
   <input type="submit">
</form>

23、placeholder （new）：属性规定可描述输入 <input> 字段预期值的简短的提示信息。

属性值：text

<input placeholder="请输入姓名" />

24、src : src 属性规定显示为提交按钮的图像的 URL。 (只针对 type="image")

属性值：URL

<input type="image" src="submit.gif" alt="Submit" />

25、step （new）: step 属性规定 <input> 元素的合法数字间隔。

属性值：number

<input type="number" name="points" step="3">

26、list（new） :属性引用 <datalist> 元素，其中包含 <input> 元素的预定义选项。

属性值：datalist_id

<input list="browsers">

<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Google Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

27、type: type 属性规定要显示的 <input> 元素的类型。

属性值：button；checkbox；color；date；datetime；datetime-local；email；file；hidden；image；month；number；password；radio；range；reset；search；submit；tel；text；time；url；week

type的属性值众多，也是用的比较多的一个。

button：定义可点击的按钮（通常与 JavaScript 一起使用来启动脚本）。

checkbox：定义复选框。

color（new）：定义拾色器。

date（new）：定义 date 控件（包括年、月、日，不包括时间）。

datetime（new）：定义 date 和 time 控件（包括年、月、日、时、分、秒、几分之一秒，基于 UTC 时区）。

datetime-local（new）：定义 date 和 time 控件（包括年、月、日、时、分、秒、几分之一秒，不带时区）。

email（new）：定义用于 e-mail 地址的字段。file定义文件选择字段和 "浏览..." 按钮，供文件上传。

hidden：定义隐藏输入字段。

image：定义图像作为提交按钮。

month（new）：定义 month 和 year 控件（不带时区）。

number（new）：定义用于输入数字的字段。

password：定义密码字段（字段中的字符会被遮蔽）。

radio：定义单选按钮。

range（new）：定义用于精确值不重要的输入数字的控件（比如 slider 控件）。

reset：定义重置按钮（重置所有的表单值为默认值）。

search（new）：定义用于输入搜索字符串的文本字段。

submit：定义提交按钮。

tel（new）：定义用于输入电话号码的字段。

text：默认。定义一个单行的文本字段（默认宽度为 20 个字符）。

time（new）：定义用于输入时间的控件（不带时区）。

url（new）：定义用于输入 URL 的字段。

week（new）：定义 week 和 year 控件（不带时区）。

例

带有两个输入字段和一个提交按钮的 HTML 表单：

First name: <input type="text" name="fname"><br>

Last name: <input type="text" name="lname"><br>

</form>

（更多实例见页面底部）

浏览器支持

所有主流浏览器都支持 <form> 标签。

标签定义及使用说明

<form> 标签用于创建供用户输入的 HTML 表单。

<form> 元素包含一个或多个如下的表单元素：

<input>
<textarea>
<button>
<select>
<option>
<optgroup>
<fieldset>
<label>

HTML 4.01 与 HTML5之间的差异

HTML5 新增了两个新的属性：autocomplete 和 novalidate，同时不再支持 HTML 4.01 中的某些属性。

HTML 与 XHTML 之间的差异

在 XHTML 中，name 属性已被废弃。使用全局 id 属性代替。

属性

New ：HTML5 中的新属性。

属性	值	描述
accept	MIME_type	HTML5 不支持。规定服务器接收到的文件的类型。（文件是通过文件上传提交的）
accept-charset	character_set	规定服务器可处理的表单数据字符集。
action	URL	规定当提交表单时向何处发送表单数据。
autocompleteNew	onoff	规定是否启用表单的自动完成功能。
enctype	application/x-www-form-urlencodedmultipart/form-datatext/plain	规定在向服务器发送表单数据之前如何对其进行编码。（适用于 method="post" 的情况）
method	getpost	规定用于发送表单数据的 HTTP 方法。
name	text	规定表单的名称。
novalidateNew	novalidate	如果使用该属性，则提交表单时不进行验证。
target	_blank_self_parent_top	规定在何处打开 action URL。

全局属性

<form> 标签支持 HTML 的全局属性。

事件属性

<form> 标签支持 HTML 的事件属性。

实例

带有复选框的表单

此表单包含两个复选框和一个提交按钮。

带有单选按钮的表单

此表单包含两个单选框和一个提交按钮。

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！

TML DOM INPUT FILE 大文件上传源代码，B/S大附件上传，支持断点续传，VUE处理文件流实现上传下载，VUE 上传大型文件插件(VUE上传视频插件)

之前在网上也搜索过相关的资料，在论坛里面也与网络交流过，但是给出的方案都不太令人满意。一方面论坛里面的网页都没有真实的项目经验。几乎大部分的网页都是在纸上谈兵，很多问题完全是凭想象在回答。

后端PHP5,PHP6,PHP7,PHP8，ThinkPHP，

服务器支持Linux，Windows,macOS,CentOS,中标麒麟，银河麒麟，统信，龙芯，华为鲲鹏，

数据库支持MySQL，达梦数据库，人大金仓

需要提供前端源码，后端源码，控件源码

需要提供7*24小时技术支持，长期技术支持，长期维护服务

需要提供手机，QQ，微信，企业微信，电子邮箱等联系方式

需要支持包含IE在内的全部浏览器

终端需要支持Windows,macOS,Linux,信创国产化环境，中标麒麟，银河麒麟，统信UOS，龙芯，华为

功能需要支持10G，50G,100G大文件上传和断点续传，刷新续传，重启续传

文件夹包含1W，10W，100W个文件和层级结构

支持超大文件分片，分段，分块，分割上传下载，断点续传

支持文件夹上传，下载断点续传，支持文件夹层级结构，层级结构信息保存到数据库，下载的时候同样保留层级结构

支持加密上传，下载加密，端到端加密，国密SM4加密算法，数据加密传输，传输过程中要保证数据是加密的。1.下载示例

https://gitee.com/xproer/up6-vue-cli

将up6组件复制到项目中

示例中已经包含此目录

1.引入up6组件

2.配置接口地址

接口地址分别对应：文件初始化，文件数据上传，文件进度，文件上传完毕，文件删除，文件夹初始化，文件夹删除，文件列表

参考：http://www.ncmem.com/doc/view.aspx?id=e1f49f3e1d4742e19135e00bd41fa3de

3.处理事件

启动测试

启动成功

效果

数据库

源码工程文档：https://drive.weixin.qq.com/s?k=ACoAYgezAAw1dWofra

源码报价单：https://drive.weixin.qq.com/s?k=ACoAYgezAAwoiul8gl

OEM版报价单：https://drive.weixin.qq.com/s?k=ACoAYgezAAwuzp4W0a

控件源码下载：https://drive.weixin.qq.com/s?k=ACoAYgezAAwbdKCskc

在线咨询

上一篇：CSS常见的20道前端面试题及答案
下一篇：用JavaScript开发移动原生应用，Facebook正式开源React Native！

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

html详解之input

您的项目需求