在前端开发中必然会涉及到用户交互功能的开发,例如注册登录、评论等等。只要涉及到用户录入信息的过程,我们都要用到input标签。本文就主要问大家介绍一下input标签的type属性。
1、单行输入框< input type"text"/>。单行文本的输入框常用来输入简单的信息,例如用户名、账号等等。具体的属性有:name、value、maxlength。
2、密码输入框<input type=”password”/>。其内容以圆点的形式显示。
3、但选按钮<input type-”radio”/>。单选按钮用于单项选择,在定义单选按钮时必须为同一组中的选项制定相同的name值,可以对单选按钮应用checked属性,制定默认选中项。
4、复选框<input type=”checkbox”/>。复选框用于多想选择,也可以对其应用checked属性。
5、普通按钮<input type=”button”/>。普通按钮尝尝配合JavaScript脚本语言使用。
6、提交按钮<inpyt ytpe=”submit”/>。提交按钮时表单中的核心空间,用户完成信息的录入后一般需要提交才可以完成,可以对其使用value属性,改变提交按钮上的默认文本。
7、重置按钮<inpyt type=”reset”/>。当用户输入有误时,直接点击充值按钮可以取消以输入信息,可以对其使用value属性,改变充值按钮上的默认文本。
8、图像形式的提交按钮<input type=”image”/>。图像提交按钮就是用图像代理了默认的按钮,其功能上虞提交按钮相同。需要注意的是,必须为其定义scr属性指定图像的url地址。
9、隐藏域<input type=”hidden”/>。隐藏域对于用户是不可见的,通常用于后台的程序。
10、文件域<input tyupe=”fie”/>。当定义文件域时,页面将出现一个选择文件按钮和提示信息文办,用户可以单击按钮然后直接选择文件的方式,将文件提交给后台服务器。
11、emai类型<input type=”emai”/>。emai类型的<input/>标记是专门用于输入e-mail地址的文本输入框,用来验证emai输入框的内容是否符合e-mail地址格式。会提示错误信息。
12、url类型<input type”url”/>。这是专门用于输入url地址的文本框。并对输入的内容进行检验。
13、tel类型<input type”tel”/>。用于输入电话号码,一般tel类型通常会和pattern属性配合使用。
14、Search类型<input type=”search”/>。专门用于输入搜索关键词的文本框,他能自动记录一些字符。用户输入内容后,其右侧会附带一个删除图标,可以快速清除内容。
15、Color类型<input type”color”/>。可以用于提供设计颜色的文本框,用户实现一个RGB颜色输入。其基本形式是#RRGGBB,默认值为#000000,通过value属性值可以更改默认颜色。单击color类型文本框,可以快速打开拾色器面板,方便用户可视化选取颜色。
16、number类型<input tupe=”numbber”/>。用于输入熟知的文本框。并检测输入的是否是数字。此外可以增加其他属性,vale制定输入框的初始值,max/min限定输入框的最大最小值,sep输入合法的数字间隔,如果不设置默认值为1。
<input>标签的属性不仅仅是这些,包括限定日期、时间等等,如果浏览器不支持<input/>标签输入类型,则会在网页中显示为一个普通的输入框。作为前端工程师,<input/>标签的时用率是非常高的。建议大家收藏本文,方便大家随时使用。
— 申请免费试学名额 —
在职想转行提升,担心学不会?根据个人情况规划学习路线,闯关式自适应学习模式保证学习效果
讲师一对一辅导,在线答疑解惑,指导就业!
相关推荐 更多
学Javascript要看什么书?从入门到进阶书籍推荐
程序员想要完成一些简单的WEB前端需求,就必须掌握基础的JavaScript编程能力。因此为了方便大家学Javascript,小编整理了Javascript从入门到进阶的经典书籍,推荐给大家。
5558
2019-08-07 18:58:55
前端开发CSS清除浮动的方法有哪些?
在前端开发过程中,非IE浏览器下,当容器的高度自动,并且容器内容中有浮动元素(float为left或right),此时如果容器的高度不能自适应内容的高度,从而使得内容溢出破坏整体布局,这种现象叫做浮动溢出,为了方式这个现象的发生,就需要对CSS样式进行处理,而这个过程就叫做CSS清除浮动。现在常用的CSS清除浮动的方法有哪些呢?
2853
2019-10-30 18:55:42
前端学习之HTML基本标签介绍
计算与语言与学习外语相同,都要首先掌握它的基本语法和规则。HTML作为入门互联网最基本的开发语言之一,是每一位互联网技术人员都需要掌握的技术,尤其是前端开发工程师。对于初学者而言,HTML都有哪些基本标签。这些标签分别有哪些作用呢?
2507
2019-11-04 18:45:05
Web前端工程师的薪资待遇怎么样?工资有多少?
随着移动时代的来临,负责给用户展现浏览网页的前端工程师渐渐走到了台前,成为互联网公司的重要技术岗位之一。既然前端工程师这么吃香,那么Web前端工程师的薪资待遇怎么样?工资有多少呢?以北京地区的招聘统计数据为例,前端工程师的薪资待遇大概在6K—20K元左右,工作经验和个人能力都是影响工资的重要因素。同时前端还是一个很好的职业跳板,无论是转技术还是管理岗位都有很好的发展前景。
5931
2019-11-04 19:49:48
Web前端面试排序算法总结
Web前端面试排序算法总结,前端工程师面试过程中会涉及排序算法的考察,经常用到的排序算法有冒泡排序、选择排序、插入排序、希尔排序、归并排序、快速排序、堆排序、计数排序、桶排序、基数排序。
2391
2020-03-24 14:14:19
热门文章
- 缓存淘汰策略有几种?要怎么用?
- 软件测试极速就业班课程怎么样?零基础能学吗
- 狂野架构师学习效果好不好?互联网Java架构师前景怎么样?
- 博学谷狂野大数据学习效果好不好?课程怎么样?
- Redis持久化机制实现原理是什么?流程是什么?
- 万物互联是什么?会带来哪些改变?
- MySQL索引种类有哪些?底层实现原是什么
- 零基础转行IT互联网岗位月入过万需要多久?
- 从0搭建后端技术涉及到哪些知识点?
- 疫情下的医疗行业如何快速响应的?互联网技术功不可没 查看更多
扫描二维码,了解更多信息
