h:form　の使い方

JSF2.0

をつかってみる

htmlの<form>を使いたいときに使用するタグ

<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:f="http://java.sun.com/jsf/core"
 xmlns:h="http://java.sun.com/jsf/html">
<h:head>
 <title>h:form</title>
</h:head>
<h:body>
  <h:form>
  </h:form>
</h:body>
</html>

普通に使うときは何の属性も設定しなくても良い。かも。。
↓出力結果

<html xmlns="http://www.w3.org/1999/xhtml"><head> 
 <title>h:form</title></head><body> 
<form id="j_idt6" name="j_idt6" method="post" action="/jsfstudy/view/tag/form.jsf" enctype="application/x-www-form-urlencoded"> 
<input type="hidden" name="j_idt6" value="j_idt6" /> 
<input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="654063665875284213:-400417663052271228" autocomplete="off" /> 
</form></body> 
</html>

出力結果をみても分かるとおりいろいろ勝手に必要な情報が出力されます。
"hidden"の<input>が2つ生成されてますが、これはJSFを動かすために必要な情報が勝手に出力されているのだとか。。

accept属性

MIME タイプを指定したりする属性。

<h:form accept="image/jpeg">
</h:form>

↓出力結果

<form id="j_idt6" name="j_idt6" method="post" action="/jsfstudy/view/tag/form.jsf" accept="image/jpeg" enctype="application/x-www-form-urlencoded">

複数設定したいときはカンマ区切りらしい。

acceptcharset属性

このフォームで使用できる文字コードを指定できる。

  <h:form acceptcharset="UTF-8">
  </h:form>

↓出力結果

<form id="j_idt6" name="j_idt6" method="post" action="/jsfstudy/view/tag/form.jsf" accept-charset="UTF-8" enctype="application/x-www-form-urlencoded">

複数設定したいときはカンマ区切りらしい。

enctype属性

フォームでデータを送るときのエンコードタイプを指定できる。
デフォルトは"application/x-www-form-urlencoded"

  <h:form enctype="multipart/form-data">
  </h:form>

↓出力結果

<form id="j_idt6" name="j_idt6" method="post" action="/jsfstudy/view/tag/form.jsf" enctype="multipart/form-data">

target属性

<a>とかに使ったりするtarget属性と一緒
別windowとかで開きたいときとか使ったりします。

  <h:form target="_blank">
  </h:form>

↓出力結果

<form id="j_idt6" name="j_idt6" method="post" action="/jsfstudy/view/tag/form.jsf" enctype="application/x-www-form-urlencoded" target="_blank">

prependId属性

これなんだか分からないので実験
documentには

Flag indicating whether or not this form should prepend its id to its descendent's id during the clientId generation process. If this flag is not set, the default value is true.

google翻訳にお願いしてみた結果、日本語

フラグは、このフォームclientIdは生成プロセス中にIDがいるその子孫に、そのidを付加するかどうかを示す。このフラグが設定されていない場合、デフォルト値はtrueです。

日本語から分かったことは
・重要そう
・デフォルトはtrue
・idを付加するかどうか

またいろいろ調べてたら、フォームの中の要素があーだこーだかいてありました。
なので、まずはprependId属性をtrueで実行

  <h:form prependId="true">
    <h:inputText id="id"/>
  </h:form>

↓出力結果

<form id="j_idt6" name="j_idt6" method="post" action="/jsfstudy/view/tag/form.jsf" enctype="application/x-www-form-urlencoded"> 
<input type="hidden" name="j_idt6" value="j_idt6" /> 
<input id="j_idt6:id" type="text" name="j_idt6:id" /><input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="-5334207208270918163:4440497486920892556" autocomplete="off" /> 
</form>

次にprependId属性をfalseで実行

  <h:form prependId="false">
    <h:inputText id="id"/>
  </h:form>

↓出力結果

<form id="j_idt6" name="j_idt6" method="post" action="/jsfstudy/view/tag/form.jsf" enctype="application/x-www-form-urlencoded"> 
<input type="hidden" name="j_idt6" value="j_idt6" /> 
<input id="id" type="text" name="id" /><input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="4746133946035856457:-3302799949423928232" autocomplete="off" /> 
</form>

どうやら内部的にformのid属性をその中のタグに付与するのがデフォルトで
falseにすると付与しませんってことらしい。

確かにjavascrptとかでgetElementByIdとかしてたらid変わっちゃうと動かないし、
CSSをid指定して適用できなくなっちゃう。

結構重要かもです。