web-dev-qa-db-ja.com

ページ内の複数のフォームタグまたは1つのフォームタグ?

HTML5を始めたばかりで、Webページごとに<form>タグを1つ使用するか、複数のフォームタグを使用する必要があるかを一般的にで知りたいと思っています。

多分それは状況に依存しますが、ここに2つの異なるシナリオがあります:

  1. ワンサインアップフォーム
  2. ログイン、メーリングリストへの参加など、複数のサブフォームがあるホームページ.

フォームタグを別のタグの中に入れるのは悪いのですか、それとも規格ごとに問題ないのですか?

ありがとう

編集 formタグの目的を簡単に説明していただけますか?

18
haansi

あなたはすでにあなたの質問に答えているように感じます。

  1. 1つのサインアップフォーム= 1つのフォームタグ。
  2. 複数のフォーム=多くのフォームタグ。

入れ子にしないでください。

[〜#〜] edit [〜#〜]

フォームタグ は、GETまたはPOSTリクエストを使用して最終的にターゲットURLに渡すさまざまなフィールド(つまり入力タグ)を保持するためのものです。

たとえば、次のログインフォームを使用します。

<form action="login.php">
  <input id="name" type="text" name="name">
  <input id="passwd" type="password" name="passwd">
  <input type="submit" value="Login">
</form>

これには、ログイン、パスワード、および送信ボタンがあります。 「ログイン」ボタン(タイプ=「送信」)が押されると、フォームはその情報を取得して別のURL(この場合は「login.php」に送信します) 、サインイン、キャプチャを表示)。

22
Phil

1つのページに複数のフォームを配置できない理由はありません。フォームはどのフィールドが何のためにあるかを識別できないため、フォームをネストすることはできません。

概念的には、2つのフォームの情報をサイトの同じセクションまたは領域に配置する必要がある場合(たとえば、サインアップフォームとメーリングリストフォームなどを組み合わせる場合)、1つのフォームを使用して整理します。反対側のPOST変数からの情報。意味のある方法で名前を付けている限り、ネストされたフォームでこれを達成することさえ望まないはずです。

編集:

質問にさらに回答するために、最も基本的な使用例では、フォームタグを使用してURLにデータを送信します。フォームを送信するために選択したURLは、通常、データを受信し、データベースにデータを保存したり、特定のユーザー名とパスワードに基づいて新しいユーザーを作成するなど、そのデータに対してアクションを実行する前に何らかの方法で処理します。

9
Chiubaka

フォームをフォーム内に配置することは意味がありませんが、各フォーム内のフィールドをどのように区別しますか?それらはマスターフォームの一部ですか?子フォーム?どちらも?

入力を読み取る必要があるエリアごとにフォームを分けることをお勧めします。ログイン領域がある場合は、そのためのフォームを作成します。そのページにコメント領域もある場合は、別のフォームでそのイベントを処理する必要があります。

2
mash

はい、1つのHTMLページ内で複数のタグを使用できます。 1つのHTMLページから2つの異なるデータを送信する必要がある場合があります。そのためには、複数のタグを使用する必要があります。タグを使用して、データを特定のサーブレットまたはJSP(Javaの場合)に送信します。を通じてクライアントに関する情報を提供します。 action = "#"と呼ばれるタグ内の属性があります。内部のデータが移動する必要がある特定のサーブレット名を定義したため、クライアント(HTML)からサーブレット(サーバー)にデータを提供します。次に、サーブレットは、データをデータベースに挿入するように、提供されたデータを操作します。次のコードは理解するのに役立ちます。ここで、2つのタグは2つの異なるタスクに使用され、2つの異なるサーブレットによって処理されます。

<%@ page language="Java" contentType="text/html; charset=ISO-8859-1"
        pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Registration | Badhon</title>
<link rel="stylesheet" type="text/css" href="registration.css">
</head>


<body background="images/registration.jpg">



        <div class="title">
                <h1>Registration</h1>
        </div>

        <div class="container">

                <div class="left">
       <div><h1>Choose an image (300*300)</h1></div>
   
   
   /* First Form tag ---------------------*/
      <form name="fileform" method="post" action="uploadImage" enctype="multipart/form-data">
                                
                                <br> <label for="photo"> Portrait Photo: </label> <input
                                        type="file" name="photo" size="50" placeholder="Upload Your Image"
                                        required /><br>
                                <br> <input type="submit" value="Save">
                        </form>
      
 
 /* End of First Form Tag---------------------*/
         
   
   </div>


                <div class="right">
                        <div class="formbox">
                                
  /* Second Form tag------------------ */      
        <form action="DonarRegister">
                                        <p>Name</p>
                                        <input type="text" name="name" placeholder="Name">
                                        
                                        <p>Username</p>
                                        <input type="text" name="username" placeholder="User_name">
                                        
                                        <p>Password</p>
                                        <input type="Password" name="password" placeholder="..........">
                                        
                                        <p>Blood Group</p>
                                        <input type="text" name="bloodgroup" placeholder="O positive">
                                        
                                        <p>Age</p>
                                        <input type="number" name="age">
                                        
                                        <p>Mobile Number</p>
                                        <input type="text" name="mobilenumber" placeholder="......">
                                        
                                        <p>email</p>
                                        <input type="text" name="email" placeholder="......">
                                        
                                        <p>Address</p>
                                        <input type="text" name="address" placeholder="Village/Thana/District"> 
                                        <input type="submit" name="" value="Register">
                                    
                                   <p> <h5>Have already an account !! Then <a href="login.jsp">just login</a></h5></p>



</form>
/* End of Second form tag ----------------- */ 
 
 
                        </div>
                </div>
        </div>
</body>
</html>

データベースなど。

0
Noman_ibrahim