テキストフィールド検証 Widget の挿入と編集



    テキストフィールド検証 Widget の挿入

    1. [挿入]-[Spry]-[Spry テキストフィールド検証] を選択します。
    2. [Input タグのアクセシビリティ属性] ダイアログボックスに情報を入力し、[OK] をクリックします。
    注意： [挿入] パネルの [Spry] カテゴリを使用してテキストフィールド検証 Widget を挿入することもできます。

    検証の種類とフォーマットの指定

    テキストフィールド検証 Widget では、さまざまな種類の検証を指定できます。 たとえば、クレジットカード番号を入力するテキストフィールドにはクレジットカード検証を指定できます。

    1. ドキュメントウィンドウでテキストフィールド検証 Widget を選択します。
    2. プロパティインスペクタ ([ウィンドウ]-[プロパティ]) で、[タイプ] メニューから検証の種類を選択します。
    3. 該当する場合は、[フォーマット] ポップアップメニューでフォーマットを選択します。
    ほとんどの検証では、検証が行われるために標準のフォーマットが必要になります。 たとえばテキストフィールドに整数検証を適用した場合は、テキストフィールドに数字が入力されない限り検証は行われません。 ただし検証の種類によっては、テキストフィールドに入力できるフォーマットの種類を選択できます。 次の表は、プロパティインスペクタで利用できる検証の種類とフォーマットのリストです。

    検証の種類

    フォーマット

    なし

    特別なフォーマットは不要です。

    整数

    数字のみを入力できます。

    電子メールアドレス

    @ およびピリオド (.) を含み、ピリオドの前後に 1 文字以上の文字がある 電子メールアドレスのみを入力できます。

    日付

    フォーマットはさまざまです。 プロパティインスペクタの [フォーマット] ポップアップメニューで選択します。

    時間

    フォーマットはさまざまです。 プロパティインスペクタの [フォーマット] ポップアップメニューで選択します。 「tt」は am/pm フォーマットを表し、「t」は a/p フォーマットを表します。

    クレジットカード

    フォーマットはさまざまです。 プロパティインスペクタの [フォーマット] ポップアップメニューで選択します。 4321 3456 4567 4567 のように、クレジットカード番号にスペースを入力することはできません。

    ZIP コード

    フォーマットはさまざまです。 プロパティインスペクタの [フォーマット] ポップアップメニューで選択します。

    電話番号

    米国またはカナダの (000) 000-0000 フォーマット、またはカスタムフォーマットで入力できます。 オプションでカスタムフォーマットを選択する場合は、[パターン] テキストボックスに 000.00(00) のようにフォーマットを入力します。

    社会保障番号

    社会保障番号を 000-00-0000 のフォーマットで入力できます。別のフォーマットを使用するには、検証のタイプとして [カスタム] を選択し、パターンを指定します。このパターン検証メカニズムで使用できる文字は ASCII 文字のみです。

    通貨

    1,000,000.00 または 1.000.000,00 のフォーマットで金額を入力できます。

    実数/科学的記数法

    整数 (1 など)、浮動値 (12.123 など)、科学的記数法による浮動値 (e を 10 の累乗数としたときの 1.212e+12、1.221e-12 など) など、さまざまな種類の数字を検証します。

    IP アドレス

    フォーマットはさまざまです。 プロパティインスペクタの [フォーマット] ポップアップメニューで選択します。

    URL

    http://xxx.xxx.xxx または ftp://xxx.xxx.xxx のフォーマットで URL を入力できます

    カスタム

    カスタム検証の種類とフォーマットを指定できます。 プロパティインスペクタにフォーマットのパターン (および、必要に応じてヒント) を入力します。このパターン検証メカニズムで使用できる文字は ASCII 文字のみです。

    検証を実行するタイミングの指定

    検証がどの時点で実行されるかを指定できます。指定できるのは、ユーザーが Widget の外側をクリックしたとき、ユーザーが入力すると同時、またはユーザーがフォームの送信を試みたときのいずれかです。

    1. ドキュメントウィンドウでテキストフィールド検証 Widget を選択します。
    2. プロパティインスペクタ ([ウィンドウ]-[プロパティ]) で、検証をどの時点で行うかを指定するオプションを選択します。 すべてのオプションを選択することも、[送信] のみを選択することもできます。
      onBlur
      ユーザーがテキストフィールドの外側をクリックしたときに常に検証します。

      onChange
      ユーザーがテキストフィールド内でテキストを変更したときに検証します。

      onSubmit
      ユーザーがフォームの送信を試みたときに検証します。送信オプションは初期設定で選択され、選択解除することはできません。

    最小および最大文字数の指定

    このオプションは、なし、整数、電子メールアドレス、および URL の検証についてのみ選択可能になります。

    1. ドキュメントウィンドウでテキストフィールド検証 Widget を選択します。
    2. プロパティインスペクタ ([ウィンドウ]-[プロパティ]) で、[最小文字数] または [最大文字数] ボックスに数字を入力します。 たとえば、[最小文字数] ボックスに「3」と入力すると、ユーザーが 3 文字以上入力した場合にのみ入力が受け入れられます。

    最小値および最大値の指定

    このオプションは、整数、時刻、通貨、および実数/科学的記数法の検証についてのみ選択可能になります。

    1. ドキュメントウィンドウでテキストフィールド検証 Widget を選択します。
    2. プロパティインスペクタ ([ウィンドウ]-[プロパティ]) で、[最小値] または [最大値] ボックスに数字を入力します。 たとえば、[最小値] ボックスに「3」入力すると、ユーザーが 3 以上の値 (4、5、6 など) を入力した場合にのみ入力が受け入れられます。

    デザインビューでの Widget の状態の表示

    1. ドキュメントウィンドウでテキストフィールド検証 Widget を選択します。
    2. プロパティインスペクタ ([ウィンドウ]-[プロパティ]) で、[プレビューの状態] ポップアップメニューから表示する状態を選択します。 たとえば、有効状態でこの Widget を表示する場合は [有効] を選択します。

    テキストフィールドの必須状態の変更

    初期設定では、Dreamweaver で挿入したテキストフィールド検証 Widget を Web ページでパブリッシュすると、ユーザー入力が必須になります。 ただし、テキストフィールドの入力をオプションにすることもできます。

    1. ドキュメントウィンドウでテキストフィールド検証 Widget を選択します。
    2. プロパティインスペクタ ([ウィンドウ]-[プロパティ]) で、[必須] チェックボックスを必要に応じてオンまたはオフにします。

    テキストフィールドのヒントの作成

    テキストフィールドのフォーマットは種類が非常に多いので、入力フォーマットをヒントで知らせるとユーザーに便利です。 たとえば、電話番号検証が設定されたテキストフィールドでは、(000) 000-0000 の形式の電話番号のみが受け入れられます。 ユーザーがブラウザでページを読み込んだときにテキストフィールドに正しいフォーマットが表示されるように、このサンプル電話番号をヒントとして入力することができます。

    1. ドキュメントウィンドウでテキストフィールド検証 Widget を選択します。
    2. プロパティインスペクタ ([ウィンドウ]-[プロパティ]) で、[ヒント] テキストボックスにヒントを入力します。

    無効な文字のブロック

    テキストフィールド検証 Widget にユーザーが無効な文字を入力するのを防止できます。 たとえば、整数検証が設定された Widget にこのオプションを選択すると、ユーザーがこのテキストフィールドに文字を入力しようとしても何も表示されません。

    1. ドキュメントウィンドウでテキストフィールド検証 Widget を選択します。
    2. プロパティインスペクタ ([ウィンドウ]-[プロパティ]) で、[パターンを適用] オプションを選択します。