2012-09-11 17 views
11

HTMLフォームを分割することが可能かどうか疑問に思っていますか?分割HTMLフォーム?

基本的に私はその後、私は原因それがどのように動作するかにそれ自身のフォームを含んでアヤックス画像のアップロードを、持っている通常のフォームに

<form action="/post.php" method="post" id="postform"> 
    <label for="name">Name: </label> 
    <input id="name" name="name" value=""/> 
</form> 

を持っています。

その後、最初のフォームの送信ボタンが必要になります。

私はJavaScriptの送信ボタンを持っていることがわかっていますが、それはJavascriptを使わずに誰でも外出することができます。 フォームを複数のグループに分割することが可能かどうか疑問に思っていますか?

私は、これは動作しません知っているが、それは私が何をしたいのかを示します。..

<form action="/post.php" method="post" id="postform"> 
    <label for="name">Name: </label> 
    <input id="name" name="name" value=""/> 
</form> 

<!-- form for ajax image upload here --> 

<!-- continuation of first form --> 
<form action="/post.php" method="post" id="postform"> 
    <!-- this button should submit the top form --> 
    <input type="submit" value="Submit"/> 
</form> 
+0

「複数のグループ」とはどういう意味ですか?ページに複数のフォームを配置することができます(入れ子になっていない限り)。 – Oded

+1

基本的に1つのフォームは2つに分割され、私は質問に追加します... – Hailwood

+0

そこに行く...意味がありますか? – Hailwood

答えて

23

HTML5でhttps://stackoverflow.com/a/8380229/556085で指摘したようにその可能性:

サンプルフォーム:

<form id="formID" action="action" method="post"> 
    Text: <input type="text" value="some_id" name="some_name" /> 
</form> 

そして、送信するフォームを参照するフォームをIDを使用して送信します。

<input type="submit" name="save" value="Save" form="formID" /> 
+0

これはIEでサポートされていないことに注意してくださいhttp://caniuse.com/#feat=form-attribute – HaroldHues

+1

@HaroldHuesこれは関連性があります:https://s-media-cache-ak0.pinimg.com /originals/78/80/25/7880252a1887240607b4e3f5f672f88d.jpg – KillerX

1

あなたが異なるIDで、異なるフォームタグにより分離され、異なる形態を有することができ、その後、あなたがイベントを提出するフォームを発射することができますjavascriptで。

クライアント上のJavaScriptがなければ、私はそれを行う方法が分からない...

+1

javascriptなしではできないようです:/ – Hailwood

+0

HTML 6には、ネイティブのスクリプト言語があります。 ;) – Mahdi

0

フォームのプロパティは、すべてのブラウザで機能しません。

私は通常、IDでフォームの非表示入力を行います。フォームの外側の入力で、隠された入力をonblurで更新します。

<form action="/post.php" method="post" id="postform"> 
    <input type="hidden" id="phone" name="phone"/> 
    <label for="name">Name: </label> 
    <input id="name" name="name" value=""/> 
</form> 

<input type="phone" onblur="javascript:getElementById('phone').value=this.value"/>