您的位置：鳄鱼CMS > html表单标签有哪些 HTML 表单标签
html表单标签有哪些 HTML 表单标签

2023-04-02 05:31 HTML教程
html表单标签有哪些

HTML表单标签是用来创建用户可以输入数据的表单，它们可以用来收集用户的信息，例如注册表单、购物车等。HTML表单标签包括：
1.  标签：它是一个容器标签，用于将所有其他表单元素包含在其中。
2.  标签：它是一个输入字段，可以由用户输入文本、数字、日期、文件等。
3.  标签：它是一个多行文本输入字段，可以由用户输入多行文本。
4. <select> 标签：它是一个下拉列表字段，可以显示一个列表供用户选择。
5. <button> 标签：它是一个提交/重置/弹出对话框的按钮。
6. <label> 标签：它是一个标注字段的标题/说明性文字。 
7. <fieldset> 标签：它是一个分隔块栏位，将相关的字段分隔开来。 
8. <legend> 标签：它是 fieldset 元素的标题/说明性文字。 
9. <optgroup> 标签 ： 它是 select 元 素 的 分 组 选 项 ， 将 相 关 选 项 分 组 。 
10. <datalist> 标签 ： 它 是 一 个 联 机 补 充 表 单 ， 由 用 户 进 行 补 充 信 息 。  
</pre></p><h2>HTML 表单标签</h2>
<div class="content-intro view-box "><div class="row"><div class="col-lg-12"><h2 trans_replace="0" trans="1">HTML表单标签</h2><p trans_replace="0" trans="1"><code> label </code>元素为表单中的每个元素提供了一些上下文。它有局部属性:<code> for，form </code>。</p><h2 id="Example" trans_replace="0" trans="1">例子</h2><p trans_replace="0" trans="1">以下代码显示了如何为用户提供一些上下文。</p><div class="codeDiv"><pre><code><!DOCTYPE HTML>
<html>
<body>
  <form method="post" action="http://example.com/form">
    <p>
      <label for="fave">Fruit: <input id="fave" name="fave" /></label>
    </p>
    <p>
      <label for="name">Name: <input id="name" name="name" /></label>
    </p>
    <button>Submit Vote</button>
  </form>
</body>
</html></code></pre></div><h2 id="Note" trans_replace="0" trans="1">注意</h2><p trans_replace="0" trans="1"><span><code>id</code><span><span></span></span>属性添加到输入元素，标签使用这些id作为标签元素上<code>for</code><span><span></span></span><span></span>属性的值。<span>这就是如何将标签与输入相关联，这使得屏幕阅读器和其他技术的处理表格更加简单。</span></span></p></div></div></div>
</div>
<div class="readall_box">
<div class="read_more_mask"></div>
<div class="show-content"><span>阅读全文</span></div>
</div>
</div>
</div>
<div class="bgfff p20 mt20 co999 f14 l-25">
<div>
以上是<a title="鳄鱼CMS" href="https://www.eyucms.com/">鳄鱼CMS</a>为你收集整理的<a href="https://www.eyucms.com/8789.html">html表单标签有哪些 HTML 表单标签</a>全部内容。
</div>
<div></div>
<div>
声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。
</div>
</div>
<div class="bwrap-la  bgfff p20 mt20">
<div class="bwrap-t mb20 hlo-18 fb16">
相关文章
</div>
<ul >
<li>
<div class="fl mr20 ">
<a href="https://www.eyucms.com/8763.html"  title="html资源网 HTML 资源链接"><img class="br5 b-se6" src = 'https://www.eyucms.com/style/loadgif.gif'  lay-src="https://www.eyucms.com/imgurl/1876.png"  alt="html资源网 HTML 资源链接"></a> 
</div>
<div>
<h2 class="mb10 l-20"><a href="https://www.eyucms.com/8763.html"  title="html资源网 HTML 资源链接">html资源网 HTML 资源链接</a></h2>
<div class="mb10 co999"><i class="icon icon-time-circle f14  ml50 dn"></i> <span class="f12 dn">2023-05-06</span> 
<i class="icon icon-number f14  "></i><span class="f12">
 
<a class="mr10"  title="HTML教程" href="https://www.eyucms.com/htmljc/">HTML教程</a>
</span>
</div>
<p class="co666 hlo-20 intro">HTML资源链接 link 元素在HTML文档和之间创建关系外部资源，CSS样式表或Javascript文件。 link 元素具有局部属性: href，rel，hr...</p>
</div>
</li><li>
<div class="fl mr20 ">
<a href="https://www.eyucms.com/8755.html"  title="html测验题 HTML 测验"><img class="br5 b-se6" src = 'https://www.eyucms.com/style/loadgif.gif'  lay-src="https://www.eyucms.com/imgurl/1875.png"  alt="html测验题 HTML 测验"></a> 
</div>
<div>
<h2 class="mb10 l-20"><a href="https://www.eyucms.com/8755.html"  title="html测验题 HTML 测验">html测验题 HTML 测验</a></h2>
<div class="mb10 co999"><i class="icon icon-time-circle f14  ml50 dn"></i> <span class="f12 dn">2023-03-25</span> 
<i class="icon icon-number f14  "></i><span class="f12">
 
<a class="mr10"  title="HTML教程" href="https://www.eyucms.com/htmljc/">HTML教程</a>
</span>
</div>
<p class="co666 hlo-20 intro">您可以通过的测验程序来测试您的 HTML 技能。关于本测验本测验包含 20 道题，每道题的最长答题时间是 20 分钟（这是由于每个 ses...</p>
</div>
</li><li>
<div class="fl mr20 ">
<a href="https://www.eyucms.com/8747.html"  title="html表单文本域代码 HTML 表单文本域"><img class="br5 b-se6" src = 'https://www.eyucms.com/style/loadgif.gif'  lay-src="https://www.eyucms.com/imgurl/1874.png"  alt="html表单文本域代码 HTML 表单文本域"></a> 
</div>
<div>
<h2 class="mb10 l-20"><a href="https://www.eyucms.com/8747.html"  title="html表单文本域代码 HTML 表单文本域">html表单文本域代码 HTML 表单文本域</a></h2>
<div class="mb10 co999"><i class="icon icon-time-circle f14  ml50 dn"></i> <span class="f12 dn">2023-03-19</span> 
<i class="icon icon-number f14  "></i><span class="f12">
 
<a class="mr10"  title="HTML教程" href="https://www.eyucms.com/htmljc/">HTML教程</a>
</span>
</div>
<p class="co666 hlo-20 intro">HTML表单文本域使用场景：当用户输入内容较多的情况下,我们就不能使用文本框表单了，此时我们可以使用textarea标签。在表单元素...</p>
</div>
</li><li>
<div class="fl mr20 ">
<a href="https://www.eyucms.com/8730.html"  title="vscodehtml插件 HTML 插件"><img class="br5 b-se6" src = 'https://www.eyucms.com/style/loadgif.gif'  lay-src="https://www.eyucms.com/imgurl/1873.png"  alt="vscodehtml插件 HTML 插件"></a> 
</div>
<div>
<h2 class="mb10 l-20"><a href="https://www.eyucms.com/8730.html"  title="vscodehtml插件 HTML 插件">vscodehtml插件 HTML 插件</a></h2>
<div class="mb10 co999"><i class="icon icon-time-circle f14  ml50 dn"></i> <span class="f12 dn">2023-03-29</span> 
<i class="icon icon-number f14  "></i><span class="f12">
 
<a class="mr10"  title="HTML教程" href="https://www.eyucms.com/htmljc/">HTML教程</a>
</span>
</div>
<p class="co666 hlo-20 intro">HTML插件 插件的功能是扩展 HTML 浏览器的功能。 HTML 助手（插件） 辅助应用程序（helper application）是可由浏览器启动的程序...</p>
</div>
</li><li>
<div class="fl mr20 ">
<a href="https://www.eyucms.com/8723.html"  title="Htmliframe登鹳雀楼怎么做 HTML iframe"><img class="br5 b-se6" src = 'https://www.eyucms.com/style/loadgif.gif'  lay-src="https://www.eyucms.com/imgurl/1872.png"  alt="Htmliframe登鹳雀楼怎么做 HTML iframe"></a> 
</div>
<div>
<h2 class="mb10 l-20"><a href="https://www.eyucms.com/8723.html"  title="Htmliframe登鹳雀楼怎么做 HTML iframe">Htmliframe登鹳雀楼怎么做 HTML iframe</a></h2>
<div class="mb10 co999"><i class="icon icon-time-circle f14  ml50 dn"></i> <span class="f12 dn">2023-03-22</span> 
<i class="icon icon-number f14  "></i><span class="f12">
 
<a class="mr10"  title="HTML教程" href="https://www.eyucms.com/htmljc/">HTML教程</a>
</span>
</div>
<p class="co666 hlo-20 intro">HTML iframe iframe 元素在现有元素中嵌入另一个HTML文档。它有局部属性: src，srcdoc，name，width，height，sandbox，seamless...</p>
</div>
</li></ul>
</div>
</div>
<div class="bwrap-r  ">
<div class="bwrap-ra bgfff p20 ">
<div class="bwrap-t mb20 hlo-18 fb16">
猜您喜欢
</div>
<ul class="mt10">
</ul>
</div>
<div class="bwrap-ras">
<div class="bwrap-rb bgfff p20 mt20">
<div class="bwrap-t mb20 hlo-18 fb16">
标签TAG
</div>
<ul>
<a href="https://www.eyucms.com/cw41/"  title="Hadoop教程">Hadoop教程</a>
<a href="https://www.eyucms.com/javajc/"  title="Java教程">Java教程</a>
<a href="https://www.eyucms.com/variance/"  title="VARIANCE">VARIANCE</a>
<a href="https://www.eyucms.com/ay18/"  title="JavaScript教程">JavaScript教程</a>
<a href="https://www.eyucms.com/xmljcgd/"  title="XML教程">XML教程</a>
<a href="https://www.eyucms.com/rjgcjc/"  title="软件工程教程">软件工程教程</a>
<a href="https://www.eyucms.com/angular13/"  title="Angular13">Angular13</a>
<a href="https://www.eyucms.com/vo36/"  title="ApachePig教程">ApachePig教程</a>
<a href="https://www.eyucms.com/htmljc/"  title="HTML教程">HTML教程</a>
<a href="https://www.eyucms.com/cjiaocheng/"  title="C++教程">C++教程</a>
</ul>
</div>
<div class="bwrap-ra bgfff p20 mt20">
<div class="bwrap-t mb20 hlo-18 fb16">
本月热门
</div>
<ul class="mt10">
<li>
<a href="https://www.eyucms.com/18828.html"  title="excel坐标轴分段 y坐标轴分割区域的样式设置">excel坐标轴分段 y坐标轴分割区域的样式设置</a>
</li>
<li>
<a href="https://www.eyucms.com/2357.html"  title="java 文件属性 Java 文件属性">java 文件属性 Java 文件属性</a>
</li>
<li>
<a href="https://www.eyucms.com/17765.html"  title="鸿蒙系统如何创建大文件夹 鸿蒙OS 创建Data">鸿蒙系统如何创建大文件夹 鸿蒙OS 创建Data</a>
</li>
<li>
<a href="https://www.eyucms.com/9827.html"  title="element 日历 ElementPlus Calendar 日历">element 日历 ElementPlus Calendar 日历</a>
</li>
<li>
<a href="https://www.eyucms.com/27061.html"  title="鸿蒙os资源文件在哪 鸿蒙OS 资源文件">鸿蒙os资源文件在哪 鸿蒙OS 资源文件</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="bg333 cle ">
<div class="w1200  ">
<div class="p20">
<div class="hlo-20 t-a-c co999 f14 mt10">
 © 2024 <a href="https://www.eyucms.com/"  title="鳄鱼CMS">鳄鱼CMS</a> eyucms.com   版权所有    <a href="https://www.eyucms.com/lyb/" class="lxwm ">联系我们</a> 
</div>
<div class="hlo-20 t-a-c co999 f14 mt10">
<a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">桂ICP备19012293号-15</a> <span title="返回底部" class="cupo" onclick="window.scrollTo('0','0')">返回底部</span>
</div>
</div>
</div>
</div>
<script src="https://www.eyucms.com/style/layui/layui.js"></script>
<script>
layui.use(['layer','flow'],function(){
var $ = layui.jquery;
var flow = layui.flow;
//按屏加载图片
flow.lazyimg({
elem: 'img'
});
$('.hlogo-menu').click(function(){
$('#hnav').fadeIn(500);
$('.showbg').fadeIn(500);
});
$('.hnavclose').click(function(){
$('#hnav').fadeOut(100);
$('.showbg').fadeOut(100);
});
var bconh = $('.bcon').height();
if(bconh > 1500){
$('.bconh').css({"height":"1500px","overflow":"hidden"});
$('.readall_box').show();
}
$('.readall_box').click(function(){
$('.bconh').css({"height":"100%","overflow":"hidden"});
$('.readall_box').hide();
})
});
</script>
<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?7837d9c7b3ca32375bc68ba37b47854d";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>
<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?37c2da7a59ae14ddbb2d20ac2ddc3ab9";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>
</body>
</html>
文章详情

html表单标签有哪些 HTML 表单标签

html表单标签有哪些
