前端—表单标签

1. 表单的介绍

表单用于搜集不同类型的用户输入(用户输入的数据)，然后可以把用户数据提交到web服务器 。

2. 表单相关标签的使用

1. 标签 表示表单标签，定义整体的表单区域

2. 标签 表示表单元素的文字标注标签，定义文字标注

3. 标签 表示表单元素的用户输入标签，定义不同类型的用户输入数据方式

   • type属性
     • type=”text” 定义单行文本输入框
     • type=”password” 定义密码输入框
     • type=”radio” 定义单选框
     • type=”checkbox” 定义复选框
     • type=”file” 定义上传文件
     • type=”submit” 定义提交按钮
     • type=”reset” 定义重置按钮
     • type=”button” 定义一个普通按钮

4. </code>标签 表示表单元素的多行文本输入框标签 定义多行文本输入框</p></li><li><p><code></code>标签 表示表单元素的下拉列表标签 定义下拉列表</p><ul><li><code></code>标签 与<code></code>标签配合，定义下拉列表中的选项</li></ul></li></ol><p><strong>示例代码:</strong></p><pre><code class="language-html"><p><label>姓名：</label></p><p><label>密码：</label></p><p><label>性别：</label> 男 女</p><p><label>爱好：</label> 唱歌 跑步 游泳</p><p><label>照片：</label></p><p><label>个人描述：</label><textarea>

   籍贯：北京上海广州深圳

   3. 小结

   • 表单标签是标签
   • 常用的表单元素标签有:、、</code>、<code></code>等标签</li></ul></article></div><div class="related-posts"><h2 class="related-posts-title"><i class="fab fa-hive me-1"></i>相关文章</h2><div class="row g-2 g-md-3 row-cols-2 row-cols-md-3 row-cols-lg-4"><div class="col"><article class="post-item item-grid"><div class="tips-badge position-absolute top-0 start-0 z-1 m-2"></div><div class="entry-media ratio ratio-3x2"> <a target="" class="media-img lazy bg-cover bg-center" href="https://www.maxssl.com/article/23588/" title="AVFoundation – 音视频组合编辑" data-bg="/wp-content/themes/ripro-v5/assets/img/thumb.jpg"> </a></div><div class="entry-wrapper"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/23588/" title="AVFoundation – 音视频组合编辑">AVFoundation – 音视频组合编辑</a></h2></div></article></div><div class="col"><article class="post-item item-grid"><div class="tips-badge position-absolute top-0 start-0 z-1 m-2"></div><div class="entry-media ratio ratio-3x2"> <a target="" class="media-img lazy bg-cover bg-center" href="https://www.maxssl.com/article/23668/" title="CCF-CSP真题《202305-2 矩阵运算》思路+python，c++满分题解" data-bg="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/09141dcd0b5540fbb62f5b640ad88fd6.png"> </a></div><div class="entry-wrapper"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/23668/" title="CCF-CSP真题《202305-2 矩阵运算》思路+python，c++满分题解">CCF-CSP真题《202305-2 矩阵运算》思路+python，c++满分题解</a></h2></div></article></div><div class="col"><article class="post-item item-grid"><div class="tips-badge position-absolute top-0 start-0 z-1 m-2"></div><div class="entry-media ratio ratio-3x2"> <a target="" class="media-img lazy bg-cover bg-center" href="https://www.maxssl.com/article/38428/" title="【UniApp】-uni-app-pinia存储数据" data-bg="https://img.maxssl.com/uploads/?url=https://img2023.cnblogs.com/blog/2105804/202311/2105804-20231129232539490-1458223711.png"> </a></div><div class="entry-wrapper"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/38428/" title="【UniApp】-uni-app-pinia存储数据">【UniApp】-uni-app-pinia存储数据</a></h2></div></article></div><div class="col"><article class="post-item item-grid"><div class="tips-badge position-absolute top-0 start-0 z-1 m-2"></div><div class="entry-media ratio ratio-3x2"> <a target="" class="media-img lazy bg-cover bg-center" href="https://www.maxssl.com/article/32760/" title="【华为OD机试AB高分必刷题目】小华的数字排序（C++-Timsort 算法实现）" data-bg="/wp-content/themes/ripro-v5/assets/img/thumb.jpg"> </a></div><div class="entry-wrapper"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/32760/" title="【华为OD机试AB高分必刷题目】小华的数字排序（C++-Timsort 算法实现）">【华为OD机试AB高分必刷题目】小华的数字排序（C++-Timsort 算法实现）</a></h2></div></article></div><div class="col"><article class="post-item item-grid"><div class="tips-badge position-absolute top-0 start-0 z-1 m-2"></div><div class="entry-media ratio ratio-3x2"> <a target="" class="media-img lazy bg-cover bg-center" href="https://www.maxssl.com/article/43664/" title="【已解决】mmcv/_ext.cpython-37m-x86_64-linux-gnu.so: undefined symbol: _ZN6caffe28TypeMeta21_typeMetaData" data-bg="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/b5d756aab880479c88e4144b488e57da.png"> </a></div><div class="entry-wrapper"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/43664/" title="【已解决】mmcv/_ext.cpython-37m-x86_64-linux-gnu.so: undefined symbol: _ZN6caffe28TypeMeta21_typeMetaData">【已解决】mmcv/_ext.cpython-37m-x86_64-linux-gnu.so: undefined symbol: _ZN6caffe28TypeMeta21_typeMetaData</a></h2></div></article></div><div class="col"><article class="post-item item-grid"><div class="tips-badge position-absolute top-0 start-0 z-1 m-2"></div><div class="entry-media ratio ratio-3x2"> <a target="" class="media-img lazy bg-cover bg-center" href="https://www.maxssl.com/article/46533/" title="[HTML]Web前端开发技术13（HTML5、CSS3、JavaScript ）横向二级导航菜单 Web页面设计实例——喵喵画网页" data-bg="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/direct/41ec6db3b9834eb784f4e863f5e766da.png"> </a></div><div class="entry-wrapper"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/46533/" title="[HTML]Web前端开发技术13（HTML5、CSS3、JavaScript ）横向二级导航菜单 Web页面设计实例——喵喵画网页">[HTML]Web前端开发技术13（HTML5、CSS3、JavaScript ）横向二级导航菜单 Web页面设计实例——喵喵画网页</a></h2></div></article></div><div class="col"><article class="post-item item-grid"><div class="tips-badge position-absolute top-0 start-0 z-1 m-2"></div><div class="entry-media ratio ratio-3x2"> <a target="" class="media-img lazy bg-cover bg-center" href="https://www.maxssl.com/article/2238/" title="大规模数据如何实现数据的高效追溯？" data-bg="https://img.maxssl.com/uploads/?url=https://pic4.zhimg.com/80/v2-a1bb673f9bfd4092001474a87124a4bb_720w.jpg"> </a></div><div class="entry-wrapper"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/2238/" title="大规模数据如何实现数据的高效追溯？">大规模数据如何实现数据的高效追溯？</a></h2></div></article></div><div class="col"><article class="post-item item-grid"><div class="tips-badge position-absolute top-0 start-0 z-1 m-2"></div><div class="entry-media ratio ratio-3x2"> <a target="" class="media-img lazy bg-cover bg-center" href="https://www.maxssl.com/article/22544/" title="【调制解调】SSB 单边带调幅" data-bg="https://img.maxssl.com/uploads/?url=https://img-blog-young.oss-cn-qingdao.aliyuncs.com/img/202307102309356.png!cnblogs_watermark"> </a></div><div class="entry-wrapper"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/22544/" title="【调制解调】SSB 单边带调幅">【调制解调】SSB 单边带调幅</a></h2></div></article></div></div></div></div><div class="sidebar-wrapper col-md-12 col-lg-3 h-100" data-sticky><div class="sidebar"><div id="recent-posts-4" class="widget widget_recent_entries"><h5 class="widget-title">最新关注</h5><ul><li> <a href="https://www.maxssl.com/article/57859/">【MySQL】InnoDB存储引擎</a></li><li> <a href="https://www.maxssl.com/article/57858/">DB-GPT：强强联合Langchain-Vicuna的应用实战开源项目，彻底改变与数据库的交互方式</a></li><li> <a href="https://www.maxssl.com/article/57857/">TigerBeetle：世界上最快的会计数据库</a></li><li> <a href="https://www.maxssl.com/article/57856/">【SQL server】玩转SQL server数据库：第三章 关系数据库标准语言SQL（二）数据查询</a></li><li> <a href="https://www.maxssl.com/article/57855/">马斯克400条聊天记录被法院公开，原来推特收购是在短信上谈崩的</a></li><li> <a href="https://www.maxssl.com/article/57854/">戏精摩根大通：从唱空比特币到牵手贝莱德</a></li></ul></div><div id="ri_sidebar_posts_widget-2" class="widget sidebar-posts-list"><h5 class="widget-title">热文推荐</h5><div class="row g-3 row-cols-1"><div class="col"><article class="post-item item-list"><div class="entry-media ratio ratio-3x2 col-auto"> <a target="" class="media-img lazy" href="https://www.maxssl.com/article/31061/" title="Windows Server 2019 搭建FTP站点" data-bg="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/a095c99e88eb4786ac890667bd9614c1.png"></a></div><div class="entry-wrapper"><div class="entry-body"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/31061/" title="Windows Server 2019 搭建FTP站点">Windows Server 2019 搭建FTP站点</a></h2></div></div></article></div><div class="col"><article class="post-item item-list"><div class="entry-media ratio ratio-3x2 col-auto"> <a target="" class="media-img lazy" href="https://www.maxssl.com/article/54691/" title="【具身智能评估8】BEHAVIOR-1K: A Benchmark for Embodied AI with 1,000 Everyday Activities and …" data-bg="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/direct/b485a14272724045976c3d3ae5d082d8.png"></a></div><div class="entry-wrapper"><div class="entry-body"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/54691/" title="【具身智能评估8】BEHAVIOR-1K: A Benchmark for Embodied AI with 1,000 Everyday Activities and …">【具身智能评估8】BEHAVIOR-1K: A Benchmark for Embodied AI with 1,000 Everyday Activities and …</a></h2></div></div></article></div><div class="col"><article class="post-item item-list"><div class="entry-media ratio ratio-3x2 col-auto"> <a target="" class="media-img lazy" href="https://www.maxssl.com/article/13547/" title="Go中的有限状态机FSM的详细介绍" data-bg="https://img.maxssl.com/uploads/?url=https://img2023.cnblogs.com/blog/2280011/202304/2280011-20230424232120793-1589808685.png"></a></div><div class="entry-wrapper"><div class="entry-body"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/13547/" title="Go中的有限状态机FSM的详细介绍">Go中的有限状态机FSM的详细介绍</a></h2></div></div></article></div><div class="col"><article class="post-item item-list"><div class="entry-media ratio ratio-3x2 col-auto"> <a target="" class="media-img lazy" href="https://www.maxssl.com/article/7211/" title="用chatgpt写insar地质灾害的论文，重复率只有1.8%，chatgpt4.0写论文不是梦" data-bg="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/d6c9ea11fc6b4f5bb2b66d706254cdf9.png"></a></div><div class="entry-wrapper"><div class="entry-body"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/7211/" title="用chatgpt写insar地质灾害的论文，重复率只有1.8%，chatgpt4.0写论文不是梦">用chatgpt写insar地质灾害的论文，重复率只有1.8%，chatgpt4.0写论文不是梦</a></h2></div></div></article></div><div class="col"><article class="post-item item-list"><div class="entry-media ratio ratio-3x2 col-auto"> <a target="" class="media-img lazy" href="https://www.maxssl.com/article/6039/" title="跳跃表数据结构与算法分析" data-bg="https://img.maxssl.com/uploads/?url=https://oscimg.oschina.net/oscnet/up-4380db2d43d5a82b129493dfffe9935d18a.png"></a></div><div class="entry-wrapper"><div class="entry-body"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/6039/" title="跳跃表数据结构与算法分析">跳跃表数据结构与算法分析</a></h2></div></div></article></div><div class="col"><article class="post-item item-list"><div class="entry-media ratio ratio-3x2 col-auto"> <a target="" class="media-img lazy" href="https://www.maxssl.com/article/53571/" title="DBeaver执行外部sql文件" data-bg="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/9c7e7bcab87841cc8ff5d748b6dcda24.png"></a></div><div class="entry-wrapper"><div class="entry-body"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/53571/" title="DBeaver执行外部sql文件">DBeaver执行外部sql文件</a></h2></div></div></article></div></div></div></div></div></div></div></main><footer class="site-footer py-md-4 py-2 mt-2 mt-md-4"><div class="container"><div class="text-center small w-100"><div>Copyright © <script>today=new Date();document.write(today.getFullYear());</script> maxssl.com 版权所有 <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow noopener">浙ICP备2022011180号</a></div><div class=""><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7656930379472324" crossorigin="anonymous"></script></div></div></div></footer><div class="rollbar"><ul class="actions"><li><a target="" href="https://www.maxssl.com/" rel="nofollow noopener noreferrer"><i class="fas fa-home"></i><span></span></a></li><li><a target="" href="http://wpa.qq.com/msgrd?v=3&uin=6666666&site=qq&menu=yes" rel="nofollow noopener noreferrer"><i class="fab fa-qq"></i><span></span></a></li></ul></div><div class="back-top"><i class="fas fa-caret-up"></i></div><div class="dimmer"></div><div class="off-canvas"><div class="canvas-close"><i class="fas fa-times"></i></div><div class="logo-wrapper"> <a class="logo text" href="https://www.maxssl.com/">MaxSSL</a></div><div class="mobile-menu d-block d-lg-none"></div></div> <script></script><noscript><style>.lazyload{display:none}</style></noscript><script data-noptimize="1">window.lazySizesConfig=window.lazySizesConfig||{};window.lazySizesConfig.loadMode=1;</script><script async data-noptimize="1" src='https://www.maxssl.com/wp-content/plugins/autoptimize/classes/external/js/lazysizes.min.js'></script><script src='//cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js' id='jquery-js'></script> <script src='//cdn.bootcdn.net/ajax/libs/highlight.js/11.7.0/highlight.min.js' id='highlight-js'></script> <script src='https://www.maxssl.com/wp-content/themes/ripro-v5/assets/js/vendor.min.js' id='vendor-js'></script> <script id='main-js-extra'>var zb={"home_url":"https:\/\/www.maxssl.com","ajax_url":"https:\/\/www.maxssl.com\/wp-admin\/admin-ajax.php","theme_url":"https:\/\/www.maxssl.com\/wp-content\/themes\/ripro-v5","singular_id":"40544","post_content_nav":"0","site_notify_auto":"0","current_user_id":"0","ajax_nonce":"fc04a3d279","gettext":{"__copypwd":"\u5bc6\u7801\u5df2\u590d\u5236\u526a\u8d34\u677f","__copybtn":"\u590d\u5236","__copy_succes":"\u590d\u5236\u6210\u529f","__comment_be":"\u63d0\u4ea4\u4e2d...","__comment_succes":"\u8bc4\u8bba\u6210\u529f","__comment_succes_n":"\u8bc4\u8bba\u6210\u529f\uff0c\u5373\u5c06\u5237\u65b0\u9875\u9762","__buy_be_n":"\u8bf7\u6c42\u652f\u4ed8\u4e2d\u00b7\u00b7\u00b7","__buy_no_n":"\u652f\u4ed8\u5df2\u53d6\u6d88","__is_delete_n":"\u786e\u5b9a\u5220\u9664\u6b64\u8bb0\u5f55\uff1f"}};</script> <script src='https://www.maxssl.com/wp-content/themes/ripro-v5/assets/js/main.min.js' id='main-js'></script> </body></html>