HTMLフォームが非表示になりました

HTML フォームは Web 開発で一般的に使用されるツールで、ユーザーがデータを入力してサーバーに送信できるようにします。フォームでは、一部の情報はユーザーが入力して表示する必要がありますが、一部の情報は非表示にする必要があります。この記事ではHTMLフォームを非表示にする方法を紹介します。

1. フォーム要素を非表示にする

HTML フォームには「隠し要素」と呼ばれる要素があり、ページのレイアウトに影響を与えずに、ページ上の指定された要素を非表示にする機能があります。 . .単純な隠し要素のコードは次のとおりです。

<input type="hidden" name="id" value="123">

このコードは、隠しテキスト入力ボックスを作成します。その name 属性は "id"、その value 属性は "123" です。ユーザーがフォームを送信すると、非表示要素の値もサーバーに送信されます。

2. フォーム全体を非表示にする

フォーム全体を非表示にする必要がある場合があります。これは CSS を使用して実現できます。たとえば、次のコードはページ上のフォームを非表示にします:

<form id="myForm">
  <input type="text" name="username">
  <input type="password" name="password">
  <button type="submit">Submit</button>
</form>

<style>
#myForm {
  display: none;
}
</style>

上記のコードでは、フォームは ID が「myForm」の

要素に含まれています。次に、CSS を使用してフォームを非表示にし、表示属性を「none」に設定するだけです。

3. フォームの特定のフィールドを非表示にする

フォーム内の 1 つ以上のフィールドのみを非表示にしたい場合は、CSS を使用してこれを実現できます。たとえば、次のコードはフォーム内の「パスワード」テキスト入力ボックスを非表示にします。

<form>
  <input type="text" name="username">
  <input type="password" name="password">
  <button type="submit">Submit</button>
</form>

<style>
input[name="password"] {
  display: none;
}
</style>

上記のコードでは、CSS 属性セレクターを使用して、name 属性が「password」である入力ボックスを選択します。表示プロパティを「なし」に設定します。

4. フォームの特定の部分を非表示にする

フォームをいくつかの部分に分割し、ユーザーが 1 つの部分に入力した後、その部分を非表示にし、次の部分を表示します。これは JavaScript を使用して実現できます。例:

<form>
  <div id="part1">
    <input type="text" name="name">
    <input type="email" name="email">
    <button onclick="nextPart()">Next</button>
  </div>
  <div id="part2" style="display:none;">
    <input type="password" name="password">
    <button type="submit">Submit</button>
  </div>
</form>

<script>
function nextPart() {
  document.getElementById("part1").style.display = "none";
  document.getElementById("part2").style.display = "block";
}
</script>

上記のコードでは、フォームは 2 つの部分、つまり ID が "part1" と "part2" を持つ 2 つの

要素に分割されており、"part2" は最初に "display" に設定されています。 :none;" と入力すると、このセクションが非表示になります。 「次へ」ボタンをクリックすると nextPart() 関数が呼び出され、「part1」と「part2」のスタイルを「display:none;」と「display:block;」に設定して非表示にします。そして表示します。

概要:

Web 開発では、HTML フォーム内の一部の情報を非表示にする必要があります。これは、非表示要素、CSS、JavaScript などの方法を使用して実現できます。開発者は、実際のニーズに基づいて適切な方法を選択し、より良いユーザー エクスペリエンスを実現できます。

以上がHTMLフォームが非表示になりましたの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。