AUIタグを使ったフォームの構築

AUIタグライブラリは、アプリケーションのフォームを構築するために必要なすべてのコンポーネントを提供します。 AUIタグは、標準的なフォーム要素に、カスタムネームスペーシング、ローカライゼーション、さらには入力値の検証などの多くの利点を提供します。複数の属性が用意されており、ユーザーが望む体験を実現することができます。

以下の手順で、AUIタグを使用してフォームを構築します。

ポートレットのauitaglib宣言を、view.jspに追加してください（まだの場合）。
```
<%@ taglib prefix="aui" uri="http://liferay.com/tld/aui" %>
```

以下のタグを使用してフォームを作成します。各タグは、対応するtaglibdocにリンクしており、利用可能な属性が記載されています。

以下にフォームの例を示します。

<aui:form name="fm">
    <aui:fieldset-group markupView="lexicon">
        <aui:fieldset label="Personal Information">
            <aui:row>
                <aui:col width="50">
                    <aui:input label="First Name" name="firstName" type="text" />
                </aui:col>
                <aui:col width="50">
                    <aui:input label="Last Name" name="lastName" type="text" />
                </aui:col>
            </aui:row>
            <aui:row>
                <aui:col width="50">
                    <aui:input label="Username" name="username" type="text" />
                </aui:col>
                <aui:col width="50">
                    <aui:input label="Email" name="email" type="email" />
                </aui:col>
            </aui:row>
        </aui:fieldset>
    </aui:fieldset-group>
    <aui:fieldset-group markupView="lexicon">
        <aui:fieldset label="Miscellaneous">
            <aui:input label="Hobbies" name="hobbies" type="textarea" />
            <aui:input label="Receive email updates" name="emailUpdates" type="checkbox" />
        </aui:fieldset>
    </aui:fieldset-group>
    <aui:button-row>
        <aui:button name="submitButton" type="submit" value="Submit" />
    </aui:button-row>
</aui:form>

AUIタグは、アプリケーションのフォームを作成するために必要なすべてを提供します。

オプションで、フォーム項目に入力値の検証を追加します。検証したい各フォームフィールドの中に、<aui:validator>タグを入れ子にします。 <aui:validator>タグのname属性で入力値の検証ルールを指定します（利用できる入力値の検証ルールは下表の通りです）。 errorMessage属性で、フィールドのデフォルトの検証エラーメッセージをオーバーライドすることができます。以下に構成例を示します。
```
<aui:form name="myForm">
    <aui:input name="password" id="password" label="Password"
    required="true" />
    <aui:input name="confirmPassword" id="password"
    label="Confirm Password" required="true">
        <aui:validator name="equalTo"
        errorMessage="The passwords much match. Please try again." >
        '#<portlet:namespace>password'
        </aui:validator>
    </aui:input>
</aui:form>
```

利用可能な入力値の検証ルールの全リストは、以下の表に示すとおりです。

ルール	Description	デフォルトのメッセージ
`acceptFiles`	フィールドが指定されたファイル形式のみを含むことができることを指定する。各ファイルの拡張子はカンマで区切る必要があります。例えば `<aui:validator name="acceptFiles">'jpg,png,tif,gif'</aui:validator>`のような場合です。	「有効な拡張子（[対応拡張子]）を持つファイルを入力してください。」
`alpha`	アルファベットの使用を許可します	「アルファベットのみ入力してください。」
`alphanum`	英数字を許可します	「英数字のみ入力してください。」
`日付`	日付を許可します	「有効な日付を入力してください。」
`digits`	数字を許可します	「数字のみ入力してください。」
`email`	メールアドレスを許可します	「有効なメールアドレスを入力してください。」
`equalTo`	指定されたフィールド IDを持つ他のフィールドと等しい内容を許可します。例えば、 `<aui:validator name="equalTo">'#<portlet:namespace/>password'</aui:validator>`のようになります。	「同じ値を再度入力してください。」
`max`	指定された値より小さい整数値を許可します。例えば、最大値20は、 `<aui:validator name="max">20</aui:validator>`と指定されます。	「[最大値]以下の値を入力してください。」
`maxLength`	指定されたサイズの最大フィールド長を許可します（ `max`と同じ構文に従う）。	「[max] 文字以下を入力してください。」
`分`	指定された最小値よりも大きな整数値を許可します（ `max`と同じ構文に従う）。	「[最小値]以上の値を入力してください。」
`minLength`	指定されたサイズより長いフィールド長を許可します（ `max`と同じ構文に従います）。	「[min] 文字以上を入力してください。」
`number`	数値を許可します	「正しい数字を入力してください。」
`range`	指定された範囲内の数値を許可します。例えば、1.23から10までの範囲を指定する場合、以下のようになります `<aui:validator name="range">[1.23,10]</aui:validator>`	「[0] と [1] の間の値を入力してください。」
`rangeLength`	指定された範囲内のフィールド長を許可します（ `range`と同じ構文に従う）	「[0] と [1] の間の文字数で入力してください。」
`required`	空白のフィールドを防ぎます	「このフィールドは必須です。」
`URL`	URLの値を許可します	「正しいURLを入力してください。」

これで、アプリケーション用のユーザーフレンドリーなフォームを作成する方法がわかりました。

AUIタグを使ったフォームの構築

関連トピック

Not finding what you're looking for?