HTML-表格 - 芒果文档

📌 相关文章

📜 HTML-表格

📅 最后修改于: 2020-12-16 05:55:25 🧑 作者: Mango

当您想从网站访问者那里收集一些数据时，HTML表单是必需的。例如，在用户注册期间，您想收集诸如姓名，电子邮件地址，信用卡等信息。

表单将从站点访问者那里获取输入，然后将其发布到后端应用程序，例如CGI，ASP Script或PHP脚本等。后端应用程序将根据内部定义的业务逻辑对传递的数据执行所需的处理。应用程序。

有各种可用的表单元素，例如文本字段，textarea字段，下拉菜单，单选按钮，复选框等。

HTML

表单属性

除了常见属性，以下是最常用的表单属性的列表-

Sr.No	Attribute & Description
1	action Backend script ready to process your passed data.
2	method Method to be used to upload data. The most frequently used are GET and POST methods.
3	target Specify the target window or frame where the result of the script will be displayed. It takes values like _blank, _self, _parent etc.
4	enctype You can use the enctype attribute to specify how the browser encodes the data before it sends it to the server. Possible values are − application/x-www-form-urlencoded − This is the standard method most forms use in simple scenarios. mutlipart/form-data − This is used when you want to upload binary data in the form of files like image, word file etc.

注意-有关表单数据上载方式的详细信息，请参考Perl＆CGI 。

HTML表单控件

您可以使用多种类型的表单控件来使用HTML表单收集数据-

文字输入控件
复选框控件
收音机盒控件
选择框控件
文件选择框
隐藏控件
可点击的按钮
提交并重置按钮

文字输入控件

表单上使用三种类型的文本输入-

单行文本输入控件-此控件用于只需要一行用户输入的项目，例如搜索框或名称。它们是使用HTML 标记创建的。
密码输入控件-这也是单行文本输入，但是一旦用户输入，它将立即屏蔽字符。它们也使用HTMl 标签创建。
多行文本输入控件-当要求用户提供可能比单个句子更长的详细信息时，将使用此控件。使用HTML </b>标签创建多行输入控件。</p> </li> </ul> <h2>单行文字输入控件</h2> <p>此控件用于仅需要一行用户输入的项目，例如搜索框或名称。它们是使用HTML <input>标记创建的。</p> <h3>例</h3> <p>这是用于获取名字和姓氏的单行文本输入的基本示例-</p> <div class="demo-view"><a class="demo" href="http://tpcg.io/rsDvtp" rel="nofollow noopener" target="_blank"><i class="fa-external-link"></i>现场演示</a></div> <div class="hcb_wrap"> <pre class="prism line-numbers lang-java" data-lang="java"><code class="language-markup"><title>Text Input Control</title> <form> First name: <input type="text" name="first_name"> <br> Last name: <input type="text" name="last_name"> </form> </code></pre> </div> <p>这将产生以下结果-</p> <p><iframe class="result" height="100px" loading="lazy" onload="resizeFrame(this)" src="/html/src/single_line_text_input.htm" width="660px"></iframe></p> <h2>属性</h2> <p>以下是用于创建文本字段的<input>标记的属性列表。</p> <table class="table"> <tr> <th>Sr.No</th> <th style="text-align:center;">Attribute & Description</th> </tr> <tr> <td class="ts">1</td> <td> <p><b>type</b></p> <p>Indicates the type of input control and for text input control it will be set to <b>text</b>.</p> </td> </tr> <tr> <td class="ts">2</td> <td> <p><b>name</b></p> <p>Used to give a name to the control which is sent to the server to be recognized and get the value.</p> </td> </tr> <tr> <td class="ts">3</td> <td> <p><b>value</b></p> <p>This can be used to provide an initial value inside the control.</p> </td> </tr> <tr> <td class="ts">4</td> <td> <p><b>size</b></p> <p>Allows to specify the width of the text-input control in terms of characters.</p> </td> </tr> <tr> <td class="ts">5</td> <td> <p><b>maxlength</b></p> <p>Allows to specify the maximum number of characters a user can enter into the text box.</p> </td> </tr> </table> <h2>密码输入控件</h2> <p>这也是单行文本输入，但是在用户输入字符立即将其屏蔽。它们也使用HTML <input>标记创建，但type属性设置为<b>password</b> 。</p> <h3>例</h3> <p>这是用于获取用户密码的单行密码输入的基本示例-</p> <div class="demo-view"><a class="demo" href="http://tpcg.io/3lbdUK" rel="nofollow noopener" target="_blank"><i class="fa-external-link"></i>现场演示</a></div> <div class="hcb_wrap"> <pre class="prism line-numbers lang-java" data-lang="java"><code class="language-markup"><title>Password Input Control</title> <form> User ID : <input type="text" name="user_id"> <br> Password: <input type="password" name="password"> </form> </code></pre> </div> <p>这将产生以下结果-</p> <p><iframe class="result" height="100px" loading="lazy" onload="resizeFrame(this)" src="/html/src/password_input_controls.htm" width="660px"></iframe></p> <h2>属性</h2> <p>以下是用于创建密码字段的<input>标记的属性列表。</p> <table class="table"> <tr> <th>Sr.No</th> <th style="text-align:center;">Attribute & Description</th> </tr> <tr> <td class="ts">1</td> <td> <p><b>type</b></p> <p>Indicates the type of input control and for password input control it will be set to <b>password</b>.</p> </td> </tr> <tr> <td class="ts">2</td> <td> <p><b>name</b></p> <p>Used to give a name to the control which is sent to the server to be recognized and get the value.</p> </td> </tr> <tr> <td class="ts">3</td> <td> <p><b>value</b></p> <p>This can be used to provide an initial value inside the control.</p> </td> </tr> <tr> <td class="ts">4</td> <td> <p><b>size</b></p> <p>Allows to specify the width of the text-input control in terms of characters.</p> </td> </tr> <tr> <td class="ts">5</td> <td> <p><b>maxlength</b></p> <p>Allows to specify the maximum number of characters a user can enter into the text box.</p> </td> </tr> </table> <h2>多行文字输入控件</h2> <p>当要求用户提供可能比单个句子更长的详细信息时，将使用此选项。使用HTML <textarea>标签创建多行输入控件。</p> <h3>例</h3> <p>这是用于进行项目描述的多行文本输入的基本示例-</p> <div class="demo-view"><a class="demo" href="http://tpcg.io/oHNbzQ" rel="nofollow noopener" target="_blank"><i class="fa-external-link"></i>现场演示</a></div> <div class="hcb_wrap"> <pre class="prism line-numbers lang-java" data-lang="java"><code class="language-markup"><title>Multiple-Line Input Control</title> <form> Description : <br> <textarea rows="5" cols="50" name="description"> Enter description here...

这将产生以下结果-

属性

以下是标记的属性列表。</p> <table class="table"> <tr> <th>Sr.No</th> <th style="text-align:center;">Attribute & Description</th> </tr> <tr> <td class="ts">1</td> <td> <p><b>name</b></p> <p>Used to give a name to the control which is sent to the server to be recognized and get the value.</p> </td> </tr> <tr> <td class="ts">2</td> <td> <p><b>rows</b></p> <p>Indicates the number of rows of text area box.</p> </td> </tr> <tr> <td class="ts">3</td> <td> <p><b>cols</b></p> <p>Indicates the number of columns of text area box</p> </td> </tr> </table> <h2>复选框控制</h2> <p>当需要选择多个选项时，将使用复选框。它们也使用HTML <input>标记创建，但type属性设置为<b>复选框。</b> 。</p> <h3>例</h3> <p>这是带有两个复选框的表单的示例HTML代码-</p> <div class="demo-view"><a class="demo" href="http://tpcg.io/VLMQaA" rel="nofollow noopener" target="_blank"><i class="fa-external-link"></i>现场演示</a></div> <div class="hcb_wrap"> <pre class="prism line-numbers lang-java" data-lang="java"><code class="language-markup"><title>Checkbox Control</title> <form> <input type="checkbox" name="maths" value="on"> Maths <input type="checkbox" name="physics" value="on"> Physics </form> </code></pre> </div> <p>这将产生以下结果-</p> <p><iframe class="result" height="100px" loading="lazy" onload="resizeFrame(this)" src="/html/src/checkbox_control.htm" width="660px"></iframe></p> <h2>属性</h2> <p>以下是<checkbox>标记的属性列表。</p> <table class="table"> <tr> <th>Sr.No</th> <th style="text-align:center;">Attribute & Description</th> </tr> <tr> <td class="ts">1</td> <td> <p><b>type</b></p> <p>Indicates the type of input control and for checkbox input control it will be set to <b>checkbox.</b>.</p> </td> </tr> <tr> <td class="ts">2</td> <td> <p><b>name</b></p> <p>Used to give a name to the control which is sent to the server to be recognized and get the value.</p> </td> </tr> <tr> <td class="ts">3</td> <td> <p><b>value</b></p> <p>The value that will be used if the checkbox is selected.</p> </td> </tr> <tr> <td class="ts">4</td> <td> <p><b>checked</b></p> <p>Set to <i>checked</i> if you want to select it by default.</p> </td> </tr> </table> <h2>单选按钮控制</h2> <p>单选按钮用于许多选项中时，只需选择一个选项。它们也使用HTML <input>标记创建，但type属性设置为<b>radio</b> 。</p> <h3>例</h3> <p>这是带有两个单选按钮的表单的示例HTML代码-</p> <div class="demo-view"><a class="demo" href="http://tpcg.io/KtRu65" rel="nofollow noopener" target="_blank"><i class="fa-external-link"></i>现场演示</a></div> <div class="hcb_wrap"> <pre class="prism line-numbers lang-java" data-lang="java"><code class="language-markup"><title>Radio Box Control</title> <form> <input type="radio" name="subject" value="maths"> Maths <input type="radio" name="subject" value="physics"> Physics </form> </code></pre> </div> <p>这将产生以下结果-</p> <p><iframe class="result" height="100px" loading="lazy" onload="resizeFrame(this)" src="/html/src/radio_button_control.htm" width="660px"></iframe></p> <h2>属性</h2> <p>以下是单选按钮的属性列表。</p> <table class="table"> <tr> <th>Sr.No</th> <th style="text-align:center;">Attribute & Description</th> </tr> <tr> <td class="ts">1</td> <td> <p><b>type</b></p> <p>Indicates the type of input control and for checkbox input control it will be set to radio.</p> </td> </tr> <tr> <td class="ts">2</td> <td> <p><b>name</b></p> <p>Used to give a name to the control which is sent to the server to be recognized and get the value.</p> </td> </tr> <tr> <td class="ts">3</td> <td> <p><b>value</b></p> <p>The value that will be used if the radio box is selected.</p> </td> </tr> <tr> <td class="ts">4</td> <td> <p><b>checked</b></p> <p>Set to <i>checked</i> if you want to select it by default.</p> </td> </tr> </table> <h2>选择框控件</h2> <p>选择框，也称为下拉框，提供了以下拉列表形式列出各种选项的选项，用户可以从中选择一个或多个选项。</p> <h3>例</h3> <p>这是带有一个下拉框的表单的示例HTML代码</p> <div class="demo-view"><a class="demo" href="http://tpcg.io/Ofo4UQ" rel="nofollow noopener" target="_blank"><i class="fa-external-link"></i>现场演示</a></div> <div class="hcb_wrap"> <pre class="prism line-numbers lang-java" data-lang="java"><code class="language-markup"><title>Select Box Control</title> <form> <select name="dropdown"> <option value="Maths" selected>Maths</option> <option value="Physics">Physics</option> </select> </form> </code></pre> </div> <p>这将产生以下结果-</p> <p><iframe class="result" height="100px" loading="lazy" onload="resizeFrame(this)" src="/html/src/select_box_control.htm" width="660px"></iframe></p> <h2>属性</h2> <p>以下是<select>标记的重要属性的列表-</p> <table class="table"> <tr> <th>Sr.No</th> <th style="text-align:center;">Attribute & Description</th> </tr> <tr> <td class="ts">1</td> <td> <p><b>name</b></p> <p>Used to give a name to the control which is sent to the server to be recognized and get the value.</p> </td> </tr> <tr> <td class="ts">2</td> <td> <p><b>size</b></p> <p>This can be used to present a scrolling list box.</p> </td> </tr> <tr> <td class="ts">3</td> <td> <p><b>multiple</b></p> <p>If set to “multiple” then allows a user to select multiple items from the menu.</p> </td> </tr> </table> <p>以下是<option>标记的重要属性的列表-</p> <table class="table"> <tr> <th>Sr.No</th> <th style="text-align:center;">Attribute & Description</th> </tr> <tr> <td class="ts">1</td> <td> <p><b>value</b></p> <p>The value that will be used if an option in the select box box is selected.</p> </td> </tr> <tr> <td class="ts">2</td> <td> <p><b>selected</b></p> <p>Specifies that this option should be the initially selected value when the page loads.</p> </td> </tr> <tr> <td class="ts">3</td> <td> <p><b>label</b></p> <p>An alternative way of labeling options</p> </td> </tr> </table> <h2>文件上传框</h2> <p>如果要允许用户将文件上传到您的网站，则需要使用文件上传框，也称为文件选择框。这也是使用<input>元素创建的，但是type属性设置为<b>file</b> 。</p> <h3>例</h3> <p>这是带有一个文件上传框的表单的示例HTML代码-</p> <div class="demo-view"><a class="demo" href="http://tpcg.io/OqYwor" rel="nofollow noopener" target="_blank"><i class="fa-external-link"></i>现场演示</a></div> <div class="hcb_wrap"> <pre class="prism line-numbers lang-java" data-lang="java"><code class="language-markup"><title>File Upload Box</title> <form> <input type="file" name="fileupload" accept="image/*"> </form> </code></pre> </div> <p>这将产生以下结果-</p> <p><iframe class="result" height="100px" loading="lazy" onload="resizeFrame(this)" src="/html/src/file_upload_box.htm" width="660px"></iframe></p> <h2>属性</h2> <p>以下是文件上传框的重要属性列表-</p> <table class="table"> <tr> <th>Sr.No</th> <th style="text-align:center;">Attribute & Description</th> </tr> <tr> <td class="ts">1</td> <td> <p><b>name</b></p> <p>Used to give a name to the control which is sent to the server to be recognized and get the value.</p> </td> </tr> <tr> <td class="ts">2</td> <td> <p><b>accept</b></p> <p>Specifies the types of files that the server accepts.</p> </td> </tr> </table> <h2>按钮控制</h2> <p>HTML中有多种创建可点击按钮的方法。您还可以通过将<input>标记的type属性设置为button来创建可点击的<b>按钮</b>。 type属性可以采用以下值-</p> <table class="table"> <tr> <th>Sr.No</th> <th style="text-align:center;">Type & Description</th> </tr> <tr> <td class="ts">1</td> <td> <p><b>submit</b></p> <p>This creates a button that automatically submits a form.</p> </td> </tr> <tr> <td class="ts">2</td> <td> <p><b>reset</b></p> <p>This creates a button that automatically resets form controls to their initial values.</p> </td> </tr> <tr> <td class="ts">3</td> <td> <p><b>button</b></p> <p>This creates a button that is used to trigger a client-side script when the user clicks that button.</p> </td> </tr> <tr> <td class="ts">4</td> <td> <p><b>image</b></p> <p>This creates a clickable button but we can use an image as background of the button.</p> </td> </tr> </table> <h3>例</h3> <p>这是具有三种类型的按钮的表单的示例HTML代码-</p> <div class="demo-view"><a class="demo" href="http://tpcg.io/PeT9hv" rel="nofollow noopener" target="_blank"><i class="fa-external-link"></i>现场演示</a></div> <div class="hcb_wrap"> <pre class="prism line-numbers lang-java" data-lang="java"><code class="language-markup"><title>File Upload Box</title> <form> <input type="submit" name="submit" value="Submit"> <input type="reset" name="reset" value="Reset"> <input type="button" name="ok" value="OK"> <input type="image" name="imagebutton" src="/html/images/logo.png"> </form> </code></pre> </div> <p>这将产生以下结果-</p> <p><iframe class="result" height="150px" loading="lazy" onload="resizeFrame(this)" src="/html/src/button_controls.htm" width="660px"></iframe></p> <h2>隐藏的表单控件</h2> <p>隐藏的表单控件用于隐藏页面内的数据，以后可以将其推送到服务器。此控件隐藏在代码内，并且不会出现在实际页面上。例如，以下隐藏形式用于保留当前页码。当用户单击下一页时，隐藏控件的值将被发送到Web服务器，并在此基于传递的当前页面确定下一步将显示哪个页面。</p> <h3>例</h3> <p>这是示例HTML代码，显示隐藏控件的用法-</p> <div class="demo-view"><a class="demo" href="http://tpcg.io/1SKStx" rel="nofollow noopener" target="_blank"><i class="fa-external-link"></i>现场演示</a></div> <div class="hcb_wrap"> <pre class="prism line-numbers lang-java" data-lang="java"><code class="language-markup"><title>File Upload Box</title> <form> <p>This is page 10</p> <input type="hidden" name="pagename" value="10"> <input type="submit" name="submit" value="Submit"> <input type="reset" name="reset" value="Reset"> </form> </code></pre> </div> <p>这将产生以下结果-</p> <p><iframe class="result" height="100px" loading="lazy" onload="resizeFrame(this)" src="/html/src/hidden_form_controls.htm" width="660px"></iframe></p></div> </div> </div> </div> </div> </div> <footer> <div class="bg-white text-center pb-1"> <p class="text-body-tertiary pt-3 lh-lg text-opacity-50" id="footer-text">Copyright © 2020 - 2024 版权所有 <br> <a href="https://beian.miit.gov.cn/" target="_blank" class="text-opacity-50 text-body-tertiary mt-1 mb-1">蜀ICP备20006366号-1</a> <br> Made with ❤️ in Chengdu </p> </div> </footer>  <script src="https://unpkg.com/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>  <script src="https://cdn.jsdelivr.net/npm/@meilisearch/instant-meilisearch/dist/instant-meilisearch.umd.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/instantsearch.js@4"></script> <script src="https://www.imangodoc.com/static/javascript/meili_custom.js"></script>  <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-core.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/toolbar/prism-toolbar.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/autoloader/prism-autoloader.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js"></script> </body> </html>