必知的技术知识:input详解

简介: 必知的技术知识:input详解

input框作为一个简单的输入框,你对它的属性知道有多少?


常见的属性(带new为h5新增属性):


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


属性值:


audio/,音频


video/ ,视频


image/ ,图片


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


[span class="hljs-built_in">input type="file" name="pic" accept="image/" />


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


[span class="hljs-built_in">input type="file" //代码效果参考:http://www.jhylw.com.cn/245038591.html

accept="audio/ ,video/,image/*" />

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


属性值:text


value 属性对于不同 input 类型,用法也不同:


对于 "button"、"reset"、"submit" 类型 - 定义按钮上的文本


对于 "text"、"password"、"hidden" 类型 - 定义输入字段的初始(默认)值


对于 "checkbox"、"radio"、"image" 类型 - 定义与 input 元素相关的值,当提交表单时该值会发送到表单的 action URL。


注意:value 属性对于 和 是必需的。


注意:value 属性不适用于 。



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


属性值:text


[span class="hljs-built_in">input type="text" name="email" />


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


属性值:number


[span class="hljs-built_in">input type="text" name="email" size="35" />


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


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


属性值:number


[span class="hljs-built_in">input type="text" //代码效果参考:http://www.jhylw.com.cn/332730775.html

name="usrname" maxlength="10" />

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



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


[span class="hljs-built_in">input type="text" name="username" required />


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


属性值:text


[span class="hljs-built_in">input type="image" src="submit.gif" alt="Submit" width="48" height="48" />


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


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


[span class="hljs-built_in">input autocomplete="off" />


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


10、autofocus(new):属性规定当页面加载时 元素应该自动获得焦点。


属性值:autofocus


[span class="hljs-built_in">input type="text" autofocus />


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


属性值:checked


小汽车


12、disabled:disabled 属性规定应该禁用的 元素。


属性值:disabled


[span class="hljs-built_in">input type="text" name="lname" disabled />


13、form(new): form 属性规定 元素所属的一个或多个表单。


位于 form 表单外的输入字段(但仍然属于 form 表单的一部分):


[span class="hljs-name">form action="demo-form.php" id="form1"

First name: [span class="hljs-name">input type="text" name="fname"br

[span class="hljs-name">input type="submit" value="提交"


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


属性值:URL


[span class="hljs-built_in">input type="submit" formaction="demo-admin.php" value="提交" />


注意:


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


formaction 属性覆盖 元素的 action 属性。


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


属性值:application/x-www-form-urlencoded ;multipart/form-data text/plain


[span class="hljs-built_in">input type="submit" formenctype="multipart/form-data" value="以 Multipart/form-data 提交" />


注意:


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


formenctype 属性覆盖 元素的 enctype 属性。


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


属性值:get / post


[span class="hljs-built_in">input type="submit" formmethod="post" formaction="demo-post.php" value="使用 POST 提交" />


17、formnovalidate(new):formnovalidate 属性覆盖 元素的 novalidate 属性。


属性值:formnovalidate


[span class="hljs-built_in">input type="submit" formnovalidate="formnovalidate" value="不验证提交"

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


属性值:_blank; _self; _parent; _top; framename


[span class="hljs-built_in">input type="submit" formtarget="_blank" value="提交到一个新的页面上"

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


属性值:pixels


[span class="hljs-built_in">input type="image" src="img_submit.gif" alt="Submit" width="48" height="48" />


20、max (new);min(new):属性规定 元素的最大值和最小值。


属性值:number;date


[span class="hljs-built_in">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):属性规定允许用户输入到 元素的多个值。


属性值:multiple


[span class="hljs-built_in">input type="file" name="img" multiple>


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


22、pattern (new):pattern 属性规定用于验证 元素的值的正则表达式。


属性值:regexp;



23、placeholder (new): 属性规定可描述输入 字段预期值的简短的提示信息 。


属性值:text


[span class="hljs-built_in">input placeholder="请输入姓名" />


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


属性值:URL


[span class="hljs-built_in">input type="image" src="submit.gif" alt="Submit" />


25、step (new): step 属性规定 元素的合法数字间隔。


属性值:number


[span class="hljs-built_in">input type="number" name="points" step="3"

26、list(new) :属性引用 元素,其中包含 元素的预定义选项。


属性值:datalist_id


[span class="hljs-name">input list="browsers"

[span class="hljs-name">datalist id="browsers"

[span class="hljs-name">option value="Internet Explorer"

[span class="hljs-name">option value="Firefox"

[span class="hljs-name">option value="Google Chrome"

[span class="hljs-name">option value="Opera"

[span class="hljs-name">option value="Safari"


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


属性值: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:定义提交按钮。


text:默认。定义一个单行的文本字段(默认宽度为 20 个字符)。


time(new):定义用于输入时间的控件(不带时区)。


url(new):定义用于输入 URL 的字段。


week(new):定义 week 和 year 控件(不带时区)。

相关文章
|
2月前
|
设计模式 Java 测试技术
软件测试/测试开发/全日制|Page Object模式:为什么它是Web自动化测试的必备工具
软件测试/测试开发/全日制|Page Object模式:为什么它是Web自动化测试的必备工具
65 0
|
5天前
|
移动开发 前端开发 JavaScript
必知的技术知识:input的30个属性
必知的技术知识:input的30个属性
|
21天前
|
机器学习/深度学习 存储 人工智能
人工智能平台PAI产品使用合集之filePath该如何写
阿里云人工智能平台PAI是一个功能强大、易于使用的AI开发平台,旨在降低AI开发门槛,加速创新,助力企业和开发者高效构建、部署和管理人工智能应用。其中包含了一系列相互协同的产品与服务,共同构成一个完整的人工智能开发与应用生态系统。以下是对PAI产品使用合集的概述,涵盖数据处理、模型开发、训练加速、模型部署及管理等多个环节。
|
1月前
|
开发者 知识图谱
如何参与社区讨论以了解最新的WAI-ARIA技术发展
【6月更文挑战第2天】如何参与社区讨论以了解最新的WAI-ARIA技术发展
11 2
|
2月前
|
信息无障碍
BUUCTF [WUSTCTF2020]find_me 1
BUUCTF [WUSTCTF2020]find_me 1
38 0
|
2月前
|
算法 机器人 程序员
Scratch3.0——助力新进程序员理解程序(案例六、足球乱射)
Scratch3.0——助力新进程序员理解程序(案例六、足球乱射)
31 0
|
2月前
|
缓存 数据安全/隐私保护 C++
什么是计算机软件设计中的 wrapper 技术
什么是计算机软件设计中的 wrapper 技术
|
2月前
|
Web App开发 移动开发 iOS开发
H5学习之路之Input类型新特性
H5学习之路之Input类型新特性
28 0
|
前端开发
前端知识学习案例22-code sand box线上编码平台
前端知识学习案例22-code sand box线上编码平台
69 0
前端知识学习案例22-code sand box线上编码平台
|
Android开发
libxxx.so- text relocations问题的终极解决方案
问题表现形式 错误或警告日志 当targetSdkVersion>=23且使用debug签名时,在6.0+的Android设备上运行App会输出以下错误Log: E/linker: /data/app/packagename/lib/arm/libxxx.
3081 0