<input type="submit">点击按钮 添加内容到相应的radio的ul li中

最新推荐文章于 2022-03-10 16:41:17 发布
原创 最新推荐文章于 2022-03-10 16:41:17 发布 · 1.4k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#jquery

本文介绍了一个简单的网页选项卡功能实现案例，通过HTML、CSS和JavaScript（使用jQuery库简化DOM操作），允许用户选择不同的类别（如城市或游戏），并输入名称以添加到相应的列表中。该案例适用于初学者理解表单验证及DOM操作。
 <!DOCTYPE html>
 <html>
 <head>
  <meta charset="UTF-8">
  <title>实践题 - 选项卡</title>
  <script type="text/javascript" src="js/jquery.min.js"></script>
  <script type="text/javascript">
  $(function(){
  $(":submit").click(function(){
  var radioLen = $(":radio:checked");
  var type =radioLen.val();
  if(radioLen.length ==0){
  alert("请选择");
  return false;
  }
  var txt =$.trim( $(":text[name='name']").val());
  if(txt ==""){
  alert("不能为空串");
  return false;
  }
  $("<li>"+txt+"</li>").appendTo($("#"+type));
  return false;
  });
  });
  </script>
 </head>
 <body>
<ul id="city">
<li>武汉</li>
<li>北京</li>
<li>上海</li>
</ul>
  <ul id="game">
  <li>魔兽</li>
  <li>红警</li>
  <li>极速飞车</li>
  </ul>
  <form action="index.html" name="myform">
  <input type="radio" name="type" value="city">城市
  <input type="radio" name="type" value="game">游戏
  name:<input type="text" name="name"/>
  <input type="submit" value="Submit" id="submit"/>
  </form>
 </body>
 </html>
html5中input的新类型（验证只有在点击提交按钮的时候才触发）
wd
07-13 9811
1.email，关于电子邮件是否合法，我们以前通常会在js脚本中写一个复杂的正则表达式来验证，但是现在不用了，类型为email的input控件可以自动帮助我们完成，用法如下： Document 如果输入不合格，则出现下面代码： 2.url，我们需要判断输入的是否是一个合法的网址，以前也是通过在js脚本中写一堆复杂的正则表达式，现
input type="submit' 加上onclick的好用处
热门推荐
生活在爪洼岛上
07-17 1万+
 onclick="chakan()"/>当点击“查看”按钮后，会先执行chakan()脚本里面的代码，如果某个地方return false;(false可以省略)之后会继续执行submit到后台处理查看报卡系统中CustomerInfoManagerment.jsp中的submits()方法，注意，按钮的类型为submit可以看到效果
input type="submit" 和"button"有什么区别？
weixin_34150830的博客
01-27 206
http://www.zhihu.com/question/20839977 在一个页面上画一个按钮，有四种办法： &lt;input type="button" /&gt; 这就是一个按钮。如果你不写javascript 的话，按下去什么也不会发生。 &lt;input type="submit" /&gt; 这样的按钮用户点击之后会自动提交 form，除非你写了javascrip...
vue.js 实现点击按钮动态添加li的方法
10-18
今天小编就为大家分享一篇vue.js 实现点击按钮动态添加li的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
点击按钮增加一行li
九亿宅男的梦的博客
08-23 1772
1.点击class=btn的按钮增加一行<li><input type="text" class='input1'/></li>' $('.btn').click(function () { $('ul').prepend('<li>+'<input type="text" class='input1'/>'+'</li...
HTML <button> 和 input type=“button”的区别 / input type="submit" 和"button"的区别
希希的博客
02-17 4233
1. 标签里可以放文本图片等内容，与创建的按钮不同。 2. 中的button通常与javascript一起使用启动脚本。如：  3. 如果在 HTML 表单中使用 元素，不同的浏览器可能会提交不同的按钮值。通常用在 HTML 表单中创建按钮。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="styles.css"> <title>鲜花商城</title> </head> <body> <header> <nav> <ul> <li>首页</li> <li>鲜花详情</li> <li>鲜花展示</li> <li>鲜花订单</li> <li>用户登录</li> <li>留言板</li> </ul> </nav> </header> <main> <div class="form-slider"> <input type="radio" id="login" name="form" checked> <input type="radio" id="register" name="form"> <div class="form-container"> <div class="form login"> <h2>登录</h2> <input type="text" placeholder="用户名"> <input type="password" placeholder="密码"> <label for="register">注册</label> </div> <div class="form register"> <h2>注册</h2> <input type="text" placeholder="用户名"> <input type="email" placeholder="邮箱"> <input type="password" placeholder="密码"> <input type="password" placeholder="确认密码"> <label for="login">登录</label> </div> </div> </div> <div class="welcome"> <h2>欢迎来到鲜花商城</h2> <img src="flower.jpg" alt="鲜花"> </div> </main> </body> </html>
最新发布
06-02
我应该想到语义化标签，比如用<header>、<nav>、<main>等代替div，这样有助于SEO和可访问性。然后，检查是否有冗余代码，比如重复的CSS或未使用的元素，这会影响加载速度。接着，Vue.js的组件化开发可能被用到，需要...
<h1>注册信息</h1> <form action="action_page.php" method="get"> <label>姓名：</label><input type="text" placeholder="请输入真实姓名"> <br></br> <label>密码：</label><input type="password" placeholder="请输入密码"> <br></br> <label>确认密码：</label><input type="password" placeholder="请输入确认密码"> <br></br> <label>性别：</label> <label><input type="radio" name="gender"> 男</label> <label><input type="radio" name="gender" checked> 女</label> <br></br> <label>居住城市：</label> <select> <option>北京</option> <option>上海</option> <option>广州</option> <option>深圳</option> <option>武汉</option> </select> <h2>教育经历</h2> <label>最高学历：</label> <select> <option>博士</option> <option>硕士</option> <option>本科</option> <option>大专</option> </select> <br></br> <label>学校名称：</label><input type="text"> <br></br> <label>所学专业：</label><input type="text"> <br></br> <label>在校时间：</label> <select> <option>2015</option> <option>2016</option> <option>2017</option> <option>2018</option> </select> <br></br> <select> <option>2019</option> <option>2020</option> <option>2021</option> <option>2022</option> </select> <br></br> <h2>工作经历</h2> <label>公司名称：</label><input type="text"> <br></br> <label>工作描述：</label> <br> <textarea></textarea> <br></br> <input type="checkbox"><label>已阅读并同意以下协议：</label> <ul> <li><a href="#">《用户服务协议》</a></li> <li><a href="#">《隐私政策》</a></li> </ul> <br></br> <button>免费注册</button> <button type="reset">重新填写</button> </form>
04-03
提交和重置按钮使用了<button>，但类型未明确指定，默认类型为submit，不过最好显式声明type="submit"以避免潜在问题。重置按钮会清除表单数据，需要用户谨慎使用。 最后，整个表单的action属性指向action_page.php...
HTML常用标签整理 <!-- h1-h6 -->     <h1>标题</h1>     <p>段落</p>     <!-- 列表 -->     <ul>         <li>列表项</li>         <li>列表项</li>         <li>列表项</li>     </ul>     <!-- 文本标签 -->     <strong>加粗</strong>     斜体字     <ins>下划线</ins>     <del>删除线</del>     <!-- 超链接 -->     <a href="#" target="_blank">超链接</a>     <!-- 图片 -->     <img src="第4章/hong.png" alt="">     <!-- 表格 -->     <table border="1">         <tr>             <td colspan="2">学号/姓名</td>             <td rowspan="2">性别/男</td>         </tr>         <tr>             <td>20230101</td>             <td>林志远</td>         </tr>     </table>     <!-- 水平线（单标签） -->     <hr>     <!-- 换行 -->     <br>     <!-- 表单 -->     <form action="#" method="post">         文本框：<input type="text"> <br>         密码框：<input type="password"> <br>         单选框：<input type="radio" name="sex">男 <br>         复选框：<input type="checkbox" name="hobby">爱好 <br>         文件上传：<input type="file"> <br>         日期选择：<input type="date"> <br>         颜色选择：<input type="color"> <br>         邮箱：<input type="email"> <br>         数字：<input type="number"> <br>         下拉菜单：         <select name="city">             <option value="">泉州市</option>             <option value="">厦门市</option>         </select>         <br>         <input type="submit" value="提交">         <input type="reset" value="重置">         <input type="button" value="普通按钮">     </form>     <!-- 结构标签（语义化标签） -->     <header>头部</header>     <nav>导航栏</nav>     <section>区块</section>     <article>文章</article>     <aside>侧边栏</aside>     <footer>底部</footer>     <!-- 盒子标签(块元素) -->     <div>盒子模型</div>     <!-- span (行内元素) -->     <span>span</span>
05-31
<input type="submit" value="提交"> </form> ``` #### 11. 块级与行内标签 - **块级标签**：如 `<div>`、`<p>`，占据整行显示。 - **行内标签**：如 `<span>`、`<a>`，仅占据内容所需的宽度[^1]。 ```html <div>...
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>我的网页</title> <style> body { font-family: 'Microsoft YaHei', Arial, sans-serif; line-height: 1.6; max-width: 800px; margin: 0 auto; padding: 20px; background-color: #f0f0f0; } h1 { color: #2c3e50; border-bottom: 2px solid #3498db; } .content-box { background: white; padding: 20px; border-radius: 10px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); } img { max-width: 100%; height: auto; } </style> </head> <body> <div class="content-box"> <h1>欢迎来到我的网页</h1> <h2>简介</h2> <p>这是一个响应式网页设计示例，包含各种常用HTML元素。</p> <h2>功能展示</h2> <ul> <li>响应式布局</li> <li>基本样式设计</li> <li>图片展示</li> <li>表格示例</li> </ul> <h2>图片展示</h2> <img src="https://picsum.photos/600/400" alt="示例图片"> <h2>数据表格</h2> <table border="1" cellpadding="8"> <tr> <th>项目</th> <th>数量</th> <th>价格</th> </tr> <tr> <td>苹果</td> <td>5</td> <td>¥20</td> </tr> <tr> <td>香蕉</td> <td>3</td> <td>¥15</td> </tr> </table> <h2>联系表单</h2> <form> <label>姓名：</label> <input type="text" placeholder="请输入姓名"><br><br> <label>邮箱：</label> <input type="email" required><br><br> <label>留言：</label><br> <textarea rows="4" cols="50"></textarea><br><br> <button type="submit">提交</button> </form> </div> </body> </html>
05-02
<label><input type="radio" name="subscribe" value="yes"> 是</label> <label><input type="radio" name="subscribe" value="no"> 否</label> </div> <div class="form-group"> <label for="country">国家：...
<body style="background-color:#1c77ac; background-image:url(images/1.png); height:100%;width:100%;background-size:cover;"> <div id="mainBody"> <div id="cloud1" class="cloud"></div> <div id="cloud2" class="cloud"></div> </div> <div class="logintop"> <span>欢迎登录在线考试系统</span> <ul> <li><a href="#">回首页</a></li> <li><a href="#">帮助</a></li> <li><a href="#">关于</a></li> </ul> <base href="<%=basePath%>"> <title>登录</title> <link rel="stylesheet" href="css/login.css"> </head> <body> <section> <!--背景色--> <div class="box"> <div class="container"> <div class="form"> <span style="text-align: center"><h2>学生考试管理系统</h2></span> <form action="login" method="post"> <div class="inputBox"> <input type="text" name="user" id="user"/ > </div> <div class="inputBox"> <input type="password" name="pw"/ > </div> <div class="danxuan" style="text-align: center"> <input type="radio" name="sf" value="0" checked="checked"/>管理员 <input type="radio" name="sf" value="1"/>教师 <input type="radio" name="sf" value="2"/>学生 </div> <div class="inputBox"> <input type="submit" value="登录"/> </div> <span style="text-align: center"></span> </form> </div> </div> </div> </div>
06-13
登录页面的主体部分包含了一个标题“学生考试管理系统”，一个表单和一个提交按钮。表单包含了三个输入框，分别是用户名、密码、身份（管理员、教师或学生），以及一个“登录”按钮。该页面的样式由一个名为“login....
Android移动端input标签type=submit时，点击时会光标会进入按钮。。。
fb_01的专栏
12-19 2063
1、原因：input有一个私有属性user-modify：read-write-plaintext-only； 2、解决方法：重写user-modify属性或者 input[type="submit"]{     -webkit-user-modify: read-plaintext-only; -moz-user-modify: read-plaintext-only;
input type="submit" 和"button"有什么区别
02-11 346
HTML中<input type="submit" /> 和 <input type="button" /> 主要从元素定义类型、点击触发动作两个方面来区别。 一、元素定义类型的区别： 1、<input type="button" /> 定义为一个可点击的按钮。 2、<input type="submit" /> 定义...
IE下按回车自动触发input type=submit的按钮点击事件
caixiajia的专栏
08-04 1221
在做项目中遇到了个奇怪的问题，在IE下按回车自动触发input type=submit的按钮点击事件。 解决方法：将type=submit修改为type=button 下面这个楼主也遇到的同样的问题 http://www.cnblogs.com/cqmy/p/6349395.html 他有两种解决方案： 1、用a标签 2、使用
input标签的type=submit与$().submit()应对应
mobaids的博客
04-20 2211
type="submit" value="删除" onclick="delshop();" >                                                        function delshop(){         var isConfirm= window.confirm("确认删除？");         if(i
input type=“submit“ 和“button“有什么区别
weixin_45262162的博客
03-10 1881
input type="submit" 和"button"在功能、是否具备Enter键支持和是否需要写JavaScript来阻止上有所区别: 1、功能不同 submit用在表单内,里面有类似的默认方法封装,普通单击就是提交所在表单。 button是个普通的按钮,如果不写onclick单击等事件,那么这个按钮点击是没有任何反应的,所有事件都需要自己手动写。 2、是否具备enter键的支持 submit使用后，页面支持键盘enter键操作。 button使用后往往页面不支持enter键了。所以需要支
input type="submit"，触发后台事件出现问题
Jacky的专栏
11-05 5170
input type="subm form id="form1" name="form1" runat="server">    p>       label for="name">          工号:br />          input id="name" type="text" name="name" placeholder="ID" runat
表单元素input、button、submit、submit()、onsubmit()详解
至尊宝
07-24 2965
表单元素input、button、submit、submit()、onsubmit()详解 Leave a reply 返回顶部 type=”button”和type=”submit”区别 type=”button”实现type=”submit”功能 在提交表单数据时会用到input、button、submit、submit()、onsubmit()等元素，下面就
FORM表单 onclick()与onsubmit()
weixin_30242907的博客
02-28 323
FORM表单中onclick()、submit()与onsubmit()的问题 最近遇到一次处理form数据的过滤，采用了button的onclick事件来检查，发现return false后表单仍然提交了。 于是仔细研究了下onclick、onsubmit、submit集合函数之间的关系和区别 1 2 3 4 5 6 7 8 9 10 11 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值