jsp input输入实时校验长度并提示_输入框设计，设计样式及设计要点

最新推荐文章于 2022-03-29 20:57:10 发布
最新推荐文章于 2022-03-29 20:57:10 发布
阅读量1k 收藏
点赞数
文章标签： jsp input输入实时校验长度并提示 如何让两个输入框保持长度一直 校验输入框的内容不能重复 输入框输入内容匹配 输入框输入负数不能先打减号
本文探讨了输入框的设计要点，包括样式、文本、文本框和图标的设计，强调了字符限制和输入反馈的规则逻辑。输入框样式涉及水平、垂直排列、标题内嵌和帮助提示，图标分为装饰性、功能性、反馈性。输入反馈涵盖输入前提示、输入中校验和输入后反馈，确保内容的正确性和用户体验。
摘要由CSDN通过智能技术生成

今天这篇文章想跟大家聊一聊输入框的一些设计心得。这个看似简单的输入框也有一些门道在里面，值得我们探讨学习。下面从以下两大块来跟大家一起分析。

1.输入框的样式

2.输入框的设计要点

输入框的样式

要了解输入框的样式，首先要知道输入框的组成部分，这里我们将输入框分为三部分：

  • 文本：包含标题，占位符，帮助提示，反馈等；
  • 文本框
  • 图标：装饰性图标，功能性图标，反馈性图标。

1、文本框与标题文字的组合样式

  • 水平排列：左对齐/右对齐
  • 垂直排列
  • 标题内嵌：作为占位符
  • 添加帮助提示

排版上需要注意多列内容如何展示才能在界面中显得更加和谐。

1、水平排列：左对齐/右对齐

适用于展示页面内容较多的情况

0ccf5078a037a5d47512625af22315c8.png

上面两类，右边采取了右对齐，标题与外框的距离显得参差不齐。且用户在阅读的过程中，会显得比较费力。

2、垂直排列

适用于展示页面内容较少的情况

最低0.47元/天 解锁文章
weixin_39999116
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
textarea输入框监听和输入字数限制以及样式设置
qq_45271323的博客
08-23 992
html <p class="describe">分类描述</p> <div class="desc"> <textarea class="wishContent" placeholder="请输入分类描述，最多255字。" maxlength="255" ></textarea> <div class="wordsNum"> <span class=".
校验文本框输入字长度
mr.zhao的博客
09-19 5297
要求： 1、验证文本框里的文字长度不要低于6个字节，不要超过10个字节。否则出现弹框做相应提示（中文算两个字节） 正则表达式做： [python] view plain copy   "font-size:14px;">var bytesLen = 文本内容.replace(/[^\x00-\xff]/g, 'xx').length; 
JSP_输入框字符校验
书之岁华
02-20 665
&lt;input onKeyUp="verify(this)" class="form-control" type="text"&gt; function verify(t){ var num = t.value; var re=/[=\\| ·！￥……（）——【】、；’‘：“”《》，。？`~!@#$%^&amp;*()+&lt;&gt;?"{}\/;'[\]]/i
QTextEdit 外观属性设置
Seanyxie Blog
08-17 6793
一、给QTextEdit添加背景图片，有下面两种方法：QTextEdit* iEdit  = new QTextEdit();1：使用样式表：     iEdit->setStyleSheet("background-image:url(:/bmp/DSCN1604.JPG)");    注意：在url()括号中首先开始的 “：”冒号一定不能搞错，否则就显示不出来。2：使用html    iEdit->setHtml("");    注意：此时就不需要像上边那样用“：”冒号了，直接用相对路径就可以了。(No
QTextEdit限制文本长度
翟冬狼_Trump
11-12 7411
QString textContent = this->toPlainText();     int length = textContent.count();     int maxLength = maxLen; // 最大字符数     if(length > maxLength)     {         int position = this->textCursor().po
JSP页面input框的提示信息动态展示小结
weixin_44485586的博客
05-12 3675
JSP页面input框的提示信息小结 需求如下: 在输入表格内容时，输入框内默认展示提示信息 当鼠标点击输入框时，提示信息消失, 输入框失焦后：若用户未输入，则展示提示信息；若用户已输入，则展示已输入的内容 保存后重新进入页面进行编辑时，输入框要默认显示用户输入的内容，若内容被清空再次失去焦点时，输入框继续展示提示信息 网络上常出现的参考代码如下 <input type="text" value="提示内容。。。" onFocus="if(value==default.
[其他类别]网页中文本框自校验的标签_input.zip
最新发布
03-26
在网页设计和开发中，用户输入验证是一项至关重要的任务，它确保了用户提交的数据符合预设的格式和规则，从而防止错误数据的入库，提高系统的安全性。在这个话题中，我们将聚焦于HTML中的`<input>`标签，它是网页...
js完美解决jsp文本框限制只能输入数字、小数问题
11-27
### js完美解决JSP文本框限制只能输入数字、小数问题 在Web开发过程中，确保用户输入的数据符合预期格式是一项非常重要的任务。特别是在涉及到数值输入时，开发者常常需要限制文本框仅能接受数字或者带有一定数量...
其他类别网页中文本框自校验的标签-input-project
06-15
在网页设计中，文本框（Input）是用户与页面交互的重要元素，用于收集用户的输入信息。自校验功能则是为了确保用户输入的数据符合预设的规则，提高数据的准确性和安全性。在这个“其他类别网页中文本框自校验的标签_...
JSP中使用JavaScript动态插入删除输入框实现代码
10-25
在Web开发中，表单经常用于收集用户输入的数据。然而，当需要收集多个相似项的数据时，固定数量的输入框可能不够灵活。为了应对这种情况，我们可以利用JavaScript来动态地在页面上增加或删除输入框，从而提高用户...
jsp文本框小技巧、特效
07-07
jsp文本框的一些小技巧，帮助你的文本框变靓。
判断两次密码输入是否相同的校验器
04-08
如果不一致，则留在 `check.jsp` 页面并提示错误信息。 #### 五、扩展与优化 1. **增强安全性**：可以通过增加密码强度验证等来提高安全性。 2. **用户体验优化**：提供更友好的错误提示信息，如实时密码验证反馈等...
jsp input输入实时校验长度并提示_拆解「输入框」，理解输入反馈的规则逻辑
weixin_39603908的博客
12-01 626
对于「输入框」的解析，市面上有非常多的文章都讲得很不错。但是为什么它总是被拿出来说，却又总是说不完呢？主要是因为它所承载的内容正好反映了交互设计的各种知识。比如如何输入，输入前要注意什么，输入的过程中要如何校验，输入完成会有哪些反馈。这一串内容其实就包含设计师设计一个功能时，所需要注意的所有信息了。类比用户使用功能前，如何清楚地知道这个功能的使用方式；使用过程中，明确地了解自己的行为正确与否；使用...
jsp 页面中的提示
学习记录·好记性不如破键盘版——点滴、积累、进步
06-25 147
显示后台的信息（如果有的话） &lt;c:if test="${!empty message}"&gt;     &lt;div id="msgDiv" class="msg_w" align="center"&gt;         &lt;font color="red"&gt;&lt;c:out value="${message}&
JSP页面，input输入框必填问题
热门推荐
WEISHENGHUAN的博客
01-08 1万+
JSP页面，input输入框必填使用required没反应。 之前搜索到的都是H5页面的，说是直接加required=“required”，但是经本人测试，发现没反应，于是改用required=“true”，还是不行，于是看了看自己的输入框，有默认输入的值。 ** 总结： **在JSP页面，想让input为必填项，需要添加required="true"且输入框不能有默认值。 代码： ...
jsp输入框里面提示_iOS最火充电提示音，安卓也能拥有
weixin_36155754的博客
12-01 123
最近很多小伙伴肯定也看到了很多关于 iOS 14 的充电提示音刷屏！无论是公众号还是抖音，应该都有。但安卓的小伙伴，如果想要此功能，也非常简单。iOSiOS 的话，就非常简单啦！还是依靠我们熟悉的万能 “ 快捷指令 ” ！外面教程很多，但是没学会的小伙伴，可以复习一下。首先，必须要下载缓存一些 “ 充电提示 ” 的音频资源，这里小狐以抖音为例：保存在相册后，就可以开始开动啦！打开 “ 快捷指令 ”...
Qt 5 多窗口传值问题
qq_30340349的博客
04-17 536
Qt 5 多窗口传值问题 需求： 在主窗体下点击按钮弹出信息收集框，然后获取Dialog中的值。 实现方式： 自定义信号和槽、 函数指针 在 Dialog.h 方面 //自定义信号用于向主窗体发送信号 signals: void sendMessage(QString)； 在Dialog.cpp中 QString a = "HelloWorld"; emit sendMessage(a); ...
JSP密码输入提示
weixin_44302503的博客
03-29 1703
密码输入提示 密码为6~16位时显示正确，不在此范围内时显示错误，代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, init
验证input输入值，并给出提示信息
zhongdesheng的专栏
08-05 1202
  &lt;input type="text" name="requestedCorrectionHours" id="correctionInput" value="${wbViewBean.requestedCorrectionHours}" onblur="leaveToHandler('correctionInput');"&gt; var ERROR_MES
使用JSP设计一个web应用程序，能够实现输入矩形的2个边后，计算矩形的周长和面积。并给出具体代码
09-20
好的，以下是一个使用JSP实现计算周长和面积的示例程序： 首先，创建一个JSP页面，例如“shape.jsp”，并添加以下代码： ```jsp <html> <head> <title>计算图形的周长和面积</title> </head> <body> <h1>计算图形的周长和面积</h1> <form method="post" action="shape.jsp"> <p> 请选择图形类型： <select name="type"> <option value="1">正方形</option> <option value="2">圆形</option> </select> </p> <p> 请输入图形的参数： <input type="text" name="param1"> <input type="text" name="param2"> </p> <input type="submit" value="计算"> </form> <%-- 获取用户输入的参数，并根据图形类型计算周长和面积 --%> <%-- 正方形的周长和面积公式：C=4a，S=a^2 --%> <%-- 圆形的周长和面积公式：C=2πr，S=πr^2 --%> <% String type = request.getParameter("type"); String param1 = request.getParameter("param1"); String param2 = request.getParameter("param2"); double perimeter = 0; double area = 0; if (type.equals("1")) { double a = Double.parseDouble(param1); perimeter = 4 * a; area = a * a; } else if (type.equals("2")) { double r = Double.parseDouble(param1); perimeter = 2 * Math.PI * r; area = Math.PI * r * r; } %> <%-- 输出计算结果 --%> <% if (perimeter != 0 && area != 0) { %> <h2>计算结果：</h2> <p>周长：<%= perimeter %></p> <p>面积：<%= area %></p> <% } %> </body> </html> ``` 在该示例程序中，我们创建了一个表单，用户可以选择图形类型，并输入相应的参数。在表单提交后，我们使用JSP脚本来获取用户输入的参数，并根据图形类型计算周长和面积。最后，我们使用JSP脚本来输出计算结果。 注意，这个示例程序只是一个简单的演示，实际应用中需要进行输入校验和异常处理。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值