カスタムフォーム

□未翻訳

□翻訳中

■翻訳完了（細田謙二）

■レビュー（Omi Chiba）

カスタムフォーム

フォームがSQLFORMやSQLFORM.factory、CRUDを利用して作られている場合、それをビューに埋め込む方法は複数あり、複数の度合いのカスタマイズができるようになります。たとえば次のモデルを考えてみます：

If a form is created with SQLFORM, SQLFORM.factory or CRUD, there are multiple ways it can be embedded in a view allowing multiple degrees of customization. Consider for example the following model:

1.

2.

3.

db.define_table('image',

Field('name'),

Field('file', 'upload'))

また、次のアップロード・アクションも考えます：

and upload action

1.

2.

def upload_image():

return dict(form=crud.create(db.image))

最も簡単に、upload_imageに対するビューにおいてフォームを埋め込む方法は次の通りです：

The simplest way to embed the form in the view for upload_image is

1.

{{=form}}

これは標準のテーブル・レイアウトになります。別のレイアウトを使用したい場合、フォームを要素に分解することができます

This results in a standard table layout. If you wish to use a different layout, you can break the form into components

1.

2.

3.

4.

5.

{{=form.custom.begin}}

Image name: <div>{{=form.custom.widget.name}}</div>

Image file: <div>{{=form.custom.widget.file}}</div>

Click here to upload: {{=form.custom.submit}}

{{=form.custom.end}}

ここで、form.custom.widget[fieldname]は、そのフィールドに対して適切なウィジェットにシリアライズされます。フォームがサブミットされてエラーを含む場合、そのエラーは従来通りウィジェットの下に追加されます。

where form.custom.widget[fieldname] gets serialized into the proper widget for the field. If the form is submitted and it contains errors, they are appended below the widgets, as usual.

上記のサンプルフォームは下図のように表示されます。

The above sample form is show in the image below.

ただし、同様の結果は次のようにしても得られます：

Notice that a similar result could have been obtained with:

1.

crud.settings.formstyle='table2cols'

この場合、カスタムフォームを使用していません。他の可能なformstyleは、"table3cols" (デフォルト)、"divs"、"ul"です。

without using a custom form. Other possible formstyles are "table3cols" (the default), "divs" and "ul".

web2pyによってシリアライズされたウィジェットを使用したくない場合は、それをHTMLで置き換えることができます。このために有用ないくつかの変数があります：

If you do not wish to use the widgets serialized by web2py, you can replace them with HTML. There are some variables that will be useful for this:

    • form.custom.label[fieldname] contains the label for the field.

    • form.custom.dspval[fieldname] form-type and field-type dependent display representation of the field.

    • form.custom.inpval[fieldname] form-type and field-type dependent values to be used in field code.

以下に説明する慣例に従うことは重要です。

It is important to follow the conventions described below.

CSSの慣例

CSS Conventions

SQLFORM、SQLFORM.factory、CRUDによって生成されたフォーム内の​​タグは、フォームのさらなるカスタマイズに使用することができる厳密なCSSの命名規則に従っています。

Tags in forms generated by SQLFORM, SQLFORM.factory and CRUD follow a strict CSS naming convention that can be used to further customize the forms.

"mytable"テーブルと"string"型の"myfield"フィールドが与えられたとき、次のものによってレンダリングされます。

Given a table "mytable", and a field "myfield" of type "string", it is rendered by default by a

1.

SQLFORM.widgets.string.widget

これは次のようになります：

that looks like this:

1.

2.

<input type="text" name="myfield" id="mytable_myfield"

class="string" />

以下のことに注意してください：

Notice that:

  • INPUTタグのクラスはフィールドの型と同じです。これは"web2py_ajax.html"におけるjQueryのコードが機能するのに非常に重要です。これは、"integer"か"double"のフィールドにおいて数値しか持たないようにし、"time"、"date"、"datetime"のフィールドではポップアップのカレンダーが表示されるようにします。

  • the class of the INPUT tag is the same as the type of the field. This is very important for the jQuery code in "web2py_ajax.html" to work. It makes sure that you can only have numbers in "integer" and "double" fields, and that "time", "date" and "datetime" fields display the popup calendar.

  • idは、クラスの名前とフィールドの名前をアンダースコアで結合したものです。これにより、たとえばjQuery('#mytable_myfield')のようにして一意に参照することができ、フィールドのスタイルシートを操作したり、フィールドのイベントに関連付けられたアクション(focus、blur、keyupなど)をバインドすることができるようになります。

  • the id is the name of the class plus the name of the field, joined by one underscore. This allows you to uniquely refer to the field via, for example, jQuery('#mytable_myfield')and manipulate the stylesheet of the field or bind actions associated to the field events (focus, blur, keyup, etc.).

  • nameは、想像通り、フィールド名になります。

    • the name is, as you would expect, the field name.

エラーの非表示

Hide Errors

場合によっては、自動的なエラー配置を無効にして、フォームのエラーメッセージをデフォルトではないどこか別の場所に表示したいことがあります。これを行うのは簡単です。

Occasionally, you may want to disable the automatic error placement and display form error messages in some place other than the default. That can be done easily.

  • FORMまたはSQLFORMの場合は、hideerror=Trueをacceptsメソッドに渡してください。

    • In the case of FORM or SQLFORM, pass hideerror=True to the accepts method.

  • CRUDの場合は、crud.settings.hideerror=Trueに設定してください。

    • In the case of CRUD, set crud.settings.hideerror=True

エラーを表示するビューを変更したくなることもあります(もはや自動的に表示されないので)。

You may also want to modify the views to display the error (since they are no longer displayed automatically).

次の例では、エラーをフォームの中ではなく、フォームの上に表示されるようにしています。

Here is an example where the errors are displayed above the form and not in the form.

1.

2.

3.

4.

5.

6.

7.

8.

9.

10.

{{if form.errors:}}

Your submitted form contains the following errors:

<ul>

{{for fieldname in form.errors:}}

<li>{{=fieldname}} error: {{=form.errors[fieldname]}}</li>

{{pass}}

</ul>

{{form.errors.clear()}}

{{pass}}

{{=form}}

エラーは下図のように表示されます：

The errors will displayed as in the image shown below.

このメカニズムはカスタムフォームでも動作します。

This mechanism also works for custom forms.