一、input标签属性介绍

input标签有许多属性,如:type,name,id,value,style

  • name属性:表示元素的名称,也就是name的值代表当前input元素的名字;
  • id属性:用于css引用或者其他引用
  • value属性:表示当前input框内显示的文字
  • style属性:用于设置css样式。如颜色,背景色等
  • type属性:用于设置输入框的类型,最重要的属性

如图:

以上属性中,type属性最重要,接下来讲解其type属性。



二、input标签的type属性详述

其type属性有多种类型:

  •                         文本框(type=text),
  •                         按钮(type=button),
  •                         单选(type=radio)
  •                         复选(type=checkbox)
  •                        下拉列表(type=select)
  •                        文本域(type=textarea)

如图:用Input标签,利用其type属性,从而可以设置一系列表单元素,input表签放在form表单中。

如:以下便是一个表单区域,用于收集家长的建议与反馈


三、input的type属性

1.文本框

运行结果:


 

2.密码框

运行结果:

注:密码框与文本框的区别:密码框输入的内容不可见,而文本框可见。


 

3.提交按钮

运行结果:


 

4.重置按钮

运行结果:

注:作用在于清空输入的信息。



 

5.单选框

运行结果:


6.复选框(多选框)

运行结果:


7.下拉列表框

运行结果:



 

8.文本域

运行结果:

Logo

「智能机器人开发者大赛」官方平台,致力于为开发者和参赛选手提供赛事技术指导、行业标准解读及团队实战案例解析;聚焦智能机器人开发全栈技术闭环,助力开发者攻克技术瓶颈,促进软硬件集成、场景应用及商业化落地的深度研讨。 加入智能机器人开发者社区iRobot Developer,与全球极客并肩突破技术边界,定义机器人开发的未来范式!

更多推荐