文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

【HTML5】HTML5 新增 input 表单属性 ( required 属性 | placeholder 属性 | autofocus 属性 | autocomplete 属性 )

, 可以 选择多个文件提交 ; autofocus 属性 : 属性值为 autofocus , 设置了该属性 , 可以自动进行聚焦 , 页面加载完毕后 , 自动聚焦到设置了该属性的表单 ; autocomplete...input type="submit" value="提交"> 显示效果 : 如果提交空的内容 , 会在对话框中报出如下错误 , 提升 " 请填写此字段..., 就有占位符 , 还可以当广告卖 ; 代码示例 : 显示效果 : 3、autofocus 属性 autofocus 属性 : 属性值为 autofocus , 设置了该属性 , 可以自动进行聚焦..., 页面加载完毕后 , 自动聚焦到设置了该属性的表单 ; 如 : 百度搜索引擎 , 网页加载好 , 搜索表单, 直接自动获取焦点 ; 代码示例 : <!

2.9K30

Material Design — 提示框（ Dialogs）

提示框始终保持视觉聚焦，直到被关闭或被完成了其中需要的行动。 全屏提示框（仅限手机） 全屏对话框最适合于复杂的任务，或需要输入法编辑器，因为它可以在保存之前将一系列任务组合在一起。...全屏对话框可实现复杂的布局，将多个材料堆积的情况简化（提示框上层的提示框），并暂时将app可感知的海拔重置为更高。 全屏对话框允许任务在复杂操作时开启简单菜单或简单提示框。...全屏提示框可用于满足以下标准的内容或任务： ·该提示框包含需要输入编辑器（IME）的组件（如选择器或form fields），例如键盘 ·当没有实时保存更改时 ·当app中没有草稿功能时（无法自动存到草稿...确认按钮将被禁用，直到满足对话框中的所有必填字段都完成时，确认操作才会被激活 丢弃（离开） 丢弃操作（屏幕左上角的“X”）和后退按钮均会关闭全屏对话框并放弃之前所做的更改。...如果全屏对话框使用长度可变的标题或预期到可能会有长标题（例如，因为某些单词在不同的语言中较长），请将标题文本置于对话框的内容区域而不是最上面的导航栏。 ? 不该在导航栏中使用长标题

5.1K101
您找到你想要的搜索结果了吗？
是的
没有找到

Human Interface Guidelines — Data Entry

当一个 app 在做任何有用的事情之前通过要求输入大量信息来减缓整个进程时，人们可能会很快失去信心，甚至可能完全放弃这个 app。 ? ·如果可能，请提供选择 尽可能高效地输入数据。...·尽可能从系统获取信息 不要强迫人们提供可以自动收集或经用户​​许可收集的信息，例如联系人或日历信息。 ·提供合理的默认值 尽可能使用最可能的值预填字段。...·只有在收集所需的值后才能开启下个步骤 在启用“下一个”或“继续”按钮之前，请确保所有必填字段都有值。使用该按钮的是否启用作为视觉提示告知用户可以继续下个步骤了。...·仅在必要时才需要字段值 仅对必需的信息使用必填字段才能继续。 ·通过 value lists 简化导航 在 tables 和 pickers 中，选择一个值要是容易的。...·在文本字段中显示提示以帮助交流目的 当文本字段中没有其他文本时，文本字段可以包含占位符文本（如“电子邮件”或“密码”）。占位符文本能表达好意思时，请勿使用单独的标签来描述文本字段。

65230

分享15个有用的，你可能还不知道的CSS小技巧，建议每个前端开发者都了解下

在我个人的看法中，CSS（尤其是与JS结合用于响应性）可能是网页开发中最重要的部分。一旦我们达到了一定的性能门槛，普通用户对你的网站更感兴趣的是其美观度，而不是相对加载时间的比较。...需要注意的是，选择器会匹配页面上的每个元素，包括嵌套的元素。因此，在使用选择器时，你需要小心确保样式不会无意间影响到你不想改变的元素。...当子元素获得焦点时，父元素将被匹配并应用相应的样式。这对于创建交互式表单或其他需要根据子元素聚焦状态进行样式调整的情况非常有用。...当用户点击包含片段标识符的链接时，浏览器会自动滚动到对应的元素，并应用:target伪类所定义的样式。这使得你可以在页面上创建滚动到特定部分的效果，或者突出显示被定位的元素。...例如，你可以改变输入框的边框颜色或标签的样式，以突出显示必填字段或区分可选字段。这样的样式设置有助于向用户传达表单字段的重要性和要求。

17240

表单脚本

（3）表单字段事件 blur：当前字段失去焦点触发 change：对于和元素，在它们失去焦点且value值改变时触发；对于元素，在其选项改变时触发...focus：当前字段获取焦点时触发 表单错误提示流程：利用focus事件修改文本框的背景颜色，以便清楚表明这个字段获取了焦点；利用blur事件恢复文本框的背景颜色；利用change事件在用户输入了非规定字符时提示错误...textbox.focus(); } 部分选择文本的技术在实现高级文本输入框时很有用，例如提供自动完成建议的文本框就可以使用这种技术。...过滤输入 （1）屏蔽字符 当需要用于输入的文本中不能包含某些字符时，例如手机号，只能输入字符！...自动切换焦点 用户填写完当前字段时，自动将焦点切换到下一个字段。

4.8K41

【分享】在集简云上架应用使用OAuth2.0授权如何配置？

OAuth2.0授权配置需要以下几个步骤：设置填写授权字段 （非必填，仅在OAuth2.0登录授权前需要额外参数时添加）复制回调地址：将自动生成的集简云授权回调地址添加到我们的应用中设置授权参数：一般为...Key，本示例中为 client_id是否必填：如果用户必须填写此字段，则勾选此选项字段类型：目前在授权环节支持的字段类型有三种：文本，密码（前端以密码形式展现），和 下拉。...如果是下拉类型，则需要在页面最后的选项中配置选项的字段key与字段值。本示例中为文本字段说明：用于在前端展现给用户，一般用于说明此字段在哪里获取，或者填写时应该注意什么。...下拉选项：仅字段类型为”下拉”类型时需要设置保存后，返回授权设置页面我们可以看到刚才配置的字段已经展现在授权字段设置中：2 复制回调地址Oauth2.0一般需要一个授权回调地址，这里集简云会为每个Oauth2.0...同时我们勾选了自动刷新Token，这样如果token过期报401错误时，集简云将自动执行token刷新接口，如果我们不设置自动刷新，那么则授权过期后需要用户在前端手动重新更新账户时刷新token。

90210

2019年最全的UI设计之输入字段剖析

容器字段 容器的大小应与用户预期输入成正比 在单行字段中，当光标到达右侧字段边缘时，比输入行长的文本会自动向左滚动。用户眼睛隐藏的文本越多，他们验证输入的难度就越大。...此输入字段要求输入用户ID 3. 标签文本 标签文本用于通知用户文本字段请求的信息。每个文本字段都应该有一个标签。 清晰标签 标签的最终目的是帮助用户一目了然地了解所需的信息。...右：占位符中提供了正确的格式 在某些情况下，最好使用自动格式化 - 该字段会自动调整用户提供的信息（根据格式）。它使得在表单中验证信息变得更加容易。 ?...聚焦状态 你需要使用视觉效果突出显示活动字段。 当字段处于活动状态时，始终显示光标。光标应指示当前用户在该字段中的位置。它可以防止用户进行不必要的操作。 ?...提供前缀/后缀 当字段具有某种度量时，前缀和后缀很有效。例如，金额的输入字段（前缀或后缀可以表示货币）或权重（后缀可以表示质量单位）。 ?

2.4K20

【第3版emWin教程】第53章 emWin6.x的按钮Button控件

本教程配套的emWin版本是6.x，从emWin5.28版本开始，皮肤色是自动使能的，所以部分按钮控件的API函数是失效的，主要是按钮控件的颜色设置函数。...53.2.2 按钮控件支持的键盘反应（输入聚焦） 按钮控件支持输入聚焦，也支持外置键盘或者类似外置键盘的输入设备给按钮控件发消息。...当前仅支持以下两种按键消息： （输入聚焦是一个重要的知识点，使用外置键盘或者类似外置键盘的输入设备要用到） 特别注意一点，对于按钮控件来说，要先聚焦到这个控件上了，给按钮控件发送按键消息才会有反应。...下面设置对话框标题的字体，对齐方式，和显示的文本。首先，在建立的对话框上面右击鼠标，选择Set font。 弹出如下界面，并选择字体GUI_FONT_32B_ASCII，点击OK。...通过函数BUTTON_SetText设置按钮控件上显示的文本。

62330

【第3版emWin教程】第52章 emWin6.x的FrameWin框架窗口控件

处理回调函数时意识到此点非常重要：主窗口和客户端窗口都有自己的回调函数，在框架窗口上面创建子窗口或者控件时，这些子窗口或者控件通常作为客户端窗口的子窗口或者子控件而创建，也就是说它们的父窗口是客户端窗口...更多对话框上面创建框架窗口的注意事项在第48章48.5小节详细进行了讲解，这里不再赘述。 52.2.2 键盘反应（输入聚焦） 框架窗口控件不支持输入聚焦，这点要特别注意。...下面设置对话框标题的字体，对齐方式，和显示的文本。首先，在建立的对话框上面右击鼠标，选择Set font。 弹出如下界面，并选择字体GUI_FONT_32B_ASCII，点击OK。...，调整方法如下：先左击选中相应控件，会出现绿色的边框，在边框的地方拖动鼠标即可修改大小 52.3.3 第三步：在对话框上面建立滚动条控件 仅显示一个框架窗口控件的话，内容太少了，我们在上面再添加一个滚动条控件...同时，大家也特别注意框架窗口回调函数_cbFrame的处理，这个回调函数才是框架窗口的回调函数，而不是客户端窗口的回调函数，而且框架窗口标题栏上面的最大化，最小化和关闭按钮是框架窗口的子控件，而不是客户端窗口的子控件

62110

最完整的VBA字符串知识介绍（续：消息框和输入框）

消息框的按钮 Buttons参数指定应在消息框上显示的按钮。有不同种类的按钮可用，每个按钮使用一个常量整数，如下所示： 图8 调用MsgBox函数并指定按钮时，可以使用上述常量数值之一。...返回的值可以是以下值之一： 图16 输入框 Visual Basic语言提供了一个函数，允许向用户请求信息，用户可以在对话框的文本字段中键入信息。...图17 在阅读输入框上的消息时，要求用户输入一条信息。用户应该提供的信息类型取决于程序员。因此，有两件事应该一直做。首先，应该让用户知道所请求的信息类型，它是一个数字（什么类型的数字）？...图19 注意，当输入框显示默认值时，该值位于文本框中，并且该值已被选中。因此，如果该值没有问题，用户可以接受它并单击“确定”。...第五个参数指定从输入框上边框到显示器上边框的距离。 输入框的返回值 当输入框显示时，输入值后，用户将单击其中一个按钮：确定或取消。

1.9K20

HTML表单和组件

文本组件： search搜索框，示例： ? 运行结果： ? text文本框，示例： ? 运行结果： ? email自动验证email文本框，示例： ? 运行结果： ?...hidden 隐藏域，隐藏域在网页上是看不到的，只有在代码里看得到，示例： ? 运行结果： ? 以上就是type属性里常用的组件 name属性，当数据提交到服务器时会读取这个属性里的数据。...这个属性还有一个作用，在使用单选框要实现单选时也需要使用这个属性，如果没有加上这个属性的话，就无法实现单选，示例： ? 运行结果： ?...require属性，表示必填项，这个属性的关键字也只有一个，所以不写值也可以，如果这个加上这个属性的组件没有填写信息的话，表单就不会进行提交，示例： ? 运行结果： ?...不常用属性： checked，这个属性在单选框或者复选框上使用，哪个单选框或者复选框上声明了这个属性，那么就会默认选择声明了此属性的组件，示例： ? 运行结果： ?

2.7K60

重新思考数据输入

可以看到大部分产品在需要用户数据输入的时候，在提交之前都会做各种验证以及相应的提示，较好的产品还会做出很人性化的提示，告诉自己哪些字段是否必填，以及验证规则是什么。...技术转换 在某些情况下，同等效力的输入数据应该是被支持的，虽然这些数据不是直接符合要求的，但可以经过一些技术手段进行自动的转换，最终实现我们的目的。...常见的技术场景比如：保留两位小数，自动转换金额类型，数据格式（文本与数据转换），非标准排版与标准排版，去空格等等 校验前置 && 动态校验 && 操作不可用 校验前置 && 操作不可用 一般情况下，这两个是同时设置的...，也就是在校验时动态校验，当其符合基本的操作要求的时候，才会让操作按钮变为可用操作，否则为禁用或者错误不可操作状态，这也叫校验前置，对于每个必传的字段必须有明确的标识来说明必填性以及其正确的规则或者示范性的数据输入...动态校验 && 操作不可用 动态校验是指针对输入数据的动态监听，当其符合规则时，放开其一个逻辑的验证，如果所有的条件都符合了，把操作重置为可用 ；否则变为不可用 ； 另一条自然是动态校验的触发规则：常见的有

65220

为啥你的UI界面感觉乱？这7个常见问题一定要避免

所以，尽量选择跟主题相关的配图，而不是在图库中的跟主题毫无关联的图片。只有在这种情况下，你才能真实了解最终的成品是什么样子的。 ?...a.表单合法性检查 在设计错误状态时，请尽量避免惹恼用户。特别要注意所有可能的形式检查。 ‍ 例如，假设您有一个包含必填字段的表单。这意味着开发人员会进行相应的检查，“所有必填字段都不能为空。”...当第一个必填字段失去焦点状态时，它将返回错误：“请填写此字段。这是必需的！” ‍ 我们可怜的用户大声说：“等等，我只是在表单字段之间单击，甚至没有单击'提交'！” 而且情况甚至可能变得更糟。...例如，假设您有另一个检查，“提交”按钮将被禁用，直到所有必填字段不再为空。 ‍ 请考虑一秒钟。您的可怜用户没有做任何事情，也无法提交表格，但是您已经将他的几个错误归咎于他了。...在这种情况下，您可以将副本放置在照片或图像的深色部分的顶部。 06. 图标观感不佳 当您需要通过小符号表达含义或简要说明说明时，图标非常有用。它们还是现代界面的基本组成部分，尤其是在移动设备上。

1.2K40

【第3版emWin教程】第51章 emWin6.x的Window窗口控件

窗口控件的所有API函数在emWin手册中都有讲解，下图是中文版手册里面API函数位置： 下图是英文版手册里面API函数的位置： 51.2 窗口控件基础知识 窗口控件与前面讲解窗口管理器时介绍的窗口基本是没有区别的...51.2.1 键盘反应（输入聚焦） 窗口控件不支持输入聚焦，这点要特别注意。不支持输入聚焦的话，外置键盘或者类似外置键盘的输入设备给窗口控件发消息是没有任何反应的。...51.3.2 第二步：在对话框上面建立文本控件 仅显示一个窗口控件的话，内容太少了，我们在上面添加一个文本控件。文本控件的的建立方法和上面窗口控件的建立方法是一样的。...alignment，并选择居中 最后还是右击鼠标，选择Set text，并更改Content为armfly，修改的地方在左下角： 设置好以后，文本控件就算建立完毕。...51.3.3 第三步：在对话框上面建立按钮控件 为了使窗口控件内容不至于太少，我们在上面再添加一个按钮控件。文本控件的的建立方法和上面窗口控件的建立方法是一样的。

80020

【译】W3C WAI-ARIA最佳实践 -- 布局

当呈现的内容是表格时，从 grid 和 table 中选择实现模式时，考虑以下因素。 grid 是一个复合小部件，所以它： 始终包含多个可聚焦元素。 在页面Tab序列中只有一个可聚焦元素。...在应用阅读模式时，屏幕阅读器用户只能发现可聚焦的元素和标记可聚焦元素的内容。因此，屏幕阅读器用户可能会在不知情的情况下忽略网格中包含的元素，当它们不可聚焦或不用于标记列或行。...如果网格包含用于选择行的复选框的列，当焦点不在复选框上时，可作为选中复选框的快捷键。 Control + A: 选择所有单元格。 Shift + Right Arrow: 向右扩展选择一个单元格。...如果存在某些行或列在DOM中被隐藏或不存在的情况，例如当滚动时自动加载数据，或者网格提供了隐藏行或列的功能，使用以下属性，如grid and table properties 所述。...当且仅当组合中包含三个或三个以上的控件时，才能使用工具栏作为分组元素。 键盘交互 当工具栏获取焦点时，焦点被设置在第一个可用控件上。

6.1K50

【Java 进阶篇】创建 HTML 注册页面

每个输入字段都有相应的标签，提高了表单的可读性和可访问性。 表单属性 在创建表单时，我们使用了一些重要的属性来定义表单的行为和外观： action：指定表单数据提交到的服务器端脚本的URL。...required：这个属性用于标记字段为必填字段，如果用户未填写将无法提交表单。 处理表单提交 在实际应用中，当用户填写并提交表单时，通常需要使用服务器端脚本来处理表单数据。...当表单提交后，服务器会处理用户的请求，执行相应的操作，并返回结果给用户。 表单验证 在处理用户提交的数据时，表单验证是至关重要的。它确保输入的数据符合期望的格式和要求，防止恶意数据或错误数据被提交。...以下是一些常见的表单验证技巧： 必填字段验证：标记字段为必填字段，如果用户未填写，应给予提示。 数据类型验证：验证输入的数据类型是否正确，例如电子邮件地址是否具有有效的格式。...验证码：为了防止自动化提交，可以添加验证码验证。 成功页面或错误处理 当用户成功提交表单时，通常会显示一个成功页面或提供成功的反馈信息。

35820

JavaSwing_8.1:焦点事件及其监听器 - FocusEvent、FocusListener

每个此类侦听器对象获取此FocusEvent当事件发生时。 有两个焦点事件级别：持久性和暂时性的。...在这种情况下，原来的聚焦状态将被自动一旦操作完成恢复，或者，对于窗口失活的情况下，当窗口被重新激活。...注册在每个组件上的焦点侦听器报告每个焦点获得和焦点丢失的事件。对于每个事件，将报告焦点更改中涉及的其他组件，即相反的组件。...例如，当焦点从按钮转到文本字段时，按钮会触发焦点丢失事件（文本字段为相反的组件），然后文本字段会触发焦点获取事件（带有按钮作为相反的组件）。失去焦点以及获得焦点的事件可能是暂时的。...焦点丢失事件由文本字段触发，焦点获得事件由组合框触发。现在，组合框显示它具有焦点，也许在文本周围有一条虚线-确切地表示方式取决于外观。

4.6K10
点击加载更多

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

更多标签

活动推荐

    运营活动

    活动名称
    广告关闭

    腾讯云开发者

    扫码关注腾讯云开发者

    扫码关注腾讯云开发者

    领取腾讯云代金券

    热门产品

    热门推荐

    更多推荐

    Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

    深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

    腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

    领券