常见的控件介绍
阅读⽬录
常见的控件:
1.⽂本输⼊框（TextBox）
2.按钮控件（Button）
3.下拉选框（DropList）
4.⽇期/时间控件(Date/TimePicker)
5.（图⽚、⽂件）上传控件（Upload）
6.树形控件（TreeView）
7.列表框（ListBox）
8.多格式⽂本框（RichTextBox）
9.Tab控件
10.其他控件
11.多浏览器兼容性问题
以下是上述常⽤控件就样式、属性、功能、测试点等⽅⾯的总结
1.⽂本框
纯⽂本框（不带其他类型控件）主要分为密码框、⽂本框(TextBox)和多⾏⽂本框（TextArea）1.1密码框
（1）样式：
（2）属性：
输⼊的⽂本会⾃动以⿊⾊圆点或星号加密显⽰。
（3）功能：
⽤于输⼊密码
（4）测试点（功能）：
1.字符长度
2.是否区分字母⼤⼩写
3.全⾓半⾓输⼊（数字、英⽂）
4.是否允许空格字符
5.输⼊的密码是否密⽂显⽰，是否可以“显⽰密码”
6.安全性：是否可以复制、粘贴⽅式输⼊、复制粘贴后是否看到明⽂
7.安全性：密码传输过程是否加密、数据库保存是否加密
8.密码验证⽅式是否为⽐对模式。
9.登录后是否会⽤明⽂传递参数
10.利⽤复制粘贴等操作强制输⼊不允许的输⼊数据
11.同⽂本框测试点
1.2⽂本框
改变button按钮的形状（1）样式：
（2）属性：
普通⽂本框，允许输⼊⽂本、数字等类型的字符
（3）功能：
⽤于普通⽂本的输⼊和显⽰，常搭配其他控件使⽤
（4）测试点（功能）：
1.输⼊中⽂、英⽂⼤⼩写、数字、特殊字符，构建有效等价类和⽆效等价类
2.全⾓半⾓输⼊（数字、英⽂）和显⽰
3.输⼊框是否为必填项（空输⼊）
4.是否可以输⼊空格以及对空格的处理（包括全⾓半⾓、中英⽂、⽂本⾸尾、⽂本间的空格）
5.字符长度
6.⽀不⽀持快捷键操作（Enter、Ctrl+“C/V/X/A/Z”复制粘贴剪切全选撤销等）
7.数值型、⽇期型、时间型⽂本框的合法性校验
8.利⽤复制粘贴等操作强制输⼊不允许的输⼊数据
9.特殊字符（串）：单引号、双引号、分号、Null、null、/、\、转义字符、</html>等
10.JavaScript代码：<b>Hello</b>、alert("hello")
11.html代码：<font>你好</font>、<script>alert(/xss/)</script>
12.注⼊式Bug
1.3多⾏⽂本框
（1）样式：
（2）属性：
可以输⼊复数⾏的⽂本。⼀般附带滚动条（样式1）或可以拖曳⽂本框⼤⼩（样式2），以便浏览多⾏⽂本（3）功能：
多⾏⽂本的输⼊。
（4）测试点（功能）：
1.是否允许Enter换⾏
2.保存后是否保持输⼊时的格式显⽰
3.仅输⼊Enter换⾏能否保存
4.是否能够调整⽂本框⼤⼩，拖动调整⼤⼩时，能否与页⾯其他元素⾃适应
5.当输⼊⽂本较长时，是否出现滚动条或者⾃动扩展⽂本框⼤⼩
6.同“⽂本框”的1~6测试点
2.按钮控件
按钮（Button）主要分为命令按钮（Push/Command Button）、单选钮（Radio Button）、复选框（Check Box）以及它们的组合。
2.1命令按钮
应⽤程序中使⽤户通过简单的点击按钮来执⾏操作。当⽤户点击按钮后，不仅会执⾏相应操作，还会使该按钮看上去象被按下并释放⼀样。部分按钮会在⿏标悬浮其上且没有点击时改变按钮显⽰形态（如弹出说明框、字体变化、⾼亮）或改变光标显⽰形态（如变成⼿型）。
命令按钮的显⽰形式可以是⽂本、图形或图⽚。⼤致可以分为纯⽂本、纯图标、纯图⽚、⽂本⽅框、⽂本和图标结合。
对命令按钮的操作⼀般只有⿏标单击或键盘敲Enter/Space，有些按钮单击和双击的实现功能不同，⽽有些功能丰富的按钮在⿏标右键点击之后会弹出右键菜单。
点击命令按钮产⽣的响应有弹出新窗⼝、弹出框体、弹出新页⾯、切换或弹出菜单（结合菜单栏）、弹出列表框（结合下拉列表）、刷新、放⼤/缩⼩/收起/关闭窗⼝等等。
以下就命令按钮的显⽰形式进⾏讲解。
2.1.1 纯⽂本按钮
（1）样式：
（2）属性：
⼀般纯⽂本形式的按钮在
光标悬浮其上时，⼀般⽂本的显⽰形态会变化，具体表现为底部出现下划线、字体颜⾊变化、字体⾼亮或出现背景框，还很有可能弹出详细的说明信息框。⽽且光标的形状会变成⼿型。当然⽂本形态也可以不变化。这些表现形式都是为了引导⽤户点击操作。
操作按钮后，按钮的形态不定：可能不变化，可能字体颜⾊改变or⽂字改变以传达按钮已被点击过的意思，也可能按钮置灰⽆法⼆次操作。
（3）功能：
⼤部分纯⽂本按钮都出现在⽹页中，⽤于打开新的页⾯（在新窗⼝或当前窗⼝打开）；在菜单中实现菜单切换或者弹出菜单栏，相当于选项卡，如Word的菜单栏就是点击⽂本进⾏切换的；其它丰富的功能，如点赞按钮、收起展开按钮、收藏按钮、验证码刷新按钮等等。（4）测试点：
1.按钮的⽂本是否正确、简洁、明了，样式是否美观、统⼀
2.光标悬浮在按钮上时，⽂本和⿏标光标是否有需求的形态变化
3.点击按钮是否响应正确的操作，如打开正确页⾯、实现需求功能
4.点击完成后，按钮⽂本的形态是否正确
5.能否实现tab、Enter等快捷键功能
6.快速点击两次，是否⼀次有效；⿏标左键长按后移开是否取消了操作
7.是否有右键菜单，且菜单内的功能是否实现
8.是否能够复制⽂本⽂字（⿏标长按拖到输⼊框或光标选中复制粘贴）
2.1.2 纯图标按钮
（1）样式：
（2）属性：
纯图标按钮的形状本⾝就具有很形象的解释⼒，光标悬浮在按钮上时经常会弹出更详细的说明信息框，
⽤来具体解释此按钮实现的功能。⿏标悬浮时，也会出现图案⾼亮、出现背景框、光标变⼿型等形态变化。
图标按钮经常会有两种状态：可使⽤和置灰状态。置灰状态对点击操作不响应。
某些图标按钮会被分配相应的快捷键。
图标不同于图⽚，⼀般⼤⼩⽐图⽚要⼩。
（3）功能：
点击按钮后可以打开新页⾯新窗⼝，可以弹出菜单栏，也可以实现各种丰富的功能。最经典的图标按钮就是Windows的最⼩化、最⼤化、关闭、前进后退、刷新按钮。图标图案还可能是某⽹站的Logo，点击可进⼊⽹站⾸页。
（4）测试点：
1.按钮图标是否正确对应功能含义、是否风格⼤⼩统⼀、是否清晰美观
2.光标悬浮时，图标和⿏标光标是否有需求的形态变化
3.点击按钮是否响应正确的操作
4.点击完成后，按钮的形态变化是否正确
5.如果是置灰的按钮，是否不能点击操作
6.能否实现tab、Enter等快捷键功能
7.如果分配了快捷键，快捷键操作是否有效
8.快速点击两次，是否⼀次有效；⿏标左键长按后移开是否取消了操作
9.是否有右键菜单，且菜单内的功能是否实现
2.1.3纯图⽚按钮
（1）样式：
（2）属性：
纯图⽚按钮就是⼀张图⽚可以点击产⽣响应，不同于图标按钮，图⽚更有预览意义，图⽚内容不代表功能，同⼀功能可能因为场景、对象不同⽽图⽚内容不同。
对图⽚按钮的操作⼀般就是单击，还可能右键弹出功能菜单。
（3）功能：
图⽚按钮主要有三种功能：带有新页⾯的链接地址，点击能够打开新页⾯；点击能够打开功能窗⼝，如头像设置、封⾯修改窗⼝；点击放⼤查看图⽚。
（4）测试点：
1.按钮图⽚是否正确对应内容、样式是否统⼀美观，图⽚分辨率是否良好
2.光标悬浮时，图⽚和⿏标光标是否有需求的形态变化
3.点击按钮是否打开正确的页⾯、正确的功能窗⼝或者是否正确放⼤
4.快速点击两次，是否⼀次有效；⿏标左键长按后移开是否取消了操作
5.是否有右键菜单，且菜单内的功能是否实现
6.图⽚是否可以复制
2.1.4⽂本⽅框按钮
（1）样式：
（2）属性：
⽂本⽅框按钮是最常见最经典的按钮，⽂字置于⼀个不透明的⽅框中间。⼀般⽅框的形状为长⽅形⽽不是正⽅的。
此类按钮也会有可⽤和置灰状态，也可能有右键菜单、快捷操作，但⼀般不能复制⽂本和图案。如果按钮带有⽹站链接倒可以复制。
按钮的⽅框使其脱离其他控件，在页⾯中很凸显。
（3）功能
此类按钮⼀般很少⽤于链接⽹址，基本⽤于实现具体的功能或打开新的功能窗⼝。
（4）测试点：
1.按钮中的⽂本是否正确，样式是否美观统⼀，是否置于⽅框正中，⽅框的样式是否美观
2.光标悬浮时，按钮和⿏标光标是否有需求的形态变化
3.点击完成后，按钮的形态变化是否正确
4.如果是置灰的按钮，是否不能点击操作
5.能否实现tab、Enter等快捷键功能
6.如果分配了快捷键，快捷键操作是否有效
7.是否有右键菜单，且菜单内的功能是否实现
8.对⾮法的输⼊或操作给出⾜够的提⽰说明，如，空输⼊时点击“上传”按钮要给出提⽰
  9.对可能造成数据⽆法恢复的操作必须给出确认信息，给⽤户放弃选择的机会，⽐如“删除”按钮
2.1.5 ⽂本与图标结合的按钮
（1）样式：
此类按钮类似于纯图标按钮加了⽂字的简略解说，能更好的解释按钮的功能。
其属性功能和测试点也基本差不多，详情参考纯图标按钮。
2.2单选钮
（1）样式：
（2）属性：
我们选中单选钮选项时，圆环中间出现⼀个⼩实⼼圆点表⽰该项被选中。在⼀组单选按钮选项中，只能选中其中⼀项，这和复选框是不同的。⼀组单选钮可以有初始值也可以没有。
（3）功能：
⽤于⽤户只能从选项列表中选择⼀项的情况。
（4）测试点：
1.单选选项是否统⼀按钮居左、⽂字描述居右
2.选择单选按钮保存后，是否正确执⾏功能，或者数据库是否正确存⼊了选项值
3.单选钮是否有初始值、默认选项
4.同⼀组单选钮是否只能选中⼀个（互斥）
5.同⼀组单选钮是否不能同时为空
6.刷新页⾯后，是否仍然选中选项或默认值
7.操作是只点击按钮选中还是可以点击按钮⽂字选中

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。