利用jQuery和HTML5实现无刷新Ajax风格的表单
利用jQuery我们能够做出一些相当震撼的网页效果。jQuery的出现使DOM的操作更加的简单易用。下面的教程展示了如何利用jQuery创建一个HTML5效果的邀请表格，同时实现表格内容的检查功能。最终效果图(demo下载)：
具体下载目录在 /2012年资料/6月/17日/利用jQuery和HTML5实现无刷新Ajax风格的表单/
1.创建首页
首页的格式必须是HTML5的格式。代码如下：- <!doctype html>
- <html lang="en">
- <head>
- <meta charset="utf-8">
- <title>E-mail Invite Form Demo</title>
- <meta name="author" content="Jake Rocheleau">
- <link rel="stylesheet" type="text/css" href="style.css">
- </head>
- <body>
- </body>
- </html>
- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
2.Email表格
下面我们需要向<body>添加内容。我们需要的仅仅是一个HTML5样式的email文本输入框和一个用来检验用户的输入内容是否是符合Email格式的发送按钮。代码如下：
- <div id="completeform">
- <span id="error"></span>
- <form id="inviteform" name="inviteform" method="post" action="#">
- <input type="email" name="email" id="email" placeholder="E-mail address" autocomplete="off" autocorrect="off" autocapitalize="off">
- <div id="btnwrap"><button name="sendbtn" id="sendbtn" type="submit" value="Send">Send</button></div>
- </form>
- </div>
把form标签包在div#completeform中是为了稍后展示动画。一旦发送成功，我们会将span#error和form#inviteform删除，同时添加一个一组成功发送的提示信息。在input标签中我们用到了一些HTML5的属性。第一个是将input的type设置成email，在chrome和其它的一些webkit系列的浏览器中能够检查用户的输入内容是否是Email地址；而autocorrect和autocapitalize则可以简��iphone和ipod的输入。
相关推荐
wusiye 2020-10-23
表格的现在还是较为常用的一种标签，但不是用来布局，常见处理、显示表格式数据。在HTML网页中，要想创建表格，就需要使用表格相关的标签。<table> <tr> <td>单元格内的文字</td> ...
gufudhn 2020-08-09
nercon 2020-08-01
swiftwwj 2020-07-21
nercon 2020-07-16
饮马天涯 2020-07-05
Lophole 2020-06-28
gufudhn 2020-06-12
csstpeixun 2020-06-11
huzijia 2020-06-09
WebVincent 2020-06-06
行吟阁 2020-05-30
qsdnet我想学编程 2020-05-26
gufudhn 2020-05-25
qsdnet我想学编程 2020-05-19
suixinsuoyu 2020-05-15
HSdiana 2020-05-15
PioneerFan 2020-05-15