登录  /  注册

html input标签的属性有哪些?input标签的用法总结(附实例)

寻∝梦
发布: 2018-09-04 17:27:36
原创
13693人浏览过

本篇文章主要的向大家介绍了关于html input标签的属性,还有关于html input标签的具体的用法总结。让我们一起来看看html input标签有哪些用法吧

首先先来说说html input标签的属性:

1.type:该属性是input标签里唯一的必须输入的属性,当然,也可以不填,默认为type = "text"。具体它有那些值,我们后面再讨论。

2.required:标记一个字段是否为必须。如果一个字段被标记为required = "required"(严格模式下),或者required(宽松模式下)(ps:下面属性的写法同理,就不一一写出了),并且这个字段的值为空,或者填入的值是无效值,那么这个表单不能提交。什么是无效值?看pattern属性。

3.pattern:该属性包含了一个JavaScript风格的正则表达式,输入的内容必须完全匹配该正则表达式,不然就算输入的内容无效。对正则表达式不了解?可以去看看JavaScript 正则表达式。

4.min max:这两个属性用于日期date时间time等输入,还有number和range。顾名思义,它们的作用是限制最大值,最小值。

5.step:和max min类似,作用是提供一个可以上下点的按钮,比如当前数字是1,你设置了step = "5",点一下上的按钮,就变成6了。

6.placeholder:该属性不多说,大家应该都很熟悉,一般是用来提示用户输入的,当用户真的输入了文字之后,会被输入的文字覆盖。

7.readonly:顾名思义,该属性会让表单空控件不可编辑。这里的不可编辑不是禁用,只是不能编辑文本而已,比如像单选框radio,复选框checkbox这种,本来就是不可编辑的,所以这个属性对它们来说毫无意义。

8.disabled:该属性会禁用一个表单元素。这里是禁用,完全禁用掉除了之外的所有表单元素。

9.maxlength :该属性用于限制用户输入的最大字数限制。

10.size:已经没什么时候实际的作用了,控制大小现在几乎都是由CSS控制了。

11.form:在HTML5中,表单控件已经没有必要嵌套在一个表单中,新的form属性可以把表单元素与页面上的任意的表单关联起来。也可以被嵌套在一个表单中,随着另一个表单提交,代码如下:

<form id="form1"></form>
<p>
<label for="admin">admin</label>
<input type="text" id="admin" form="form1"/>
</p>
登录后复制

这样,就把form和input联系起来了。如果input没有form属性,那么,它将被关联到离他最近的form表单。

12.autocomplete:顾名思义,自动完成,用户输入一部分,后面的自动补全。需要浏览器保存用户输入的内容,以便下一次自动补全。

13.autofocus:该属性指的是表示这个表单控件在页面载入的时候自动获得焦点。

以上就是html input标签的属性了。(想看更多就来PHP中文网,这里有最全的HTML视频教程

现在说说input标签的用法:

先看个html input标签的实例:

<form action="demo_form.asp">
用户名: <input type="text" name="fname"><br>
输入框: <input type="text" name="lname"><br>
<input type="submit" value="提交">
</form>
登录后复制

这个的效果如图:

tuyi.png

效果还是可以的,也是最简单的输入框的样式,我们今天讲的就要简单的,简单的也表示容易懂。

来说一说html input标签的用法总结:

1.文本框:

在表单中,文本框用来让用户输入字母、数字等等,如用户的姓名,地址等。

代码格式如下:

<input type=”text” name=”...” size=”...” maxlength=”...” value=”...”/>
登录后复制

2.密码框:

是一种特殊的文本域,用于输入密码。

代码格式如下:

<input type=”password” name=”...”  size=”...” maxlength=”...” value=”...”/>
登录后复制

3.隐藏域:

是用来收集或发送信息的不可见元素,对于网页的访问者来说,隐藏域是看不见的。当表单被提交时,隐藏域就会将信息用你设置时定义的名称和值发送到服务器上。

代码格式如下:

<input type=”hidden” name=”...” value=”...”/>
登录后复制

4.单选按钮:

当需要用户从有限个选项中选择一个时,使用单选按钮。比如我们在注册的时候选择体重。

代码格式如下:

<input type=”radio” name=”...” value=”...”/>
登录后复制

5.复选框:

允许在待选项中选中一项以上的选项。每个复选框都是一个独立的元素,都必须有一个独一的名称。

代码格式如下:

<input type=”checkbox” name=”...” value=”...”/>
登录后复制

6.文件上传框:

代码格式如下:

<input type”file” name=”...”>
登录后复制

注意:利用这项功能时,在 form 标签中要指定method属性。要把method 指定为post, enctype属性指定为 multipart/form-data。

说明:multipart 控件是否上传多文件

以上就是本篇关于html input标签的属性介绍,还有关于html input标签的用法总结,有问题可以在下方留言提问。

【小编推荐】

html下拉菜单怎么做?html下拉菜单的代码实例介绍

html中b标签和strong标签的区别是什么?b和strong区别的总结

以上就是html input标签的属性有哪些?input标签的用法总结(附实例)的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号