关于HTML的表单标签

html表单标签

from表单标签里面就是所有用户填写的表单数据;
action:"xxx.py" 把表单数据提交给了哪一个后台程序去处理
method="post"传递数据时用的是什么方法,post表示隐式提交数据,get表示明文传输数据

用户名:
中文的冒号 为了防止代码错误 
				input+tab键来生成代码
				type= "text"普通的输入框 
				type= "psaaword"密码框

type = "radio" 单选框
checked = "checked" 此属性可以表达默认选中状态
测试细节:
1、点击查看是否为单选

2、刷新的时候看是否有默认选中效果

3、点击文字看是否可以切换(提升用户体验好感度)


type = "checkbox" 表示多选框、复选框
checked = "checked" 表示默认选中
测试细节:
1、刷新的时候是否有默认选中的状态
2、点击文字的时候是否可以实现切换

ps:一切测试要追溯到用户的需求!!!


下拉菜单

select嵌套若干option标签,每组option标签就表示一个下拉菜单的选项
selected = "selected" 表示的是下拉菜单的默认选中,注意与文本选择框的默认选中区分开来
测试细节:
1、内容的顺序是否正确
2、默认选中的状态是否正确
3、内容的条数是否跟要求的一致


文本域:

测试细节:
1、测试三大主流浏览器外观大小是否一致
2、提醒程序员禁用拖拽大小的功能


按钮功能:

测试细节:
type="botton",需要配合js才能实现其他效果
value属性设置按钮身上的文字
type="reset",点击后可以使表单恢复默认值
value属性设置按钮身上的文字
type="submit",点击后可以把表单数据提交给指定后台进行处理
value属性设置按钮身上的文字
注意:点击后是否报错都与我们无关,最终测试的时候,我们只需要关注数据库中的内容是否正常添加即可


表单用户体验提升的细节

1:可以添加placeholder属性,可以给文本框设置提示文字

例如:placeholder="请输入用户名"

2:如果是专门写表单的页面,可以给第一个输入框设置一个默认获取鼠标焦点的属性

例如:autofocus="autotocus"
注意:tab可以让光标前进,shift + tab可以让光标后退

posted @ 2024-08-28 22:37  代码是一种旋律  阅读(39)  评论(0)    收藏  举报