如何在gmail登录页面中设置文本框格式的文本框格式 [英] How to format text box like text box in gmail login page

问题描述

亲爱的所有人，



我正在创建一个登录页面，我需要在登录页面中拥有像gmail文本框这样的功能。当用户输入电子邮件ID时，它会将文本框的边框颜色更改为蓝色，当它转到另一个文本框输入密码时，它会进入之前的格式，如果验证失败，则必须更改其边框颜色红色的。请帮助并向我推荐一些好的资源来培养我的技能。



谢谢...

Dear All,

I am creating a login page and I need to have functionality like gmail text box in login page. When a user goes to enter email id it changes border color of text box in blue and when it goes to another text box to enter password, it comes in its previous formatting, and at the end if validation fails, it must change its border color in red. Please help and refer me good source to develop my skills to do this.

Thanks…

推荐答案

这很容易用CSS和JavaScript。入门时的颜色取决于Entry的含义。它可能只是将鼠标悬停在元素上。然后你可以使用CSS ：hover 伪类：

This is easy to do with CSS and JavaScript. Color on entry depends on what do you mean by "Entry". It could be just hovering mouse over the element. Then you can use CSS :hover pseudo-class:

.myClass { border: solid thin gray; }
.myClass:hover { border: solid thin blue; }

请参阅：

：hover - CSS | MDN [ ^ ]，

Pseudo-classes - CSS | MDN [ ^ ]。



但是在元素的状态与激活它（聚焦和失去焦点）有关，那么你可以使用：有效：

：active - CSS | MDN [ ^ ]。



关于验证，它取决于它是什么。它可以在客户端或服务器端完成。在客户端，您只需根据结果验证和更改边框，例如在JavaScript中

Ajax（编程） - 维基百科，免费的百科全书[ ^ ]。

然后，你必须反映使用验证的结果JavaScript，几乎以同样的方式。



但是，有可能的是，一旦你需要使用JavaScript进行验证，你可能想要操纵你的边框改变了也响应JavaScript中HTML元素状态的变化。为此，您需要处理焦点，模糊或 focusin <等事件/ code>和 focusout ，或 mouseenter 和 mouseleave ，或 mouseover 和 mouseout ：

mouseout - 活动参考| MDN [ ^ ]：

blur（event） - 活动参考| MDN [ ^ ]，

等......;

活动参考| MDN [ ^ ]。



在jQuery中使用Ajax和其他东西很方便： http：/ /api.jquery.com/category/ajax [ ^ ]。



您没有告诉我们您使用的服务器端技术是什么，因此我无法向您提供有关该部分的进一步说明;请参阅您的文档。您的问题HTML的标记不足以完成任务。





-SA

Please see:
:hover - CSS | MDN[^],
Pseudo-classes - CSS | MDN[^].

But in can the state of the element related to activating it (focusing and loosing focus), then you can use :active:
:active - CSS | MDN[^].

As to the validation, it depends on what is it. It can be done on client or server side. On client side, you simply validate and change the border depending on the result, such as in JavaScript
Ajax (programming) - Wikipedia, the free encyclopedia[^].
Then, you will have to reflect the result of validation using JavaScript, pretty much in the same way.

However, it's possible that, once you need to use JavaScript for validation anyway, you may want to manipulate your border changed in response to changes in the HTML element state in JavaScript, too. To do so, you would need to handle such events as focus, blur or focusin and focusout, or mouseenter and mouseleave, or mouseover and mouseout:
mouseout - Event reference | MDN[^]:
blur (event) - Event reference | MDN[^],
and so on…;
Event reference | MDN[^].

It's convenient to do Ajax and other things in jQuery: http://api.jquery.com/category/ajax[^].

You did not tell us what you are using for server-side technologies, so I cannot give you further instructions on that part; refer to your documentation. The tag to your question, "HTML", is not quite adequate to the task.

—SA

这篇关于如何在gmail登录页面中设置文本框格式的文本框格式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！