1.html页面程序，其中的基于jquery的javascript程序是为了目前支持html5效果不是很好的浏览器设计的。autocomplete=“off”是阻止浏览器的记忆功能。
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8" />
<script type="text/javascript" src="jquery-1.5.2.js"></script>
<script type="text/javascript" src="jquery.placeholder.js"></script>
<script type="text/javascript" src="placeholder.js"></script>
<style type="text/css">
fieldset{
width:216px;
}
fieldset ol{
list-style:none;
padding:0;
margin:2px;
}
fieldset ol li{
margin:0 0 9px 0;
padding:0;
}
fieldset input{
display:block;
}
</style>
</head>
<body>
<form id="create_accout" action="/signup" method="post">
<fieldset id="signup">
<legend>账户</legend>
<ol>
<li>
<label for="first_name">first_name</label>
<input type="text" name="first_name" id="first_name" autofocus="true" placeholder="姓"/>
</li>
<li>
<label for="last_name">last_name</label>
<input type="text" name="last_name" id="last_name" placeholder="名"/>
</li>
<li>
<label for="email">email</label>
<input type="email" name="email" id="email" placeholder="user@example.com"/>
</li>
<li>
<label for="password">password</label>
<input type="password" name="password" id="password" value="" autocomplete="off" placeholder="3-10个字符"/>
</li>
<li>
<label for="repassword">repassword</label>
<input type="password" name="repassword" id="repassword" value="" autocomplete="off" placeholder="确认密码"/>
</li>
<li><input type="submit" value="提交"/></li>
</ol>
</fieldset>
</form>
</body>
</html>
2.placeholder.js文件内容
$().ready(function(){
function hasPlaceholderSupport(){
var element=document.createElement("input");
return "placeholder" in element;
}
if(!hasPlaceholderSupport()){
$("#create_accout").placeholder();
$("input[autofocus=true]").focus();
}
})
3.图为在firefox与chrome浏览器下的效果
- 大小: 15.9 KB
- 大小: 15.1 KB
分享到：
相关推荐
HTML实现基于MD5加密的登录注册界面是一种常见的用户信息安全措施，尤其在Web开发中，用于保护用户的账号信息不被轻易破解。在这个项目中，我们将会探讨如何使用HTML构建登录和注册界面，并结合MD5加密技术来增强...
在“基于HTML5 用户注册页面”这个项目中，我们可以探讨HTML5在创建用户注册界面中的应用，以及如何利用JavaScript进行交互逻辑的实现。 首先，HTML5的新特性对用户注册页面的影响主要体现在以下几个方面： 1. **...
基于html5的注册页面，作为一个初学者的小案例解析。
在这个“基于HTML5+css+JS的精美登陆注册界面”项目中，开发者利用这些技术创建了一个吸引人的、功能丰富的登录和注册页面。 首先，HTML5（HyperText Markup Language第五版）是网页内容的结构标准，它提供了丰富的...
综上所述，这个基于HTML5的静态购物车页面结合了现代Web开发的多项关键技术，通过合理的前端架构和交互设计，为用户提供了一个功能齐全、响应迅速的在线购物体验。开发者可以深入研究这些技术，提升自己的Web开发...
【基于HTML5的O2O超市系统的设计与实现】是一个专为中小型超市打造的电子商务解决方案，它融合了线上购买和线下配送服务，旨在为商家和消费者提供便捷的交易体验。系统充分利用HTML5技术，确保在PC端和移动端的兼容...
在这个“基于HTML5+css+JS的精美登陆注册界面”项目中，开发者利用这些技术创建了一个吸引人的、功能齐全的登录和注册界面。下面我们将深入探讨这些技术以及它们在实现登录注册界面中的应用。 1. HTML5（超文本标记...
【基于HTML5的会议管理系统原型设计】 HTML5作为现代网页开发的标准，以其强大的功能和兼容性，已经成为构建交互式和动态网页的首选技术。在这个基于HTML5的会议管理系统原型设计中，开发者充分利用了HTML5的新特性...
在这个“基于HTML5+css+JS的精美登陆注册界面”项目中，开发者利用这些技术创建了一个吸引人的、功能齐全的登录和注册界面，旨在提升用户体验和网站的吸引力。 HTML5作为最新的超文本标记语言版本，引入了许多新...
HTML5登陆注册页面模板是一个基于前端技术实现的交互式网页设计。这个模板主要利用了HTML5、CSS和JavaScript，旨在创建一个简洁且易于理解和修改的登录注册界面。在这个模板中，用户可以在登录和注册功能之间轻松...
【描述】：基于HTML5的学生管理系统，主要实现学生数据的增删改查，主要用HTML5+CSS3 在这个系统中，HTML5不仅提供了丰富的表单元素和API，如`<input type="date">`用于日期选择，`<canvas>`用于图形绘制，以及Web ...
【基于WeUI的移动商城HTML5模板】是一个专为移动端设计的电商网站模板，它充分利用了WeUI框架的优势，提供了一套完整的用户界面，适用于快速搭建功能完善的移动电商平台。WeUI是中国微信团队开源的一款轻量级的前端...
5、环保科普：提出一些问题，并提出如何完善（例：飞絮即将来临，如何做好个人防护？） 6.环保培训：培训人员填写本人基本信息 7.信息交流：用户可对环保课堂中罗列的知识进行评论，提出个人认为好的意见或建议。
文章《基于HTML5&JavaScript的游戏设计和实现》详细探讨了如何利用HTML5和JavaScript开发一款Web游戏，适应移动优先的趋势，并实现良好的用户体验。 首先，文章介绍了游戏开发的技术可行性分析。HTML5作为新一代的...