jQuery mobile ——制作表单

VIP文章 已于 2022-05-08 23:50:53 修改
阅读量2k 收藏 2
点赞数
分类专栏： web 文章标签： html5 前端
于 2022-04-29 23:10:33 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45935715/article/details/124506231
版权

jQuery mobile ——制作表单

jQuery mobile学习

3.请运用jQuery mobile功能，将以下关于问卷调查的表单(Form)页面完成，请注意网页版面的调整，使得手机画面能够工整与美观。请同学完成此网页内容与相应所需的java script。

涉及的知识

  1. jQuery mobile 的使用
  2. 表单 的制作

代码实现

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>3-用jQuery Mobile 写表单</title>

    <link href="jquery.mobile-1.2.0.css" rel="stylesheet" />
    <script src="jquery-1.7.1.min.js"></script>
    <script src="jquery.mobile-1.2.0.js"></script>

    <style type="text/css">
        .label1_stytle {
     
            font-weight: bold;
            display: inline-block;
            width: 100px;
            margin-bottom: 15px;
            margin-left: 15px;
            margin-right:50px;
        }

        .p_background {
     
            background: #a6a2a2;
            font-weight: bold;
            margin-left: 15px;
            margin-right: 15px;
        }

        .label2_sytle {
     
            font-weight: bold;
            display: inline-block;
            margin-bottom: 15px;
            margin-left: 15px;
        }

        .input1_stytle {
     
            background: #c7f3e7;
            margin-bottom: 15px;
            margin-left: 15px;
            margin-right: 15px;
        }


        .div1_content {
     
            border: solid #000000; /*设置边框样式跟颜色*/
            border-width: 1px; /*设置边框宽度*/
            width: 630px; /*设置div宽度*/
            height: 350px; /*设置div高度*/
            margin: 0 auto; /*设置div居中*/
        }

        .div2_content {
     
            border: solid #000000; /*设置边框样式跟颜色*/
            border-width: 1px; /*设置边框宽度*/
            width: 630px; /*设置div宽度*/
            margin-bottom: 15px;
            height: 350px; /*设置div高度*/
            margin: 0 auto; /*设置div居中*/
        }

        .p_stytle {
     
            width: 630px; /*设置div宽度*/
            margin: 0 auto; /*设置div居中*/
            margin-bottom: 15px;
            margin-top: 15px;
        }

        .div3_content {
     
            border: solid #000000; /*设置边框样式跟颜色*/
            border-width: 1px; /*设置边框宽度*/
            width: 630px; /*设置div宽度*/
            margin-bottom: 15px;
            height: 200px; /*设置div高度*/
            margin: 0 auto; /*设置div居中*/
        }
        .div4_content {
     
            border: 0; /*设置边框样式跟颜色*/
            border-width: 1px; /*设置边框宽
最低0.47元/天 解锁文章
子非鱼，安知鱼之乐~
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery mobile css3手机表单页面布局按钮样式
11-24
jquery mobile css3手机表单页面布局按钮样式
Jquery实战----表单制作
word_tian_的博客
04-20 810
如图，我们需要在表单中放置一个这样的东西 ，初始状态如一致，每项都有操作按钮（增加一行、向上替换、向下替换，删除一行），点击所在行还可以选中行，如果用UI框架写，我们只需要引入所需的组件，我相信不到1小时就可以实现了，那如果用Jquery怎么写呢？
jquery mobile ajax 实例,jQuery Mobile 表单
weixin_34530398的博客
08-06 293
jQuery Mobile 表单jQuery Mobile 会自动为 HTML 表单自动添加样式，让它们看起来更具吸引力，触摸起来更具友好性。jQuery Mobile 表单结构jQuery Mobile 使用 CSS 为 HTML 表单元素添加样式，让它们更具吸引力，更易于使用。在 jQuery Mobile 中，您可以使用下列表单控件：文本输入框搜索输入框单选按钮复选框选择菜单滑动条翻转拨动开...
【JQuery Mobile移动应用开发实战】JQuery Mobile基础——表单元素的使用
lht964249279的博客
02-04 513
《JQuery Mobile移动应用开发实战》学习笔记
jQueryMobile 表单
weixin_30794851的博客
06-17 122
表单元素，文本输入组件，滑动选择器、范围选择器，选择菜单组件，轻触开关组件，复选框和单选按钮 　　尽可能少地让用户输入　　　　让用户选择（使用复选框或单选框） 　　在多页表单之间使用导航　　　清晰指示，无需滚动页面 　　去掉任何不必要的元素　　　　精简 1. 表单元素 　　data-clear-btn　　　　clearBtn　　　　默认false，若为true则生成一个X按钮，点击会清...
初探jquery——表单应用范例
10-31
初探jquery——表单应用范例
jQuery Mobile 表单
03-31
jQuery Mobile 表单 JQuery手机端表单模板，修改直接套用即可
jQuery Mobile-其他
06-12
</p><p> </p><p>jQuery Mobile（jQueryMobile）是jQuery在手机上和平板设备上的版本。jQuery Mobile不仅会给主流移动平台带来jQuery核心库，而且会发布一个完整统一的jQuery移动UI框架。支持全球主流的移动平台。...
基于JQuery的移动端抽屉式伸缩表格
qq_42468372的博客
08-04 689
样式预览 交互分析 点击标题栏，标题变红、箭头反向、内容部分缓慢出现 思路分析 点击标题变红，箭头反向很简单，只需要给元素添加点击事件，修改对应元素的color属性与background-image属性即可。 内容部分缓慢出现也是控制其css样式，修改他的max-height最高高度即可，只不过在css中需要用transition。关键代码：transition: max-height 0.4s linear 0s;（transition属性详解参考地址） 代码实现 html <link rel=
jQuery Mobile 表格
weixin_30703911的博客
10-14 169
jQueryMobile 表格 转载于:https://www.cnblogs.com/zhujiabin/p/4881016.html
jQuery Mobile（布局和表单）
04-14
jQuery Mobile（布局和表单）
jquery实现简易的移动端验证表单
10-23
本文给大家汇总介绍了几个常用的jquery实现简易的移动端验证表单，非常的实用，有需要的小伙伴可以进来参考下。
html制作问卷调查,如何通过jQuery制作一个在线问卷调查
weixin_42299346的博客
06-15 1284
第11道题，你怎么点，分数都不加也不减。因为你没有对它进行计算，代码不用变化，把10改成11就可以了。主标题副标题开始测试1aaaaabbbbbcccccddddd2abcd3abcd4abcd5abcd6abcd7abcd8abcd9abcd10abcd11abcd这是结果//记分设置$(document).ready(function(){$(".choice input[type = 'ra...
jQuery Mobile笔记
weixin_30788619的博客
12-16 144
1.获取jQuery mobile 文件，访问jQuerymobile网站下载 （貌似使用jquery mobile后，jquery会自动在网页中添加一些class类，第一次知道的我是被吓呆的！！） 2.需要使用数据属性，数据属性是HTML5引入的，以data-开头 比如data-role可以用于定义页眉，页脚，内容，页面等 data-role="page" 是在浏览器中显示的页面...
jquery mobile 表单输入
xiuwu0423的专栏
11-22 286
&amp;lt;div data-role=&quot;content&quot;&amp;gt; &amp;lt;form method=&quot;post&quot; action=&quot;${ctx}/mes/mobile/outtestSave&quot;&amp;gt; &amp;lt;div data-role=&quot;fieldcontain&quot; st
Jquery表单
weixin_45203607的博客
09-25 1411
Jquery表单 常用表单操作 下面演示需要用到的HTML <form action="https://www.baidu.com/" method="get" id="form_1"> 账号:<input type="text" name="name" value="hu" required="required" /><span id="name_span"></span> <br /> 密码:<input type=
Html5学习-JQuery mobile--表格
木鱼wzh的博客
02-03 443
原文参考：https://blog.csdn.net/xiabing082/article/details/45604927 9、表格 9.1&nbsp;表格模板 &lt;div&nbsp;data-role="content"&gt; &lt;div&nbsp;class="&lt;grid-css-attribute&gt;"&gt; &lt;div&nbsp;clas
520表白html5爱心代码
最新发布
youyouxiong的博客
05-20 7706
在HTML5中创建一个带有爱心动画的表白页面，可以通过结合CSS3动画和JavaScript来实现。这个示例创建了一个简单的表白页面，其中包含一个动态的爱心和文字。你可以根据自己的需求调整样式和动画效果，以创建一个更加个性化的表白页面。的动画，它会使爱心按照一定的时间间隔进行缩放，产生跳动的效果。类定义了表白文字的样式，包括它的位置、颜色和字体大小。类定义了爱心的样式，包括它的形状和大小。伪元素用于创建爱心的两个部分，并使用。在这个示例中，我们使用了CSS3的。属性来旋转它们，形成爱心的形状。
怎么制作表单验证Jquery
05-27
要制作表单验证Jquery，可以按照以下步骤进行： 1. 引入Jquery库文件和表单验证插件文件。 2. 编写HTML表单代码，给需要验证的表单元素添加相应的属性，如required、pattern等。 3. 编写Jquery代码，在文档加载完成后，使用选择器选中需要验证的表单元素，并调用表单验证插件的方法进行验证设置。 4. 在Jquery代码中编写表单验证规则，如判断表单元素是否为空、是否符合指定的正则表达式等。 5. 编写提示信息，当表单验证不通过时，提示用户相应的错误信息。 6. 最后，编写表单提交代码，当表单验证通过时，可以提交表单数据到后台进行处理。 下面是一个简单的表单验证Jquery的示例代码： ``` <!DOCTYPE html> <html> <head> <title>表单验证Jquery示例</title> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script> </head> <body> <form id="form"> <label for="username">用户名：</label> <input type="text" id="username" name="username" required> <br> <label for="password">密码：</label> <input type="password" id="password" name="password" required> <br> <label for="email">邮箱：</label> <input type="email" id="email" name="email" required> <br> <button type="submit">提交</button> </form> <script> $(document).ready(function() { $("#form").validate({ rules: { username: { required: true }, password: { required: true }, email: { required: true, email: true } }, messages: { username: { required: "用户名不能为空" }, password: { required: "密码不能为空" }, email: { required: "邮箱不能为空", email: "请输入正确的邮箱格式" } }, submitHandler: function(form) { // 表单提交代码 } }); }); </script> </body> </html> ``` 在这个示例代码中，使用了Jquery的validate插件来进行表单验证设置，包括了表单元素的验证规则和提示信息。当表单验证通过时，可以在submitHandler函数中编写表单提交的代码。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值