Article
Topic
Learning
Download
Q&A
Programming Dictionary
Game
PHP
Large Front-end
LOGIN
简体中文(ZH-CN)
English(EN)
繁体中文(ZH-TW)
日本語(JA)
한국어(KO)
Melayu(MS)
Français(FR)
Deutsch(DE)
HTML development manual
Collection(325)
share
directory
search
bookmark
HTML Tutorial - (HTML5 Standard)
HTML tutorial
Introduction to HTML
HTML editor
HTML Basics - 4 Examples
HTML elements
HTML attributes
HTML title
HTML paragraph
HTML text formatting
HTML link
HTML header
HTML CSS
HTML image
HTML table
HTML list
HTML block
HTML layout
HTML form
HTML frame
HTML color
HTML color name
HTML color values
HTML script
HTML character entity
HTML URL
HTML cheat list
HTML summary
HTML - XHTML
HTML media
HTML multimedia
HTML plugin
HTML audio
HTML videos (Videos)
HTML tag
-
</a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-img.html"><img></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-input.html"><input></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-ins.html"><ins></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-kbd.html"><kbd></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-keygen.html"><keygen></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-label.html"><label></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-legend.html"><legend></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-li.html"><li></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-link.html"><link></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-map.html"><map></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-mark.html"><mark></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-menu.html"><menu></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-meta.html"><meta></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-meter.html"><meter></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-nav.html"><nav></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-noframes.html"><noframes></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-noscript.html"><noscript></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-object.html"><object></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-ol.html"><ol></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-optgroup.html"><optgroup></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-option.html"><option></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-output.html"><output></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-p.html"><p></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-param.html"><param></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-pre.html"><pre></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-html.html"><html></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-progress.html"><progress></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-q.html"><q></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-rp.html"><rp></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-rt.html"><rt></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-ruby.html"><ruby></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-s.html"><s></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-samp.html"><samp></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-script.html"><script></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-section.html"><section></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-select.html"><select></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-small.html"><small></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-source.html"><source></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-span.html"><span></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-strike.html"><strike></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-strong.html"><strong></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-style.html"><style></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-sub.html"><sub></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-summary.html"><summary></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-sup.html"><sup></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-table.html"><table></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-tbody.html"><tbody></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-td.html"><td></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-textarea.html"><textarea></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-tfoot.html"><tfoot></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-th.html"><th></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-thead.html"><thead></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-time.html"><time></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-title.html"><title></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-tr.html"><tr></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-track.html"><track></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-tt.html"><tt></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-u.html"><u></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-ul.html"><ul></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-var.html"><var></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-video.html"><video></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-wbr.html"><wbr></a> </dd> </dl></li> </ul> </div> </div> </div> <div class="content"> <article class="phpcn-col-md9"> <div class="c-site"> <div class="c-site-a"> <a href="//m.sbmmt.com/course/27.html">HTML development manual</a> <span>/</span>HTML 表单 </div> </div> <div class="article-intro"> <h1 class="manual_con_title">HTML 表单</h1> <p class="intro">HTML 表单和输入 HTML 表单用于搜集不同类型的用户输入。 在线实例 创建文本字段 (Text field) 本例演示如何在 HTML 页面创建文本域。用户可以在文本域中写入文本。 创建密码字段 本例演示如何创建 HTML 的密码域。 （在本页底端可以找到更多实例。） HTML 表单 表单是一个包含表单元素的区域。 表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框等</p> <hr> <div class="article-body"> <div class="article-intro"> <h1>HTML<span class="color_h1">表单和输入</span></h1> <hr> <p class="intro">HTML 表单用于搜集不同类型的用户输入。</p> <p class="intro"><span style="font-size: 1.8em; line-height: 1.8em; font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, STHeiti, "Microsoft Yahei", sans-serif;">在线实例</span></p> <p>创建文本字段 (Text field)<br>本例演示如何在 HTML 页面创建文本域。用户可以在文本域中写入文本。</p> <div class="example"> <h2 class="example">实例</h2> <div class="example_code"> <pre class="brush:html;toolbar:false"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <script type="text/javascript" src="/js/jquery.3.5.2.min.m.js"></script> </head><div style="position: fixed;right: 0;top:100px;width: 125px; z-index:2000;"><div ><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php" ><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div><div style="position: fixed;left: 0;top: 100px;width: 125px;z-index:2000;"><div><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php"><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div> <body> <form action=""> First name: <input type="text" name="firstname"><br> Last name: <input type="text" name="lastname"> </form> <p><b>注意：</b> 表单本身是不可见的。并且注意一个文本字段的默认宽度是20个字符。</p> </body> </html></pre> </div> <br> <a target="_blank" href="#" class="showbtn codebtn">运行实例 »</a> <p>点击 "运行实例" 按钮查看在线实例</p> </div> <p>创建密码字段<br>本例演示如何创建 HTML 的密码域。</p> <div class="example"> <h2 class="example">实例</h2> <div class="example_code"> <pre class="brush:html;toolbar:false"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <script type="text/javascript" src="/js/jquery.3.5.2.min.m.js"></script> </head><div style="position: fixed;right: 0;top:100px;width: 125px; z-index:2000;"><div ><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php" ><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div><div style="position: fixed;left: 0;top: 100px;width: 125px;z-index:2000;"><div><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php"><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div> <body> <form action=""> Username: <input type="text" name="user"><br> Password: <input type="password" name="password"> </form> <p><b>注意：</b> 密码字段中的字符是隐藏的(显示为星号或圆圈)。</p> </body> </html></pre> </div> <br> <a target="_blank" href="#" class="showbtn codebtn">运行实例 »</a> <p>点击 "运行实例" 按钮查看在线实例</p> </div> <p>（在本页底端可以找到更多实例。）</p> <hr> <h2>HTML 表单</h2> <p>表单是一个包含表单元素的区域。</p> <p>表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。</p> <p>表单使用表单标签 <form> 来设置:</p> <div class="code notranslate"> <div> <pre class="brush:html;toolbar:false"><form> . input 元素 . </form></pre> </div> </div> <hr> <h2>HTML 表单 - 输入元素</h2> <p>多数情况下被用到的表单标签是输入标签（<input>）。</p> <p>输入类型是由类型属性（type）定义的。大多数经常被用到的输入类型如下：</p> <hr> <h2>文本域（Text Fields）</h2> <p>文本域通过<input type="text"> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。</p> <div class="code notranslate"> <div> <pre class="brush:html;toolbar:false"><form> First name: <input type="text" name="firstname"><br> Last name: <input type="text" name="lastname"> </form></pre>浏览器显示如下： </div> </div> <p><strong>注意:</strong>表单本身并不可见。同时，在大多数浏览器中，文本域的缺省宽度是20个字符。</p> <hr> <h2>密码字段</h2> <p>密码字段通过标签<input type="password"> 来定义:</p> <div class="code notranslate"> <div> <pre class="brush:html;toolbar:false"><form> Password: <input type="password" name="pwd"> </form></pre>浏览器显示效果如下: </div> </div> <p><strong>注意:</strong>密码字段字符不会明文显示，而是以星号或圆点替代。</p> <hr> <h2>单选按钮（Radio Buttons）</h2> <p><input type="radio"> 标签定义了表单单选框选项</p> <div class="code notranslate"> <div> <pre class="brush:html;toolbar:false"><form> <input type="radio" name="sex" value="male">Male<br> <input type="radio" name="sex" value="female">Female </form></pre>浏览器显示效果如下: </div> </div> <hr> <h2>复选框（Checkboxes）</h2> <p><input type="checkbox"> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。</p> <div class="code notranslate"> <div> <pre class="brush:html;toolbar:false"><form> <input type="checkbox" name="vehicle" value="Bike">I have a bike<br> <input type="checkbox" name="vehicle" value="Car">I have a car </form></pre>浏览器显示效果如下: </div> </div> <hr> <h2>提交按钮(Submit Button)</h2> <p><input type="submit"> 定义了提交按钮.</p> <p>当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。:</p> <div class="code notranslate"> <div> <pre class="brush:html;toolbar:false"><form name="input" action="html_form_action.php" method="get"> Username: <input type="text" name="user"> <input type="submit" value="Submit"> </form></pre>浏览器显示效果如下: </div> </div> <p>假如您在上面的文本框内键入几个字母，然后点击确认按钮，那么输入数据会传送到 "html_form_action.php" 的页面。该页面将显示出输入的结果。</p> <hr> <h2>更多实例</h2> <p><strong>单选按钮(Radio buttons)</strong><br>本例演示如何在 HTML 中创建单选按钮。</p> <div class="example"> <h2 class="example">实例</h2> <div class="example_code"> <pre class="brush:html;toolbar:false"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <script type="text/javascript" src="/js/jquery.3.5.2.min.m.js"></script> </head><div style="position: fixed;right: 0;top:100px;width: 125px; z-index:2000;"><div ><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php" ><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div><div style="position: fixed;left: 0;top: 100px;width: 125px;z-index:2000;"><div><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php"><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div> <body> <form action=""> <input type="radio" name="sex" value="male">Male<br> <input type="radio" name="sex" value="female">Female </form> <p><b>注意：</b>当用户点击一个单选按钮时，它就会被选中，其他同名的单选按钮就不会被选中。</p> </body> </html></pre> </div> <br> <a target="_blank" href="#" class="showbtn codebtn">运行实例 »</a> <p>点击 "运行实例" 按钮查看在线实例</p> </div> <p><strong>复选框(Checkboxes)</strong><br>本例演示如何在 HTML 页中创建复选框。用户可以选中或取消选取复选框。</p> <div class="example"> <h2 class="example">实例</h2> <div class="example_code"> <pre class="brush:html;toolbar:false"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <script type="text/javascript" src="/js/jquery.3.5.2.min.m.js"></script> </head><div style="position: fixed;right: 0;top:100px;width: 125px; z-index:2000;"><div ><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php" ><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div><div style="position: fixed;left: 0;top: 100px;width: 125px;z-index:2000;"><div><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php"><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div> <body> <form action=""> <input type="checkbox" name="vehicle" value="Bike">I have a bike<br> <input type="checkbox" name="vehicle" value="Car">I have a car </form> </body> </html></pre> </div> <br> <a target="_blank" href="#" class="showbtn codebtn">运行实例 »</a> <p>点击 "运行实例" 按钮查看在线实例</p> </div> <p><strong>简单的下拉列表</strong><br>本例演示如何在 HTML 页面中创建简单的下拉列表框。下拉列表框是一个可选列表。</p> <div class="example"> <h2 class="example">实例</h2> <div class="example_code"> <pre class="brush:html;toolbar:false"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <script type="text/javascript" src="/js/jquery.3.5.2.min.m.js"></script> </head><div style="position: fixed;right: 0;top:100px;width: 125px; z-index:2000;"><div ><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php" ><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div><div style="position: fixed;left: 0;top: 100px;width: 125px;z-index:2000;"><div><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php"><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div> <body> <form action=""> <select name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select> </form> </body> </html></pre> </div> <br> <a target="_blank" href="#" class="showbtn codebtn">运行实例 »</a> <p>点击 "运行实例" 按钮查看在线实例</p> </div> <p><strong>预选下拉列表</strong><br>本例演示如何创建一个简单的带有预选值的下拉列表。</p> <div class="example"> <h2 class="example">实例</h2> <div class="example_code"> <pre class="brush:html;toolbar:false"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <script type="text/javascript" src="/js/jquery.3.5.2.min.m.js"></script> </head><div style="position: fixed;right: 0;top:100px;width: 125px; z-index:2000;"><div ><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php" ><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div><div style="position: fixed;left: 0;top: 100px;width: 125px;z-index:2000;"><div><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php"><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div> <body> <form action=""> <select name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat" selected>Fiat</option> <option value="audi">Audi</option> </select> </form> </body> </html></pre> </div> <br> <a target="_blank" href="#" class="showbtn codebtn">运行实例 »</a> <p>点击 "运行实例" 按钮查看在线实例</p> </div> <p><strong>文本域(Textarea)</strong><br>本例演示如何创建文本域（多行文本输入控件）。用户可在文本域中写入文本。可写入字符的字数不受限制。</p> <div class="example"> <h2 class="example">实例</h2> <div class="example_code"> <pre class="brush:html;toolbar:false"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <script type="text/javascript" src="/js/jquery.3.5.2.min.m.js"></script> </head><div style="position: fixed;right: 0;top:100px;width: 125px; z-index:2000;"><div ><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php" ><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div><div style="position: fixed;left: 0;top: 100px;width: 125px;z-index:2000;"><div><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php"><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div> <body> <textarea rows="10" cols="30"> 我是一个文本框。 </textarea> </body> </html></pre> </div> <br> <a target="_blank" href="#" class="showbtn codebtn">运行实例 »</a> <p>点击 "运行实例" 按钮查看在线实例</p> </div> <p><strong>创建按钮</strong><br>本例演示如何创建按钮。你可以对按钮上的文字进行自定义。</p> <div class="example"> <h2 class="example">实例</h2> <div class="example_code"> <pre class="brush:html;toolbar:false"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <script type="text/javascript" src="/js/jquery.3.5.2.min.m.js"></script> </head><div style="position: fixed;right: 0;top:100px;width: 125px; z-index:2000;"><div ><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php" ><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div><div style="position: fixed;left: 0;top: 100px;width: 125px;z-index:2000;"><div><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php"><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div> <body> <form action=""> <input type="button" value="Hello world!"> </form> </body> </html></pre> </div> <br> <a target="_blank" href="#" class="showbtn codebtn">运行实例 »</a> <p>点击 "运行实例" 按钮查看在线实例</p> </div> <h2>表单实例</h2> <p><span style="font-size: 14px;"><strong>带边框的表单</strong><br>本例演示如何在数据周围绘制一个带标题的框。</span></p> <div class="example"> <h2 class="example">实例</h2> <div class="example_code"> <pre class="brush:html;toolbar:false"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <script type="text/javascript" src="/js/jquery.3.5.2.min.m.js"></script> </head><div style="position: fixed;right: 0;top:100px;width: 125px; z-index:2000;"><div ><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php" ><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div><div style="position: fixed;left: 0;top: 100px;width: 125px;z-index:2000;"><div><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php"><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div> <body> <form action=""> <fieldset> <legend>Personal information:</legend> Name: <input type="text" size="30"><br> E-mail: <input type="text" size="30"><br> Date of birth: <input type="text" size="10"> </fieldset> </form> </body> </html></pre> </div> <br> <a target="_blank" href="#" class="showbtn codebtn">运行实例 »</a> <p>点击 "运行实例" 按钮查看在线实例</p> </div> <p><span style="font-size: 14px;"><strong>带有输入框和确认按钮的表单</strong><br>本例演示如何向页面添加表单。此表单包含两个输入框和一个确认按钮。</span></p> <div class="example"> <h2 class="example">实例</h2> <div class="example_code"> <pre class="brush:html;toolbar:false"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <script type="text/javascript" src="/js/jquery.3.5.2.min.m.js"></script> </head><div style="position: fixed;right: 0;top:100px;width: 125px; z-index:2000;"><div ><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php" ><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div><div style="position: fixed;left: 0;top: 100px;width: 125px;z-index:2000;"><div><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php"><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div> <body> <form action="demo-form.php"> First name: <input type="text" name="FirstName" value="Mickey"><br> Last name: <input type="text" name="LastName" value="Mouse"><br> <input type="submit" value="提交"> </form> <p>点击"提交"按钮，表单数据将被发送到服务器上的“demo-form.php”。</p> </body> </html></pre> </div> <br> <a target="_blank" href="#" class="showbtn codebtn">运行实例 »</a> <p>点击 "运行实例" 按钮查看在线实例</p> </div> <p><span style="font-size: 14px;"><strong>带有复选框的表单</strong><br>此表单包含两个复选框和一个确认按钮。</span></p> <div class="example"> <h2 class="example">实例</h2> <div class="example_code"> <pre class="brush:html;toolbar:false"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <script type="text/javascript" src="/js/jquery.3.5.2.min.m.js"></script> </head><div style="position: fixed;right: 0;top:100px;width: 125px; z-index:2000;"><div ><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php" ><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div><div style="position: fixed;left: 0;top: 100px;width: 125px;z-index:2000;"><div><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php"><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div> <body> <form action="demo-form.php" method="get"> <input type="checkbox" name="vehicle" value="Bike"> I have a bike<br> <input type="checkbox" name="vehicle" value="Car" checked="checked"> I have a car<br> <input type="submit" value="提交"> </form> </body> </html></pre> </div> <br> <a target="_blank" href="#" class="showbtn codebtn">运行实例 »</a> <p>点击 "运行实例" 按钮查看在线实例</p> </div> <p><span style="font-size: 14px;"><strong>带有单选按钮的表单</strong><br>此表单包含两个单选框和一个确认按钮。</span></p> <div class="example"> <h2 class="example">实例</h2> <div class="example_code"> <pre class="brush:html;toolbar:false"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <script type="text/javascript" src="/js/jquery.3.5.2.min.m.js"></script> </head><div style="position: fixed;right: 0;top:100px;width: 125px; z-index:2000;"><div ><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php" ><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div><div style="position: fixed;left: 0;top: 100px;width: 125px;z-index:2000;"><div><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php"><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div> <body> <form action="demo-form.php" method="get"> <input type="radio" name="sex" value="Male"> Male<br> <input type="radio" name="sex" value="Female" checked="checked"> Female<br> <input type="submit" value="提交"> </form> </body> </html></pre> </div> <br> <a target="_blank" href="#" class="showbtn codebtn">运行实例 »</a> <p>点击 "运行实例" 按钮查看在线实例</p> </div> <p><span style="font-size: 14px;"><strong>从表单发送电子邮件</strong><br>此例演示如何从表单发送电子邮件。</span></p> <div class="example"> <h2 class="example">实例</h2> <div class="example_code"> <pre class="brush:html;toolbar:false"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <script type="text/javascript" src="/js/jquery.3.5.2.min.m.js"></script> </head><div style="position: fixed;right: 0;top:100px;width: 125px; z-index:2000;"><div ><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php" ><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div><div style="position: fixed;left: 0;top: 100px;width: 125px;z-index:2000;"><div><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php"><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div> <body> <h3>发送邮件到 someone@example.com:</h3> <form action="MAILTO:someone@example.com" method="post" enctype="text/plain"> Name:<br> <input type="text" name="name" value="your name"><br> E-mail:<br> <input type="text" name="mail" value="your email"><br> Comment:<br> <input type="text" name="comment" value="your comment" size="50"><br><br> <input type="submit" value="发送"> <input type="reset" value="重置"> </form> </body> </html></pre> </div> <br> <a target="_blank" href="#" class="showbtn codebtn">运行实例 »</a> <p>点击 "运行实例" 按钮查看在线实例</p> </div> <hr> <h2>HTML 表单标签</h2> <p><span class="new" style="float:left;">New</span>: HTML5新标签</p> <table class="reference notranslate"> <tbody> <tr class="firstRow"> <th align="left">标签</th> <th align="left">描述</th> </tr> <tr> <td style="word-break: break-all;"><a href="//m.sbmmt.com/dic/html/form.html" target="_blank"><form></a></td> <td>定义供用户输入的表单</td> </tr> <tr> <td style="word-break: break-all;"><a href="//m.sbmmt.com/dic/html/input.html" target="_blank"><input></a></td> <td>定义输入域</td> </tr> <tr> <td style="word-break: break-all;"><a href="//m.sbmmt.com/dic/html/textarea.html" target="_blank"><textarea></a></td> <td>定义文本域 (一个多行的输入控件)</td> </tr> <tr> <td style="word-break: break-all;"><a href="//m.sbmmt.com/dic/html/label.html" target="_blank"><label></a></td> <td>定义了 <input> 元素的标签，一般为输入标题</td> </tr> <tr> <td style="word-break: break-all;"><a href="//m.sbmmt.com/dic/html/fieldset.html" target="_blank"><fieldset></a></td> <td>定义了一组相关的表单元素，并使用外框包含起来</td> </tr> <tr> <td style="word-break: break-all;"><a href="//m.sbmmt.com/dic/html/legend.html" target="_blank"><legend></a></td> <td>定义了 <fieldset> 元素的标题</td> </tr> <tr> <td style="word-break: break-all;"><a href="//m.sbmmt.com/dic/html/select.html" target="_blank"><select></a></td> <td>定义了下拉选项列表</td> </tr> <tr> <td style="word-break: break-all;"><a href="//m.sbmmt.com/tags/tag-optgroup.html" target="_self"><optgroup></a></td> <td>定义选项组</td> </tr> <tr> <td style="word-break: break-all;"><a href="//m.sbmmt.com/dic/html/option.html" target="_blank"><option></a></td> <td>定义下拉列表中的选项</td> </tr> <tr> <td style="word-break: break-all;"><a href="//m.sbmmt.com/dic/html/button.html" target="_blank"><button></a></td> <td>定义一个点击按钮</td> </tr> <tr> <td style="word-break: break-all;"><a href="//m.sbmmt.com/dic/html/datalist.html" target="_blank"><datalist><span class="new"></span></a></td> <td>指定一个预先定义的输入控件选项列表</td> </tr> <tr> <td style="word-break: break-all;"><a href="//m.sbmmt.com/dic/html/keygen.html" target="_blank"><keygen><span class="new"></span></a></td> <td>定义了表单的密钥对生成器字段</td> </tr> <tr> <td style="word-break: break-all;"><a href="//m.sbmmt.com/dic/html/output.html" target="_blank"><output></a></td> <td>定义一个计算结果</td> </tr> </tbody> </table> </div> </div> </div> <div class="previous-next-links"> <div class="previous-design-link"> ← <a href="//m.sbmmt.com/html/html-layouts.html" rel="prev">HTML 布局</a> </div> <div class="next-design-link"> <a href="//m.sbmmt.com/html/html-iframes.html" rel="next">HTML 框架</a>→ </div> </div> </article> <div class="right-item phpcn-col-md2"> <ul> <li><h3>Tutorial Navigation</h3> <dl class="navigation"> <dd class="right-item-mouseover"> <a href="//m.sbmmt.com/course/list/1/type/3.html" target="_blank" title="Big front end">Big front end</a> <div class="phpcn-ps-a"> <a href="//m.sbmmt.com/course/list/1/type/3.html" title="HTML">HTML</a> <a href="//m.sbmmt.com/course/list/1/type/3.html" title="CSS">CSS</a> <a href="//m.sbmmt.com/course/list/1/type/3.html" title="HTML5">HTML5</a> <a href="//m.sbmmt.com/course/list/1/type/3.html" title="CSS3">CSS3</a> <a href="//m.sbmmt.com/course/list/1/type/3.html" title="JavaScript">JavaScript</a> <a href="//m.sbmmt.com/course/list/1/type/3.html" title="jQuery">jQuery</a> <a href="//m.sbmmt.com/course/list/1/type/3.html" title="Vue.js">Vue.js</a> <a href="//m.sbmmt.com/course/list/1/type/3.html" title="React">React</a> <a href="//m.sbmmt.com/course/list/1/type/3.html" title="AngularJS">AngularJS</a> <a href="//m.sbmmt.com/course/list/1/type/3.html" title="Node.js">Node.js</a> <a href="//m.sbmmt.com/course/list/1/type/3.html" title="AJAX">AJAX</a> <a href="//m.sbmmt.com/course/list/1/type/3.html" title="Bootstrap">Bootstrap</a> <a href="//m.sbmmt.com/course/list/1/type/3.html" title="Foundation">Foundation</a> </div> </dd> <dd class="right-item-mouseover"> <a href="//m.sbmmt.com/course/list/2/type/3.html" target="_blank" title="JavaScript">JavaScript</a> <div class="phpcn-ps-a"> <a href="//m.sbmmt.com/course/list/2/type/3.html" title="Highcharts">Highcharts</a> <a href="//m.sbmmt.com/course/list/2/type/3.html" title="Maps API">Maps API</a> </div> </dd> <dd class="right-item-mouseover"> <a href="//m.sbmmt.com/course/list/3/type/3.html" target="_blank" title="Backend Development">Backend Development</a> <div class="phpcn-ps-a"> <a href="//m.sbmmt.com/course/list/3/type/3.html" title="PHP">PHP</a> <a href="//m.sbmmt.com/course/list/3/type/3.html" title="ThinkPHP">ThinkPHP</a> <a href="//m.sbmmt.com/course/list/3/type/3.html" title="Laravel">Laravel</a> <a href="//m.sbmmt.com/course/list/3/type/3.html" title="Python">Python</a> <a href="//m.sbmmt.com/course/list/3/type/3.html" title="Go">Go</a> <a href="//m.sbmmt.com/course/list/3/type/3.html" title="Java">Java</a> <a href="//m.sbmmt.com/course/list/3/type/3.html" title="C">C</a> <a href="//m.sbmmt.com/course/list/3/type/3.html" title="C++">C++</a> <a href="//m.sbmmt.com/course/list/3/type/3.html" title="C#">C#</a> <a href="//m.sbmmt.com/course/list/3/type/3.html" title="JSP">JSP</a> <a href="//m.sbmmt.com/course/list/3/type/3.html" title="Django">Django</a> <a href="//m.sbmmt.com/course/list/3/type/3.html" title="ASP.NET">ASP.NET</a> <a href="//m.sbmmt.com/course/list/3/type/3.html" title="ASP">ASP</a> <a href="//m.sbmmt.com/course/list/3/type/3.html" title="XML">XML</a> <a href="//m.sbmmt.com/course/list/3/type/3.html" title="Ruby">Ruby</a> <a href="//m.sbmmt.com/course/list/3/type/3.html" title="Python3">Python3</a> <a href="//m.sbmmt.com/course/list/3/type/3.html" title="Perl">Perl</a> <a href="//m.sbmmt.com/course/list/3/type/3.html" title="Servlet">Servlet</a> <a href="//m.sbmmt.com/course/list/3/type/3.html" title="Lua">Lua</a> <a href="//m.sbmmt.com/course/list/3/type/3.html" title="Scala">Scala</a> <a href="//m.sbmmt.com/course/list/3/type/3.html" title="AppML">AppML</a> <a href="//m.sbmmt.com/course/list/3/type/3.html" title="VBScript">VBScript</a> </div> </dd> <dd class="right-item-mouseover"> <a href="//m.sbmmt.com/course/list/4/type/3.html" target="_blank" title="database">database</a> <div class="phpcn-ps-a"> <a href="//m.sbmmt.com/course/list/4/type/3.html" title="MySQL">MySQL</a> <a href="//m.sbmmt.com/course/list/4/type/3.html" title="Redis">Redis</a> <a href="//m.sbmmt.com/course/list/4/type/3.html" title="Oracle">Oracle</a> <a href="//m.sbmmt.com/course/list/4/type/3.html" title="MongoDB">MongoDB</a> <a href="//m.sbmmt.com/course/list/4/type/3.html" title="Memcached">Memcached</a> <a href="//m.sbmmt.com/course/list/4/type/3.html" title="SQL Server">SQL Server</a> </div> </dd> <dd class="right-item-mouseover"> <a href="//m.sbmmt.com/course/list/5/type/3.html" target="_blank" title="Mobile terminal">Mobile terminal</a> <div class="phpcn-ps-a"> <a href="//m.sbmmt.com/course/list/5/type/3.html" title="Applets">Applets</a> <a href="//m.sbmmt.com/course/list/5/type/3.html" title="uni-app">uni-app</a> <a href="//m.sbmmt.com/course/list/5/type/3.html" title="Flutter">Flutter</a> <a href="//m.sbmmt.com/course/list/5/type/3.html" title="Android">Android</a> <a href="//m.sbmmt.com/course/list/5/type/3.html" title="iOS">iOS</a> <a href="//m.sbmmt.com/course/list/5/type/3.html" title="Swift">Swift</a> <a href="//m.sbmmt.com/course/list/5/type/3.html" title="other">other</a> </div> </dd> <dd class="right-item-mouseover"> <a href="//m.sbmmt.com/course/list/9/type/3.html" target="_blank" title="Operation and maintenance development">Operation and maintenance development</a> <div class="phpcn-ps-a"> <a href="//m.sbmmt.com/course/list/9/type/3.html" title="Linux">Linux</a> <a href="//m.sbmmt.com/course/list/9/type/3.html" title="Docker">Docker</a> <a href="//m.sbmmt.com/course/list/9/type/3.html" title="PhpStudy">PhpStudy</a> <a href="//m.sbmmt.com/course/list/9/type/3.html" title="Git">Git</a> <a href="//m.sbmmt.com/course/list/9/type/3.html" title="Other tools">Other tools</a> </div> </dd> <dd class="right-item-mouseover"> <a href="//m.sbmmt.com/course/list/7/type/3.html" target="_blank" title="UI design">UI design</a> <div class="phpcn-ps-a"> <a href="//m.sbmmt.com/course/list/7/type/3.html" title="Axure">Axure</a> <a href="//m.sbmmt.com/course/list/7/type/3.html" title="MVC">MVC</a> <a href="//m.sbmmt.com/course/list/7/type/3.html" title="Web Forms">Web Forms</a> <a href="//m.sbmmt.com/course/list/7/type/3.html" title="PS">PS</a> </div> </dd> <dd class="right-item-mouseover"> <a href="//m.sbmmt.com/course/list/10/type/3.html" target="_blank" title="Computer Basics">Computer Basics</a> <div class="phpcn-ps-a"> <a href="//m.sbmmt.com/course/list/10/type/3.html" title="Design Patterns">Design Patterns</a> <a href="//m.sbmmt.com/course/list/10/type/3.html" title="regular expression">regular expression</a> <a href="//m.sbmmt.com/course/list/10/type/3.html" title="HTTP">HTTP</a> <a href="//m.sbmmt.com/course/list/10/type/3.html" title="Website Building Guide">Website Building Guide</a> <a href="//m.sbmmt.com/course/list/10/type/3.html" title="Browser information">Browser information</a> <a href="//m.sbmmt.com/course/list/10/type/3.html" title="website host">website host</a> <a href="//m.sbmmt.com/course/list/10/type/3.html" title="TCP/IP">TCP/IP</a> <a href="//m.sbmmt.com/course/list/10/type/3.html" title="W3C">W3C</a> <a href="//m.sbmmt.com/course/list/10/type/3.html" title="CodeBasic">CodeBasic</a> </div> </dd> <dd class="right-item-mouseover"> <a href="//m.sbmmt.com/course/list/6/type/3.html" target="_blank" title="XML">XML</a> <div class="phpcn-ps-a"> <a href="//m.sbmmt.com/course/list/6/type/3.html" title="DTD">DTD</a> <a href="//m.sbmmt.com/course/list/6/type/3.html" title="XML DOM">XML DOM</a> <a href="//m.sbmmt.com/course/list/6/type/3.html" title="XSLT">XSLT</a> <a href="//m.sbmmt.com/course/list/6/type/3.html" title="XPath">XPath</a> <a href="//m.sbmmt.com/course/list/6/type/3.html" title="XQuery">XQuery</a> <a href="//m.sbmmt.com/course/list/6/type/3.html" title="XLink">XLink</a> <a href="//m.sbmmt.com/course/list/6/type/3.html" title="XPointer">XPointer</a> <a href="//m.sbmmt.com/course/list/6/type/3.html" title="XML Schema">XML Schema</a> <a href="//m.sbmmt.com/course/list/6/type/3.html" title="XSL-FO">XSL-FO</a> <a href="//m.sbmmt.com/course/list/6/type/3.html" title="SVG">SVG</a> </div> </dd> <dd class="right-item-mouseover"> <a href="//m.sbmmt.com/course/list/8/type/3.html" target="_blank" title="Web Services">Web Services</a> <div class="phpcn-ps-a"> <a href="//m.sbmmt.com/course/list/8/type/3.html" title="Web Services">Web Services</a> <a href="//m.sbmmt.com/course/list/8/type/3.html" title="WSDL">WSDL</a> <a href="//m.sbmmt.com/course/list/8/type/3.html" title="SOAP">SOAP</a> <a href="//m.sbmmt.com/course/list/8/type/3.html" title="RSS">RSS</a> <a href="//m.sbmmt.com/course/list/8/type/3.html" title="RDF">RDF</a> </div> </dd> </dl></li> </ul> </div> </div> <div id="codeMark"></div> <div id="codeMain"> <div class="left"> <div id="codeEditor"></div> <div class="editor-btn"> <div class="editor-btn-inner"> <a href="javascript:;" class="code-btn-submit r" id="J_Commit" title="submit">submit</a> </div> </div> </div> <div class="right"> <div id="codeResult"></div> </div> <div id="close"></div> </div> </body> </html>
