一、什么是Form表单

1. 表单的作用

表单是一种特殊的HTML元素集合，用于收集用户的输入数据并将其提交到服务器进行处理。表单通常包含文本框、下拉菜单、复选框、单选按钮等多种控件，能够满足多样化的输入需求。通过表单，用户可以轻松地填写个人信息、选择选项或上传文件，从而实现与后端系统的交互。

1. 表单的基本组成

一个完整的表单由以下几个部分构成：

标签：定义表单的起始和结束位置。

输入控件：如、、<select>等，用于接收用户输入。</p><p>提交按钮：如<button type="submit">，用于触发表单提交操作。</p><p>验证逻辑：通过HTML属性或JavaScript脚本确保用户输入符合预期格式。</p><h2>二、Form表单的基本语法</h2><ol class="custom_num list-paddingleft-1" style="list-style-type: num;"><li class="list-num-1-1 list-num-paddingleft-1"><p><strong><form>标签的基本结构</strong></p></li></ol><p><form>标签是所有表单的基础，其基本语法如下：</p><pre><code><form action="" method="">     <!-- 表单内容 --> </form></code></pre><p>action属性：指定表单数据提交的目标URL地址。如果为空字符串，则默认提交给当前页面。<br/></p><p>method属性：定义HTTP请求的方法，通常为GET或POST。GET适合短小的数据传输，POST则适用于较大的数据量。</p><ol class="custom_num list-paddingleft-1" style="list-style-type: num;"><li class="list-num-1-1 list-num-paddingleft-1"><p><strong>常见输入控件</strong></p></li></ol><p>表单中最常用的控件包括以下几种：</p><p>文本输入框：<input type="text"></p><p>密码输入框：<input type="password"></p><p>单选按钮：<input type="radio"></p><p>复选框：<input type="checkbox"></p><p>下拉菜单：<select> 和 <option></p><p>文件上传：<input type="file"></p><p>示例代码：</p><pre><code><form action="/submit" method="post">     <label for="username">用户名:</label>     <input type="text" id="username" name="username"><br><br>     <label for="password">密码:</label>     <input type="password" id="password" name="password"><br><br>     <label for="gender">性别:</label>     <input type="radio" id="male" name="gender" value="male">     <label for="male">男</label>     <input type="radio" id="female" name="gender" value="female">     <label for="female">女</label><br><br>     <label for="hobbies">兴趣爱好:</label>     <input type="checkbox" id="reading" name="hobbies" value="reading">     <label for="reading">阅读</label>     <input type="checkbox" id="music" name="hobbies" value="music">     <label for="music">音乐</label><br><br>     <label for="country">国家:</label>     <select id="country" name="country">         <option value="china">中国</option>         <option value="usa">美国</option>         <option value="japan">日本</option>     </select><br><br>     <input type="file" id="file" name="file"><br><br>     <button type="submit">提交</button> </form></code></pre><h2>三、Form表单的常见属性<br/></h2><ol class="custom_num list-paddingleft-1" style="list-style-type: num;"><li class="list-num-1-1 list-num-paddingleft-1"><p><strong>必填字段验证</strong></p></li></ol><p>为了确保用户填写必要的信息，可以使用required属性强制某些字段不可为空。例如：</p><pre><code><input type="text" id="email" name="email" required></code></pre><p>当用户未填写必填字段时，浏览器会自动显示提示信息。<br/></p><ol class="custom_num list-paddingleft-1" style="list-style-type: num;"><li class="list-num-1-1 list-num-paddingleft-1"><p><strong>字段长度限制</strong></p></li></ol><p>通过maxlength属性可以限制输入框的最大字符数，而minlength属性则规定最小字符数。例如：</p><pre><code><input type="text" id="name" name="name" minlength="3" maxlength="10"></code></pre><ol class="custom_num list-paddingleft-1" style="list-style-type: num;"><li class="list-num-1-1 list-num-paddingleft-1"><p><strong>默认值设置</strong><br/></p></li></ol><p>使用value属性可以为输入框预设默认值。例如：</p><pre><code><input type="text" id="age" name="age" value="18"></code></pre><ol class="custom_num list-paddingleft-1" style="list-style-type: num;"><li class="list-num-1-1 list-num-paddingleft-1"><p><strong>占位符提示</strong><br/></p></li></ol><p>placeholder属性提供了一个占位符提示，帮助用户了解输入内容的格式。例如：</p><pre><code><input type="email" id="email" name="email" placeholder="请输入邮箱地址"></code></pre><h2>四、Form表单的使用方法<br/></h2><ol class="custom_num list-paddingleft-1" style="list-style-type: num;"><li class="list-num-1-1 list-num-paddingleft-1"><p><strong>表单提交方式</strong></p></li></ol><p>表单提交可以通过两种方式进行：</p><p>GET方式：将数据附加到URL中，适合短小的数据传输。例如：</p><pre><code><form action="/search" method="get">     <input type="text" name="query">     <button type="submit">搜索</button> </form>提交后的URL可能为：/search?query=关键词 POST方式：将数据封装在请求体中，适合较大的数据量。例如： <form action="/submit" method="post">     <input type="text" name="data">     <button type="submit">提交</button> </form></code></pre><ol class="custom_num list-paddingleft-1" style="list-style-type: num;"><li class="list-num-1-1 list-num-paddingleft-1"><p><strong>表单数据处理</strong></p></li></ol><p>后端服务器接收到表单数据后，可以通过多种编程语言（如PHP、Python、Node.js等）解析并处理这些数据。例如，使用PHP处理POST请求：</p><pre><code><?php if ($_SERVER["REQUEST_METHOD"] == "POST") {     $username = $_POST['username'];     echo "用户名: " . htmlspecialchars($username); } ?></code></pre><ol class="custom_num list-paddingleft-1" style="list-style-type: num;"><li class="list-num-1-1 list-num-paddingleft-1"><p><strong>表单样式美化</strong><br/></p></li></ol><p>虽然表单的功能性至关重要，但良好的用户体验离不开美观的设计。可以使用CSS对表单进行样式修饰，例如：</p><pre><code>form {     width: 300px;     margin: 0 auto; } input, select, button {     display: block;     margin-bottom: 10px;     padding: 5px;     width: 100%; }</code></pre><p>表单是Web开发中不可或缺的一部分，它不仅连接了前端与后端，还直接影响了用户的交互体验。本文从表单的基本概念入手，详细介绍了其语法、属性和使用方法。通过合理运用<form>标签及其相关控件，开发者可以快速构建出功能完善且易于维护的表单界面。未来，随着前端框架的发展，表单的设计和实现将变得更加智能化和便捷化。希望本文能为读者提供实用的指导，帮助大家更好地掌握表单技术。</p> <p class="declaration">声明：所有来源为<a href="">“澳门太阳集团城网址8722”</a>的内容信息，未经本网许可，不得转载！如对内容有异议或投诉，请与我们联系。邮箱：marketing@think-land.com</p> </div> <!-- 点赞分享 开始 --> <div class="details-ls"> <div class="like" dlike="64" ilike="0"> <img class="like-img" src="https://juheimage.oss-cn-hangzhou.aliyuncs.com/www/news/202209/like.svg" /> <img class="is-like-img" src="https://juheimage.oss-cn-hangzhou.aliyuncs.com/www/news/202209/like-click.svg" /> <span class="likes-num"></span> </div> <div class="share-box"> <div class="share" id="show-news-qrcode"> <img src="https://juheimage.oss-cn-hangzhou.aliyuncs.com/www/news/202209/share.svg" /> 分享 <div class="qrcode"><img src="https://juhecn.oss-cn-hangzhou.aliyuncs.com/news/qrcode/qrcode-img-9956-1742367495.png" /><span class="triangle"></span></div> </div> </div> </div> <!-- 点赞分享 结束 --> <!-- 宣传图片 开始 --> <style> .float-wrapper { position: relative } .float-wrapper-pc .float-wrapper-content { position: relative; width: 820px; height: 120px; margin: 60px 0; border-radius: 8px; overflow: hidden } .float-wrapper-link { position: absolute; top: 0; bottom: 0; left: 0; right: 0 } .float-wrapper-img { width: 100%; height: 100% } @media screen and (min-width:751px) { .float-wrapper-pc { display: none } .float-wrapper-m { display: none!important } } @media screen and (max-width:750px) { .float-wrapper-pc { display: none!important } .float-wrapper-m { display: none } .float-wrapper-m { width: 6.9rem; height: 1.6rem; margin: .1rem auto -0.13rem; border-radius: .08rem; overflow: hidden } } </style> <div class="width1200 float-wrapper float-wrapper-pc"> <div class="float-wrapper-content"> <a class="float-wrapper-link" href="" target="_blank" rel="noopener"> </a> <img class="float-wrapper-img" src=""> </div> </div> <div class="float-wrapper float-wrapper-m"> <a class="float-wrapper-link" href="" target="_blank" rel="noopener"> </a> <img class="float-wrapper-img" src=""> </div> <!-- 宣传图片 结束 --> </div> <!-- 标签 开始 --> <div class="details-right"> <div class="industryH tag"> <a href="/wiki" title="API百科"> <strong>API百科</strong> </a> </div> <div class="tips-div"> <a href="/wiki/cid/1">生活服务</a> <a href="/wiki/cid/2">企业工商</a> <a href="/wiki/cid/3">金融科技</a> <a href="/wiki/cid/4">接口大全</a> <a href="/wiki/cid/5">电子商务</a> </div> <div class="api-zixun"> <div class="industryH api-zixun-title">API资讯</div> <div class="industryBorder"></div> <ul class="hot-ul" id="relateList"> <li><a href="/news/index/id/9857" target="_blank" rel="noopener noreferrer">form表单属性详解 form表单提交方式有哪些</a></li> <li><a href="/news/index/id/9856" target="_blank" rel="noopener noreferrer">什么是form表单 form表单的提交以及数据获取</a></li> <li><a href="/news/index/id/10821" target="_blank" rel="noopener noreferrer">JavaScript中addEventListener和onClick()的区别</a></li> <li><a href="/news/index/id/10820" target="_blank" rel="noopener noreferrer">JavaScript escape()函数详解</a></li> <li><a href="/news/index/id/10819" target="_blank" rel="noopener noreferrer">Window navigator.appName属性详解</a></li> </ul> </div> <link rel="stylesheet" href="/css/v11/news/newsnew.css?v=1.3"> <div class="details-tuijian"> <div class="like-title">相关API</div> <ul class="tuijianapi"> <li> <a class="tuijianimg" rel="noopener" href="/docs/api/id/818"> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-526"></use> </svg> </a> <p class="apiname"><a href="/docs/api/id/818" rel="noopener">航班订票查询</a> </p> <div class="apides"> <span>通过出发地、目的地、出发日期等信息查询航班信息。</span> <p class="apidescipe">通过出发地、目的地、出发日期等信息查询航班信息。</p> </div> </li> <li> <a class="tuijianimg" rel="noopener" href="/docs/api/id/817"> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-22"></use> </svg> </a> <p class="apiname"><a href="/docs/api/id/817" rel="noopener">火车订票查询</a> </p> <div class="apides"> <span>通过站到站查询火车班次时刻表等信息，同时已集成至太阳集团城8722MCP Server。火车票订票MCP不仅能赋予你的Agent火车时刻查询，还能支持在线订票能力。</span> <p class="apidescipe">通过站到站查询火车班次时刻表等信息，同时已集成至太阳集团城8722MCP Server。火车票订票MCP不仅能赋予你的Agent火车时刻查询，还能支持在线订票能力。</p> </div> </li> <li> <a class="tuijianimg" rel="noopener" href="/docs/api/id/816"> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-741"></use> </svg> </a> <p class="apiname"><a href="/docs/api/id/816" rel="noopener">经济能力评级（个税）</a> </p> <div class="apides"> <span>基于被查询人既往12个月个税缴纳数据，通过模型计算出被查询人的个税经济能力评级</span> <p class="apidescipe">基于被查询人既往12个月个税缴纳数据，通过模型计算出被查询人的个税经济能力评级</p> </div> </li> <li> <a class="tuijianimg" rel="noopener" href="/docs/api/id/815"> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-585"></use> </svg> </a> <p class="apiname"><a href="/docs/api/id/815" rel="noopener">经济能力评级（社保）</a> </p> <div class="apides"> <span>基于被查询人既往12个月个税缴纳数据，通过模型计算出被查询人的个税经济能力评级</span> <p class="apidescipe">基于被查询人既往12个月个税缴纳数据，通过模型计算出被查询人的个税经济能力评级</p> </div> </li> <li> <a class="tuijianimg" rel="noopener" href="/docs/api/id/807"> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-789"></use> </svg> </a> <p class="apiname"><a href="/docs/api/id/807" rel="noopener">车辆过户信息查询</a> </p> <div class="apides"> <span>通过车辆vin码查询车辆的过户次数等相关信息</span> <p class="apidescipe">通过车辆vin码查询车辆的过户次数等相关信息</p> </div> </li> </ul> </div> </div> <!-- 标签 结束 --> </div> <!-- 新闻详情 结束 --> </div> </section> <input type="hidden" name="subForm" id="sub-form" value="news9956" /> <input type="hidden" name="frameRegId" id="frameRegId" value="11" /> <!-- 尾部footer区域 开始 --> <footer class="footer"> <div class="footer-top clearfix"> <div class="footer-top-container clearfix"> <div class="footer-link"> <dl> <dt> <a href="#" rel="">产品服务</a> </dt> <dd><a href="/docs?f=footer" rel="nofollow" >API市场：API数据应用服务专家</a> </dd> <dd><a href="/mcp?f=footer" target="_blank" rel="noopener nofollow" >MCP服务：LLM大模型专用数据仓库</a> </dd> <dd><a href="https://apimaster.juhe.cn/?f=footer" target="_blank" rel="noopener nofollow" >APIMaster：API全生命周期管理专家</a> </dd> <dd><a href="https://dataarts.juhe.cn/?f=footer" target="_blank" rel="noopener nofollow" >DataArts：数据敏捷治理专家</a> </dd> <dd><a href="https://quickBot.juhe.cn?f=footer" target="_blank" rel="noopener nofollow" >QuickBot：高效率数字化员工</a> </dd> <dd><a href="/vip?f=footer" rel="nofollow" >黑钻会员：百种数据无限使用</a> </dd> </dl> <dl> <dt> <a href="#" rel="">开发者</a> </dt> <dd><a href="https://sdk.cn?f=footer" target="_blank" rel="noopener nofollow" >开发者社区</a> </dd> <dd><a href="/bayarea?f=footer" target="_blank" rel="noopener nofollow" >BayArea</a> </dd> <dd><a href="https://chat.juhe.cn" target="_blank" rel="noopener nofollow" >JuheChat</a> </dd> </dl> <dl> <dt> <a href="#" rel="">关于太阳集团城8722</a> </dt> <dd><a href="/about?f=footer" rel="nofollow" >关于太阳集团城8722</a> </dd> <dd><a href="/news/listview?f=footer" rel="nofollow" >太阳集团城8722动态</a> </dd> <dd><a href="/agent?f=footer" rel="nofollow" >合作伙伴</a> </dd> <dd><a href="/qa?f=footer" rel="nofollow" >常见问题</a> </dd> <dd><a href="/complaints?f=footer" rel="nofollow" >投诉与建议</a> </dd> </dl> <dl> <dt> <a href="#" rel="">法律法规</a> </dt> <dd><a href="/legal?f=footer" rel="nofollow" >服务条款</a> </dd> <dd><a href="/privacy?f=footer" rel="nofollow" >隐私政策</a> </dd> <dd><a href="/declaration?f=footer" rel="nofollow" >反商业贿赂声明</a> </dd> </dl> <dl> <dt> <a href="#" rel="">快速入口</a> </dt> <dd><a href="/papi?f=footer" rel="nofollow" >API私有化部署</a> </dd> <dd><a href="/market?f=footer" rel="nofollow" >数据块下载</a> </dd> </dl> </div> <div class="footer-top-right"> <div class="footer-wechat"> <div class="wechat-pic"></div> <div class="wechat-intro"> <p class="wechat-title">关注太阳集团城8722</p> <p class="wechat-text">微信服务号二维码</p> </div> </div> <div class="footer-contact"> <p class="consult-title">售前咨询：<span class="consult-tel">0512-88869195 </span></p> <a class="footer-contact-btn" href="/contact" target="_blank" rel="noopener">联系我们</a> </div> </div> </div> </div> <div class="footer-middle"> <div class="footer-middle__container"> <div class="footer-middle__list clearfix"> <div>热门API：</div> <ul class="footer-middle__list-main clearfix"> <li class="footer-middle__list-main-li"> <a href="/docs/api/id/54" target="_blank" rel="noopener">短信验证码</a> </li> <li class="footer-middle__list-main-li"> <a href="/docs/api/id/103" target="_blank" rel="noopener">身份证实名认证</a> </li> <li class="footer-middle__list-main-li"> <a href="/docs/api/id/213" target="_blank" rel="noopener">银行卡四要素验证</a> </li> <li class="footer-middle__list-main-li"> <a href="/docs/api/id/208" target="_blank" rel="noopener">手机号码实名认证</a> </li> <li class="footer-middle__list-main-li"> <a href="/docs/api/id/248" target="_blank" rel="noopener">手机号使用时长查询</a> </li> <li class="footer-middle__list-main-li"> <a href="/docs/api/id/264" target="_blank" rel="">人脸对比识别接口</a> </li> <li class="footer-middle__list-main-li"> <a href="/docs/api/id/287" target="_blank" rel="">身份证ocr识别</a> </li> <li class="footer-middle__list-main-li"> <a href="/docs/api/id/357" target="_blank" rel="">国际短信验证码</a> </li> <li class="footer-middle__list-main-li"> <a href="/docs/api/id/188" target="_blank" rel="">银行卡二要素验证</a> </li> </ul> </div> <div class="footer-middle__list clearfix"> <div>免费API：</div> <ul class="footer-middle__list-main clearfix"> <li class="footer-middle__list-main-li"> <a href="/docs/api/id/1" target="_blank" rel="">IP地址</a> </li> <li class="footer-middle__list-main-li"> <a href="/docs/api/id/73" target="_blank" rel="">天气预报查询</a> </li> <li class="footer-middle__list-main-li"> <a href="/docs/api/id/235" target="_blank" rel="">新闻API接口</a> </li> <li class="footer-middle__list-main-li"> <a href="/docs/api/id/38" target="_blank" rel="">身份证号码查询</a> </li> <li class="footer-middle__list-main-li"> <a href="/docs/api/id/11" target="_blank" rel="">手机号码归属地查询</a> </li> <li class="footer-middle__list-main-li"> <a href="/docs/api/id/58" target="_blank" rel="">星座运势查询</a> </li> <li class="footer-middle__list-main-li"> <a href="/docs/api/id/29" target="_blank" rel="">股票数据API</a> </li> <li class="footer-middle__list-main-li"> <a href="/docs/api/id/573" target="_blank" rel="">黄金行情API接口</a> </li> </ul> </div> <div class="footer-middle__list clearfix"> <div>API相关：</div> <ul class="footer-middle__list-main clearfix"> <li class="footer-middle__list-main-li"> <a href="/docs/c2?f=flink" target="_blank" rel="noopener">数据服务API</a> </li> <li class="footer-middle__list-main-li"> <a href="/docs/e12?f=flink" target="_blank" rel="noopener">企业API接口</a> </li> <li class="footer-middle__list-main-li"> <a href="/docs/o1?f=flink" target="_blank" rel="noopener">免费接口大全</a> </li> <li class="footer-middle__list-main-li"> <a href="/wiki" target="_blank" rel="noopener">API百科</a> </li> <li class="footer-middle__list-main-li"> <a href="/docs/c4?f=flink" target="_blank" rel="noopener">金融科技API</a> </li> <li class="footer-middle__list-main-li"> <a href="/docs" target="_blank" rel="">API接口大全</a> </li> <li class="footer-middle__list-main-li"> <a href="/news/listview/cid/99" target="_blank" rel="noopener">API资讯</a> </li> <li class="footer-middle__list-main-li"> <a href="/docs/e3?f=flink" target="_blank" rel="noopener">短信接口</a> </li> </ul> </div> </div> </div> <div class="footer-bottom-container"> <div class="footer-bottom clearfix"><div class="footer-bottom-left"><a href="http://www.jsdsgsxt.gov.cn/mbm/entweb/elec/certView.shtml?siteId=301146c087f2499ca507bfa91ab143ec" target="_blank" rel="noopener noreferrer nofollow"> <span class="footer-pic1"></span> </a> <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=32059002001776" target="_blank" rel="noopener noreferrer nofollow"> <span class="footer-pic2"></span> <span>苏公网安备 32059002001776号</span> </a> <a class="footer-icp" href="https://beian.miit.gov.cn" target="_blank" rel="noopener noreferrer nofollow"> <span>苏ICP备14006450号-3</span> </a> <a class="footer-icp" href="https://juhe.oss-cn-hangzhou.aliyuncs.com/Businesslicense.png" target="_blank" rel="noopener noreferrer nofollow"> <span>营业执照</span> </a></div><div class="footer-bottom-right"><span>天聚地合（苏州）科技股份有限公司©版权所有</span></div></div> </div> </footer> <!-- 尾部footer区域 结束 --> <a class="activity-fixed-link" id="activity-fixed-link" href="" target="_blank" rel="noopener"><img src="" class="activity-fixed-img" id="activity-fixed-img" /></a> <div class="contact-fixed" id="contact-fixed"> <div class="contact-phone"> <a class="contact-phone-a" href="/contact" target="_blank" rel="noopener"></a> <span class="contact-phone-span help-contact-phone"> 0512-88869195 </span> </div> <a class="contact-requirement" href="/requirement" target="_blank" rel="noopener"></a> </div> <div class="mobile-get-top"></div> <script> var jhct_theme = "default"; window.addEventListener('load', function() { // // 不是移动端，加载太阳集团城8722Chat // if (!isMobileNotPc()) { // initJuheChat() // } // 判断是否是小程序，小程序的话不显示联系信息，showContact = false isWechatMiniProgram() if (showContact) { if (isMobileNotPc()) { if (showMoblieTelContact) { initQiDianMobile(); // document.write('<script id="qd3009074039017639640d7f9f4b7ae4c8dc57a16f26" src="https://wp.qiye.qq.com/qidian/3009074039/017639640d7f9f4b7ae4c8dc57a16f26" charset="utf-8" async defer ><\/script>') document.getElementById('contact-fixed').style.display = 'block'; } } else { initQiDianPc() // document.write('<script id="qd30090740392abf5cbfda639a151410f4f6efa9f057" src="https://wp.qiye.qq.com/qidian/3009074039/2abf5cbfda639a151410f4f6efa9f057?v=1" charset="utf-8" async defer><\/script>') document.getElementById('contact-fixed').style.display = 'block'; } // 获取活动宣传图 getFixActivityImg() } }); // 初始化太阳集团城8722Chat function initJuheChat() { var jhct = document.createElement("script"); jhct.src = "//statics.juhe.cn/chat/quick/juhechat.quick.js?v=1.2"; jhct.async = true; document.body.appendChild(jhct) } // 初始化起点PC版 function initQiDianPc() { var qidian = document.createElement("script"); qidian.src = "https://wp.qiye.qq.com/qidian/3009074039/2abf5cbfda639a151410f4f6efa9f057?v=1"; qidian.id = 'qd30090740392abf5cbfda639a151410f4f6efa9f057' qidian.async = true; document.body.appendChild(qidian) } // 初始化起点移动端 function initQiDianMobile() { var qidian = document.createElement("script"); qidian.src = "https://wp.qiye.qq.com/qidian/3009074039/017639640d7f9f4b7ae4c8dc57a16f26"; qidian.id = 'qd3009074039017639640d7f9f4b7ae4c8dc57a16f26' qidian.async = true; document.body.appendChild(qidian) } function isMobileNotPc() { var check = false; (function(a) { if (/(android|ipad|playbook|silk|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i .test(a.substr(0, 4))) check = true })(navigator.userAgent || navigator.vendor || window.opera); return check; }; // 检测微信小程序环境 function isWechatMiniProgram() { let isMiniProgram = false; // 方法 1：检测微信全局变量（忽略类型错误） try { // @ts-ignore isMiniProgram = window.__wxjs_environment === 'miniprogram'; } catch (e) { console.warn('微信环境变量检测失败', e); } // 方法 2：UserAgent 检测（兜底） if (!isMiniProgram) { isMiniProgram = navigator.userAgent.toLowerCase().indexOf('miniprogram') > -1; } showContact = !isMiniProgram; console.log('是否在微信小程序中：', isMiniProgram); } // 获取 右下角固定活动宣传图 function getFixActivityImg() { fetch('/pub/banner/27') .then(response => response.json()) .then(res => { if (res.code == 0 && res.result) { var nowTime = Date.now(); var ban = res.result; if (ban) { ban.forEach(function(value) { if (value.isshow == 1) { if (value.limittime == 0 || (value.limittime == 1 && (new Date(value.starttime.replace(/-/g, '/')).getTime() < nowTime && new Date(value.endtime.replace(/-/g, '/')).getTime() > nowTime))) { document.getElementById('activity-fixed-img').src = value.img; var activityFixedLink = document.getElementById('activity-fixed-link'); activityFixedLink.href = value.href; activityFixedLink.rel = value.link_rel; activityFixedLink.target = value.target; activityFixedLink.style.display = 'block'; } } }); } } }) .catch(error => console.error('Error:', error)); } </script> <!--[if lt IE 9]> <div id="ieMsg-div" style="background:rgba(26,138,250,1);text-align:center;color:#fff; padding: 30px; position: fixed; bottom:0; left: 0; right:0; z-index:1111;"> <p style="font-size:20px">为了更好的体验，请使用谷歌，火狐，360或高于IE8的浏览器。</p> <span id="close-IEtest" style="position: absolute; right: 20px; top:8px; color: #f6f6f6; font-size: 20px; font-weight: bold; cursor:pointer;">×</span> </div> <script> var closeIE = document.getElementById('close-IEtest'); var IEmsgDiv = document.getElementById('ieMsg-div'); closeIE.onclick = function() { IEmsgDiv.style.display = 'none' } </script><![endif]--> <script src="https://main-statics.juhe.cn/jquery/jquery.min.js" type="text/javascript" charset="utf-8"></script> <script src="https://main-statics.juhe.cn/jquery/jquery.form.min.js" type="text/javascript" charset="utf-8"></script> <script src="https://main-statics.juhe.cn/layer/layer.js?1.4" type="text/javascript" charset="utf-8"></script> <script src="https://main-statics.juhe.cn/jquery/jquery.cookie.js" type="text/javascript"></script> <script> var regStart = '2021-06-21 00:00:00'; var sTime = Math.ceil(new Date().getTime() / 10); var dashboardUrl = "https://dashboard.juhe.cn"; var dashboardHome = "https://dashboard.juhe.cn/home"; var denyQue; if (!denyQue) { denyQue = window.setInterval(function() { var msg = ''; var salt = $.cookie('jh-dtaf4a8u96q0iiqsba9g8a'); if (salt == 4) { msg = '账户已被禁用，如有疑问请联系客服'; } else if (salt == 99) { msg = '账户已被注销，如有疑问请联系客服'; } if (msg != '') { window.clearInterval(denyQue); layer.msg(msg, { icon: 0, time: 5000, shade: 0.3, shadeClose: true }, function() { location.href = '/logout'; }); $.cookie('jh-dtaf4a8u96q0iiqsba9g8a', 0, { path: '/', domain: '.juhe.cn' }); } }, 1000); } </script><script src="/js/v11/headerFooter/header.min.js?v=12.1.394"></script> <script src="https://main-statics.juhe.cn/t/2644843/5e80d506e92b725c/iconfont.js" type="text/javascript"></script> <script src="/js/common/common.min.js?v=12.1.39"></script> <script src="https://main-statics.juhe.cn/jquery/jquery.jh.js?v=12.1.39" type="text/javascript"></script> <script src="/js/v10/headerFooter/setCss.min.js?v=12.1.39"></script> <script src="/js/common/registerPop.min.js?v=12.1.393" type="text/javascript"></script> <script type="text/javascript"> var siteHost = ""; var _token = "0gth09bu8jQALS8NR98ZmnQdpKNsFQkokj83RxPx"; if (typeof jsQueryRef === 'function') { setTimeout(jsQueryRef, 300) } </script> <!-- m端footer 注册and登录模块 开始 --> <link rel="stylesheet" href="/css/v7/headerFooter/mobileFooterRegLog.css?v=12.1.39"> <div class="m-rigister register"> <div class="register-main"> <div class="register-name">数 据 驱 动 未 来</div> <div class="register-tip clearfix"> <span>Data</span> <span class="line"></span> <span>Drives</span> <span class="line"></span> <span>The</span> <span class="line"></span> <span>Future</span> </div> <div class="register-link"> <a href="/register" rel="noopener">立即注册</a> </div> </div> </div> <!-- m端footer 注册and登录模块 结束 --> <!-- 移动端footer 开始 --> <div class="mobile-footer"> <div class="mobile-footer__phone"> <a href="tel:0512-88869195 "> 售前咨询：0512-88869195 </a> </div> <div class="mobile-footer__copyright">天聚地合（苏州）科技股份有限公司©版权所有</div> <div class="mobile-footer__permit">增值电信业务经营许可证：苏B2-20140496   苏ICP备14006450号-3</div> <div class="mobile-footer__record"> <img src="https://img.juhe.cn/www/v10/footer/mobile-footer__record01.png" alt="" loading="lazy"> <img src="https://img.juhe.cn/www/v10/footer/mobile-footer__record02.png" alt="" loading="lazy"> <span>苏公网安备 32059002001776号</span> </div> </div> <!-- 移动端footer 结束 --> <script src="/js/v6/news/highlightjs.js?v=12.1.39" type="text/javascript" charset="utf-8"></script> <script src="/js/v11/headerFooter/mobileHeader.min.js?v=12.1.39"></script> <script type="text/javascript"> hljs.initHighlightingOnLoad(); </script> <script src="/js/common/banner.min.js?v=12.1.39"></script> <script src="/js/v10/news/details.min.js?v=12.1.392"></script> <script type="application/ld+json"> { "@context": "https://ziyuan.baidu.com/contexts/cambrian.jsonld", "@id": "/news/index/id/9956", "appid": "1688676197304614", "title": "什么是form表单 form表单的基本语法和常见属性 form表单的使用方法_澳门太阳集团城网址8722 - 天聚地合", "images": [], "description": "在现代Web开发中，表单（Form）是用户与网站交互的重要桥梁。无论是注册登录、问卷调查还是在线购物，表单都扮演着收集用户输入信息的关键角色。HTML中的<form>标签为开发者提供了强大的工具，用以构建各种类型的表单。本文将详细介绍什么是Form表单，其基本语法和常见属性，以及如何正确地使用表单来实现功能需求。", "pubDate": "2025-03-19T14:37:58", "upDate": "2025-03-19T14:37:58" } </script> <script> var params = {}; (function () { params.pageType = getMetaAttributes('view-path-attr', 'pageType', ''); params.did = getMetaAttributes('dataId', 'did', 0); params.cid = getMetaAttributes('dataId', 'cid', ''); params.username = getCookie('_f91834e654f46d9ed5afc3c0d') || ''; var ma = document.createElement('script'); ma.type = 'text/javascript'; ma.async = true; ma.src = 'https://analytics.juhe.cn/in.js?v=12.1.39'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ma, s); })(); </script> <!-- 百度统计 start--> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "//hm.baidu.com/hm.js?5d12e2b4eed3b554ae941c0ac43c330a"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <!-- 百度统计 end--> <!-- juhe pv start--> <script type="text/javascript"> var jhLogs = { agent: 'PC', sign: Math.ceil(new Date().getTime() / 10) }; var svs = "12.1.39"; (function() { var jhpv = document.createElement("script"); jhpv.src = "https://main-statics.juhe.cn/jquery/jquery.pv.js?v=" + svs; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(jhpv, s); })(); </script> <!-- juhe pv end--> <script> window.addEventListener('load', function() { // 初始化谷歌统计 initGoogle(); initClarity(window, document, "clarity", "script", "bnge4v9t4y"); }) // 谷歌统计 function initGoogle() { var google = document.createElement("script"); google.src = "https://www.googletagmanager.com/gtag/js?id=G-V6SP4PZ234"; google.async = true; document.body.appendChild(google) window.dataLayer = window.dataLayer || []; gtag('js', new Date()); gtag('config', 'G-V6SP4PZ234'); } // 微软统计 // (window, document, "clarity", "script", "bnge4v9t4y") function initClarity(c, l, a, r, i) { c[a] = c[a] || function() { (c[a].q = c[a].q || []).push(arguments) }; var clarity = document.createElement("script"); clarity.async = true; clarity.src = "https://www.clarity.ms/tag/" + i; document.body.appendChild(clarity); } function gtag() { dataLayer.push(arguments); } </script> </body><div style="clear:both;padding:10px;text-align:center;margin:5"><a href="/sitemap.xml" target="_blank">XML 地图</a> </html>