深度解析 Input 输入框：交互设计、验证规则与常见陷阱 (深度解析infp)

交互设计

Input 输入框是用户与应用程序交互的关键元素，其交互设计对于良好的用户体验至关重要。以下是需要注意的一些方面：

• 清晰的标签：输入框应有一个清晰、简洁的标签，描述其预期输入。
• 适当的占位符：占位符可提供输入提示，但应避免使用过长或包含重要信息的占位符。
• 合理的默认值：当有合理的默认值时，可以预先填充输入框，减少用户的输入量。 <form><label for="username">用户名：</label><input type="text" id="username" required minlength="6" maxlength="20"> </form>

  结论

  Input 输入框是应用程序中至关重要的交互元素。通过遵循良好的交互设计原则、实施适当的验证规则并避免常见陷阱，您可以创建用户友好、高效且安全的输入体验。

到底该不该用 CSS reset

最初出现 CSS reset 的目的是解决浏览器在默认样式上的诸多差异和问题。 而现代浏览器在这方面的差异已经小了很多，所以 CSS reset 的必要性就不那么高了。 另一方面，滥用 CSS reset 导致一些问题：1.不当的破坏了所有浏览器的基本样式。 最典型的混蛋做法就是将所有元素的margin/padding设为0，及去掉ol/ul的列表样式，去掉h1~h6的字体大小样式。 这导致blockquote、ol、ul、hn等语义元素在没有赋以其他合理的样式时（常常如此），缺乏恰当的样式展现。 而因为视觉上无法区分，这进一步导致许多开发人员忽视或误用这些语义元素，并严重破坏团队内其他希望使用语义元素的开发人员的工作流程。 2. 浏览器为配合控件风格，或出于可用性和无障碍性考虑，会有一些特定的默认样式。 如一些浏览器对于 input[type=radio] 默认有 margin，以确保单选框的外观比较协调。 粗暴的reset导致控件外观可能在特定浏览器下失调。 又如大部分交互控件在获得焦点时有虚线outline。 去掉这样式而又不提供其他对于焦点的视觉反馈机制（常常如此）可能导致可用性和无障碍性问题。 3. 某些use case中，网页中有有一些较高独立性的部分，比如内嵌编辑器、widget、第三方内容等，CSS reset导致这部分的样式常需要完全重新覆写，而这种覆写本来可能大部分是不必要的，令人烦躁且可能遗漏。 参考此问答：怎样不让 CSS reset 样式覆盖掉编辑器内的文章样式？4. CSS reset 通常会增加浏览器进行样式计算的成本（即有一定的性能负担），因为它引入了许多的针对元素的全局规则，网页中几乎所有元素都会匹配一条乃至几条的reset规则，且往往规则中的属性设定其实会被更specific的规则所覆盖（比如padding和margin）。 极端情况下，可能某条reset规则中的所有属性设置实际上并没有在任何元素上生效（因为全部被更specific的规则给覆盖了），所有针对此规则的级联计算全都是浪费。 注意一点，导致这些问题共通的本质性因素是：CSS reset 的作用是全局性的（即缺乏选择器限定范围）。 所有合格的程序员都知道避免滥用全局变量，但是在 CSS 上他们就忘记了这一点。 因此，除了上述4点所提到的问题，从可维护性上来看，所有全局变量可能导致的维护性噩梦也会以类似的方式发生在 CSS reset 上。 比如一旦引入了 CSS reset，当项目规模大到一定程度，要再想把 CSS reset 从项目中去掉，就十分困难。 解决方法：1. 不使用 CSS reset，或使用那些谨慎的，只是用来消除浏览器默认样式不一致的真正的 CSS reset（更准确的称谓或许是 CSS normalize，参考此问答 与传统的 CSS Reset 有哪些区别？）。 2. 对于特定的reset需求，只在真正需要的时候，单独设置。 若要提高代码复用程度，可以引入CSS预处理，以mixin来做。 例子：@mixin reset-box() {list-style: nonepadding: 0margin: 0}@mixin reset-font() {font-size: 1emfont-weight: normalfont-style: normal}//真正用的场景html#示例网站 {nav#全站导航条 ul {border: 1px solid+reset-box()}section.侧栏模块 {border: 1px solidh1 {background: navycolor: whiteborder-bottom: 1px solid+reset-box()+reset-font()}}}（以上以伪代码书写，请自行脑补转换为 SASS/Stylus/LESS 等。 ）3. 对于已经使用 CSS reset 的同学，可以籍由支持局部 import 的 CSS 预处理器（比如 stylus）的帮助，从限定其在特定 selector 之下开始，逐步控制其影响范围。 如：html#示例网站 {... // 不依赖 CSS reset 的部分-part { // 页面中仍依赖 CSS reset 的部分@import }}最后顺带说下，CSS 3 已加入 unset 关键字和 all 快捷属性（目前仅 Firefox 支持），可以更好的支持必要的 reset 需求。 以上。 补充：有些同学认为“没有那种很傻叉的重置的话，我觉得都算不上是滥用”。 问题在于，怎么样算是“傻叉重置”？团队里的每个人对此认识一致吗？将来新人进入老人离开，还能保持对此认识一致吗？除了非常明确的使用 之类的既定方案的情况，许多团队常见自行 customize 一个 或混合了 reset 的 。 这种情况下，随着时间流逝最可能出现的情形就是此 css 会逐渐混入了更多的全局性的样式（因为合格的程序员都有增强复用性的冲动），从而陷入之前说的那些问题。 因此，未雨绸缪的做法，就是一开始就避免使用 CSS reset，或严格明确和限定其作用（如 normalize 的方式）。

vb中inputbox使用

用户交互函数：VB提供InputBox（）和MsgBox（）函数用于人机交互①InputBox（）其语法格式为： InputBox（ 提示[，标题][，默认值][，X坐标][，Y坐标]） 例如：r=InputBox(请输入r，输入圆半径)②MsgBox（）其语法格式为： MsgBox（提示信息[，按钮][，标题]）VB程序设计中常用的交互函数，其功能非常强大，可以显示多种样式的消息对话框。 该函数的返回结果为一数值，其中，“按钮”参数一般用VB的内部符，这些符号常量有等等，他们一般可以望文生义。

什么是前端开发的后台交互？

主要就是js对数据的操作和对dom的操作。 前端的工作就是切图，展示数据到网页中。 那么怎么获取数据呢？以什么格式获取数据呢？都是需要和后台交互的。 后台语言都是不一样的：php，jsp等等，我们前端js的工作就是把他们的数据拿过来显示。 给你举个梨子吧，我们公司后台抛数据一般就smarty（php）的框架或者是ajax来传。 如果是smarty的话，前端直接负责把smarty填写到html网页中。 如果是ajax的话，前端负责用js操作数据并展示，下面是一个我们前后端规定的数据格式：1 {flag:001,content:{}} 上面是应该json数据，有项目的时候，我们前后端会大概说一下接口地址，前端请求的参数，后端返回的参数，然后大家就开始写，写的差不多的时候，大家调一下数据，没问题就可以了。 现在主流的前后端交互是用ajax吧，主流的框架用jquery，给你一个jquery请求ajax的例子 $({url:/path/to/file,//请求地址type:GET,dataType:json,data:{param1:value1},//参数success:function(obj){//返回的内容//遍历obj//前端在这里操作返回的数据，并展示}}) 前后端交互没那么难，前端最关键核心的东西是core js。 dom操作都是可以找api，然后对着文档来做，想提高前端就提高自己的core js。 这样的话才能提高核心竞争力。 以后我们多多交流，有帮助就采纳！！！

若对本页面资源感兴趣，请点击下方或右方图片，注册登录后

搜索本页相关的【资源名】【软件名】【功能词】或有关的关键词，即可找到您想要的资源

如有其他疑问，请咨询右下角【在线客服】，谢谢支持！