编程技术是改变世界的力量。
本站
当前位置:网站首页 > HTML/CSS > 正文

html详解之input_html详解之input

gowuye 2023-10-11 14:12 22 浏览 0 评论


input框作为一个简单的输入框,你对它的属性知道有多少?
常见的属性(带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 控件(不带时区)。

相关推荐

python中调试pdb_python怎么调试
python中调试pdb_python怎么调试

当你的Python程序出现错误或行为不符合预期时,调试工具是一种非常有用的方式来帮助你找到问题所在。Python内置了一个强大的调试器模块,称为pdb(Pyth...

2023-10-22 12:21 gowuye

vue3+tsx开发语法详解_vue3+typescript
vue3+tsx开发语法详解_vue3+typescript

很多组件库都使用了TSX的方式开发,主要因为其灵活性比较高,TSX和SFC开发的优缺点就不介绍了,这里主要说一下将SFC项目改造为TSX的过程。安装JSX库pn...

2023-10-22 12:20 gowuye

对前端初学者的一些帮助(常见名词解释)
对前端初学者的一些帮助(常见名词解释)

1.HTML:HTML是超文本标记语言,“超文本”就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素。2.CSS:主要用来设计网页的样式,美化网页;...

2023-10-22 12:20 gowuye

JAVA多线程详解(超详细)_java多线程菜鸟教程
JAVA多线程详解(超详细)_java多线程菜鸟教程

一、线程简介1、进程、线程程序:开发写的代码称之为程序。程序就是一堆代码,一组数据和指令集,是一个静态的概念。进程(Process):将程序运行起来,我们称之...

2023-10-22 12:19 gowuye

一文搞懂什么时候用 Runnable?什么时候用 Callable ?

今天我们看一道leetcodehard难度题目:统计可以被K整除的下标对数目。题目给你一个下标从0开始、长度为n的整数数组nums和一个整数k,返回满足下述条件的下标对(i...

优化重复冗余代码的8种方式_优化重复冗余代码的8种方式是什么

日常开发中,我们经常会遇到一些重复代码。大家都知道重复代码不好,它主要有这些缺点:可维护性差、可读性差、增加错误风险等等。最近呢,我优化了一些系统中的重复代码,用了好几种的方式。感觉挺有用的,所以本文...

高级 CSS 和 Sass:Flexbox、网格、动画等等!
高级 CSS 和 Sass:Flexbox、网格、动画等等!

Udemy-高级CSS和Sass:Flexbox、网格、动画等等!讲师:JonasSchmedtmann下载:口袋资源网高级CSS和Sass:...

2023-10-22 12:19 gowuye

我们现在正处于 JavaScript 消亡的边缘?
我们现在正处于 JavaScript 消亡的边缘?

每10年JavaScript都会发生一次改朝换代式的变革。在我看来,JavaScript当前正处于一次快速变革的开始,而这段时期未来可能会被称为Ja...

2023-10-22 12:19 gowuye

CSS预编译器三剑客及PostCSS_前端预编译css有哪几种
CSS预编译器三剑客及PostCSS_前端预编译css有哪几种

这篇文章包含两个部分,第一部分是个CSS预编译器:Sass、Less、Stylus,他们之间的对比,第二部分是现在大火的PostCSS。为什么会出现CSS预编译...

2023-10-22 12:18 gowuye

CSS预处理语言Sass入门_css3预处理器
CSS预处理语言Sass入门_css3预处理器

1.引言CSS3之前的CSS都大都是枚举属性样式,而编程语言强大的变量、函数、循环、分支等功能基本都不能在CSS中使用,让CSS的编程黯淡无光,Sass就是一...

2023-10-22 12:18 gowuye

“金三银四”,让我们愉快的开始准备Web面经吧:CSS篇
“金三银四”,让我们愉快的开始准备Web面经吧:CSS篇

前言又到了一年一度的“金三银四的季节了”。不过恐怕大家都有感觉,当下,正面临着近几年来的最严重的互联网寒冬,因此今天的“金三银四”肯定又是一场更为惨烈的江湖厮杀...

2023-10-22 12:18 gowuye

sass @extend(继承)指令详解_sass内置函数总结

在设计网页的时候常常遇到这种情况:一个元素使用的样式与另一个元素完全相同,但又添加了额外的样式。通常会在HTML中给元素定义两个class,一个通用样式,一个特殊样式。普通CSS的实现接下来以警...

Sass混合的使用_sas中如何合并两组数据

本节我们学习Sass中的混合,Sass中的混合是通过@mixin指令来定义的,混合允许我们定义可以在整个样式表中重复使用的样式,避免使用无语意的类。混合可以包含所有的CSS规则和任何其他...

css代码规范工具stylelint_代码规范

css样式的书写顺序及原理——很重要!很重要!很重要!为什么重要???概括讲就是,它涉及了浏览器的渲染原理:reflow和repaint还想知道更多为什么可以参考:https://blog.csdn....

CSS-in-JS 是恶魔还是天使?_天启四骑士是恶魔还是天使
CSS-in-JS 是恶魔还是天使?_天启四骑士是恶魔还是天使

有些人极为讨厌CSS-in-JS,单单提起这个名字都会让他们反感,总之就是拒绝二字。他们认为样式不属于JavaScript,而是属于CSS,并且CSS...

2023-10-22 12:17 gowuye

取消回复欢迎 发表评论: