web-dev-qa-db-ja.com

htmlフォームタグの目的は何ですか

HTMLのフォームタグの目的がわかりません。

Formタグを使用せずに、任意の入力タイプを簡単に完全に使用できます。入力をラップすることはほとんど冗長なようです。

さらに、ajaxを使用してサーバー側のページを呼び出す場合、そのためにjQueryを使用できます。唯一の例外は、何らかの理由でフォームタグの周りにアップロードスクリプトをラップする必要があることに気づいたことです。

それでは、なぜフォームはテキスト入力のような単純なものにこれほど広く使われているのでしょうか？それは非常に古風で不必要なことのように思えます。

私はそれの利点や必要性を見ていないだけです。たぶん私は何かが欠けています。

javascriptphpjqueryhtmlforms
70
D-Marc

不足しているのは、セマンティックマークアップとDOMの理解です。

現実的には、HTML5マークアップを使用すると、ほとんど何でもできます。ほとんどのブラウザーはそれを解析します。前回チェックしたとき、WebKit/Blinkは <input> elements内の擬似要素 も許可します。これは仕様の明らかな違反です-Geckoはそれほどではありません。ただし、セマンティクスに関する限り、マークアップで好きなことを行うと、間違いなくマークアップが無効になります。

<input>要素の中に<form>要素を入れるのはなぜですか？同じ理由で、<li>タグを<ul>および<ol>要素の内部に配置します-それが属する場所です。 semanticallyであり、マークアップの定義に役立ちます。構文解析器、スクリーンリーダー、およびさまざまなソフトウェアは、構造的にだけでなく意味を持つマークアップが意味的に正しい場合、マークアップをよりよく理解できます。

<form>要素を使用すると、methodおよびaction属性を定義することもできます。これらの属性は、フォームが送信されたときにブラウザに何をするかを伝えます。 AJAXは100％のカバレッジツールではありません。Web開発者は、グレースフルデグラデーションを実践する必要があります。JSがオフになっている場合でも、フォームを送信し、データを転送できる必要があります。

最後に、フォームはすべてDOMに適切に登録されます。 JavaScriptでこれを覗いてみることができます。このページでコンソールを開き、次のように入力すると：

document.forms

ページ上のすべてのフォームの素晴らしいコレクションを取得します。検索バー、コメントボックス、回答ボックス-すべての適切なフォーム。このインターフェイスは、情報へのアクセス、およびこれらの要素との対話に役立ちます。たとえば、フォームは非常に簡単に serialized にできます。

ここにいくつかの読み物があります：

注：<input>要素はフォームの外部で使用できますが、何らかの方法でデータを送信する場合は、フォームを使用する必要があります。

これは、私が質問をひっくり返す答えの一部です。

フォームを避けることで、どのように人生をより困難にしていますか？

何よりもまず-コンテナ要素。誰が必要ですか？！

確かにあなたの小さな<input>と<button>要素はネストされていますinside何らかのコンテナ要素ですか？他のすべての真ん中に浮かんでいるだけではいけません。 <form>でない場合、何ですか？ <div>？ <span>？

これらの要素haveはどこかに存在し、マークアップが狂った混乱でない限り、コンテナ要素は単なるフォームになります。

いや？ああ。

この時点で、これらすべての異なるAJAX状況に対してイベントハンドラーを作成する方法について、私の頭の中の声は非常に好奇心が強いです。マークアップを削減する必要がある場合は、たくさんあるはずです。次に、各要素の「セット」に対応する各AJAXイベントにカスタム関数を作成する必要があります-これは個別にまたはクラスをターゲットに設定する必要がありますか？これらの要素は、マークアップの周りを動き回るだけで、必要になるまで何でもすることがわかっているので、これらの要素を実際にグループ化します。

そのため、いくつかのハンドラをカスタムコードします。

$('#searchButton').on('click', function (e) {
  e.preventDefault();

  var search = $('#mySearch');

  $.ajax({
    url: 'http://example.com/text',
    type: 'GET',
    dataType: 'text',
    data: 'query=' + search.val(),
    success: function (data) {
      console.log(data);
    }
  });
});


$('#login').on('click', function (e) {
  e.preventDefault();
  var user = $('#username'),
      pass = $('#password'),
      rem = $('#remember');
  
  $.ajax({
    url: 'http://example.com/login',
    type: 'POST',
    data: user.add(pass, rem).serialize(),
    dataType: 'text',
    success: function (data) {
      console.log(data);
    }
  });
});
<!-- No containers, extra markup is silly. -->

<input type="text" id="mySearch" value="query" />
<button id="searchButton">Search</button>
<input type="text" id="username" name="username" value="user" />
<input type="password" id="password" name="password" value="pass" />
<input type="checkbox" id="remember" name="remember" checked /> stay logged in
<button id="login">Login</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

これは次のようなことを言う部分です。

'私は完全に再利用可能な関数を使用しています。誇張しないでください。 '

十分ですが、これらの一意の要素セットまたはターゲットクラスセットを作成する必要がありますか？ groupこれらの要素はどうにかする必要があります。

目を貸してください（または、スクリーンリーダーを使用しているときに何らかの支援が必要な場合は、耳を貸してください。これにすべての [〜＃〜] aria [〜＃〜] を追加できます。 セマンティックマークアップ、右？）、そして汎用形式の威力を見よ。

function genericAjaxForm (e) {
  e.preventDefault();
  var form = $(this);
  
  return $.ajax({
    url: form.attr('action'),
    type: form.attr('method'),
    dataType: form.data('type'),
    data: form.serialize()
  });
}

$('#login-form').on('submit', function (e) {
  genericAjaxForm.call(this, e).done(function (data) {
    console.log(data);
  });
});
<form action="http://example.com/login" method="POST" data-type="text" id="login-form">
  <input type="text" name="username" value="user" />
  <input type="password" name="password" value="mypass" />
  <label>
    <input type="checkbox" name="remember" /> Remember me
  </label>

  <button type="submit">Login</button>
</form>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

これを任意の一般的なフォームで使用し、グレースフルデグラデーションを維持し、フォームにcompletelyに機能させる方法を記述させます。 genericスタイルを維持しながら、この基本機能を拡張できます。よりモジュール化され、頭痛が少なくなります。 JavaScriptは、適切な要素を非表示にしたり、受け取った応答を処理したりするなど、独自のことを心配しています。

そして今、あなたは言う：

ただし、特定のIDを持つ<div>要素で擬似フォームをラップします。次に、.findおよび.serializeで緩やかに入力をターゲットにできます。 。 '

あ、あれは何？実際に<input>要素をコンテナにラップしますか？

なぜそれがまだフォームではないのですか？

55
Oka

AJAX（これは開発の初期段階で役立つかもしれません）なしでフォームを送信できるようにしたい場合、フォームタグはまだ必要です。フォームタグがなくても、いくつかの利点が頭に浮かびます。

  1. フォームタグを使用すると、意図を示すことで、人々がコードを読んで理解できる場合があります。
  2. 'submit'メソッドはフォームで使用できます。 input [type = submit]を持つフォームがあり、それが無効になっていない場合、他のフォーム入力の1つに入力中に誰かが「enter」を押すと、フォームが送信されます。入力要素で 'keydown'イベントをリッスンすることでそれを行うことができますが、フォームタグで無料で取得できるのは素晴らしいUIです。
  3. Formタグでのみ機能する、またはformタグで簡単になるものが他にもいくつかあります。開発者は最終的にこれらのケースに遭遇し、常にどこでもそれらを使用して問題を回避する方が簡単だと判断します。本当に、本当の質問は、なぜnot formタグを使用するのですか？
4
Michael Hewson

HTML要素は、Webサーバーに情報を送信するためのインタラクティブなコントロールを含むドキュメントセクションを表します。

私たちはすべて、HTML Webページ上のフォームに精通しています。多くのさまざまな理由で、人々や企業が私たちの電子メールアドレス、名前、サイトのURLを求めています。今日のインターネットでの製品の購入は非常に簡単であり、セキュリティデバイスの出現により、詳細情報や苦労して稼いだお金の送信に使用される方法は通常、フォームを介して実行されます。

詳細

リンク1

リンク2

0
Rohit Azad