我們如何重置HTML表單中的所有輸入欄位？-html教學-PHP中文網

首頁

web前端

html教學

我們如何重置HTML表單中的所有輸入欄位？

PHPz

Sep 20, 2023 pm 05:37 PM

重置html表單

在本文中，我們將討論如何重置 HTML 表單中的所有輸入欄位。在這裡，我們使用重置按鈕來清除 HTML 表單中的輸入欄位。

在 HTML 表單中，我們使用標記來取得使用者輸入。若要清除 HTML 表單中的所有輸入，請使用帶有 type 屬性的 ## 標籤進行重設。

我們如何重置HTML表單中的所有輸入欄位？

文法

以下是重置按鈕的語法。

<input type="reset">

登入後複製

範例 1

以下範例示範如何重設 HTML 表單中的所有輸入欄位。

在此範例中，我們將使用重置按鈕清除文字欄位中的文字。

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8" />
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Clear all the input in HTML forms</title>
</head>
<body>
   <form>
      <input type="text" name="input" />
      <input type="reset" value="reset" />
   </form>
</body>
</html>

登入後複製

點擊重置按鈕後，表單被清除。

範例 2

以下範例示範如何重設 HTML 表單中的所有輸入欄位。

在此範例中，我們將使用重置按鈕清除文字欄位中的文字。

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8" />
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>reset example</title>
</head>
<body>
   <form>
      Enter name:</br>
      <input type="text" name="input" /></br>
      Enter Age:</br>
      <input type="text" name="input1" /></br>
      <input type="reset" value="reset" />
   </form>
</body>
</html>

登入後複製

點擊重置按鈕後，表單被清除。

範例 3

您可以嘗試執行以下程式碼來清除 HTML 表單中的所有輸入 -

<!DOCTYPE html>
<html>
<body>
   <form>
      Student Name:<br>
      <input type="text" name="sname">
      <br>
      Student Subject:<br>
      <input type="text" name="ssubject">
      <br>
      <input type="reset" value="reset">
   </form>
</body>
</html>

登入後複製

以上是我們如何重置HTML表單中的所有輸入欄位？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7807

Java教學

1646

CakePHP 教程

1402

Laravel 教程

1300

PHP教程

1236

Related knowledge

HTML容易為初學者學習嗎？ Apr 07, 2025 am 12:11 AM

HTML適合初學者學習，因為它簡單易學且能快速看到成果。 1)HTML的學習曲線平緩，易於上手。 2)只需掌握基本標籤即可開始創建網頁。 3)靈活性高，可與CSS和JavaScript結合使用。 4)豐富的學習資源和現代工具支持學習過程。

HTML，CSS和JavaScript的角色：核心職責 Apr 08, 2025 pm 07:05 PM

HTML定義網頁結構，CSS負責樣式和佈局，JavaScript賦予動態交互。三者在網頁開發中各司其職，共同構建豐富多彩的網站。

了解HTML，CSS和JavaScript：初學者指南 Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

HTML中起始標籤的示例是什麼？ Apr 06, 2025 am 12:04 AM

AnexampleOfAstartingTaginHtmlis，beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements，defiteTheeTheErtypes，andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。