当我们用鼠标经过输入框时，不用鼠标点击、亦不用右键全选，就可以得到文本框的焦点（选中文字）。另外，为了防止重复提交，当访客点击了提交以后，按钮变为灰色，实际代码：
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=GB2312" />
<title>更智能人性化的表单 - 烈火学院 Liehuo.Net</title>
<!-- 脚本部分 -->
<script type="text/javascript">
function $(str){ return(document.getElementById(str)); }
function check_submit(){
if($("txt_user_name").value==""){ alert("请填写用户名"); return(false); }
if($("txt_user_pass").value==""){ alert("请填写密码"); return(false); }
if($("txt_user_pass_confirm").value==""){ alert("请填写确认密码"); return(false); }
$("submit_button").disabled=true;
return(false);
}
function mover(){
event.srcElement.focus();
event.srcElement.select();
}
function mclick(){
if(event.srcElement.value=="[请输入用户名]")event.srcElement.value="";
}
function mblur(){
if(event.srcElement.value=="")event.srcElement.value="[请输入用户名]";
}
// 烈火網 liehuo.net 真诚的欢迎复制转载，因为互联网是复制出来的，我们拒绝恶意采集 ｌｉｅhｕｏ.ｎｅｔ
</script>
</head>
<body style="overflow:auto;">
<form action="" onsubmit="return check_submit();">
用户名：<br>
<input id="txt_user_name" onmouseover="mover();"
onclick="mclick();" onblur="mblur();" value="[请输入用户名]"><br>
密码：<br>
<input id="txt_user_pass" type="password" onmouseover="mover();" value="默认密码"><br>
确认密码：<br>
<input id="txt_user_pass_confirm" type="password" onmouseover="mover();" value="默认密码"><br>
<input type="submit" value="提交" id="submit_button">
</form>
</body>
</html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
转自：http://www.veryhuo.com/a/view/29342.html
分享到：
相关推荐
在这个集合中，我们可以预期包含有经过jQuery增强的表单元素，如输入框、下拉菜单、复选框、单选按钮等，它们可能带有红绿灰三种颜色主题，以适应不同设计需求。 表单元素是网页中的重要组成部分，用于收集用户输入...
- `input:disabled`: 禁用状态下的输入框，可以通过设置灰色背景和不透明度来呈现。 2. `checkbox`和`radio`按钮样式化： - `input[type="checkbox"]`和`input[type="radio"]`: 选择对应的复选框和单选按钮，可...
在实际项目中，可能还需要考虑更多细节，如响应式布局、键盘事件支持、防止表单重复提交等。通过掌握这些知识点，开发者可以创建更加生动、交互性强的网页应用。在提供的`jquery_login`文件中，可能包含了实现这个...
8. 若要使表单元素默认选中，如复选框或单选按钮，需设置`checked`属性。 9. `disabled`属性用于禁用表单元素，使其呈灰色不可编辑状态。 10. 在JavaScript中，`alert()`函数会弹出一个包含指定消息的对话框；`...
12. **控件显示**：可编辑的控件正常显示，不可编辑的为灰色，并阻止鼠标和键盘操作。 13. **提示信息**：提示信息统一使用全角标点，以"您"为主语，复杂操作和需要后续操作后显示提示，长度适中，避免遮挡界面。...
E:required选择器应用于设置了required属性的表单元素，它确保用户在提交表单之前必须填写该字段。而E:optional则应用于没有设置required属性的表单元素。这两种选择器对于表单验证和样式设计非常有用。 7. E:in-...