PHP & JavaScript Room :: 設置サンプル

実行結果

The Form Assembly - Form Layouts | 設置サンプル

フィールドヒント表示
入力フィードをクリックすると、入力支援のためのフィールドヒントが表示されます。
(必須)
*
*
切り替え表示
選択肢によって関連する入力フォームを表示します。'tag'をクリックすると表示されます。
あなたが好きなスープは? *
Tag Soup
あなたは既にTag Soup(文書の情報がタグに埋もれてしまっている様を皮肉った意味)がよくないものであることを知っているべきです。
*
リピート入力
フィールドを好きなだけ増やして入力できます。'別のコンタンクと方法を追加する'リンクをクリックしてみてください。
*
*
*
入力確認
入力エラーがあるかどうか確かめるにはsubmitボタンをクリックしてください。

設置サンプルのソース

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title>The Form Assembly - Form Layouts | 設置サンプル</title>
      <script type="text/javascript" src="include/css/layout_form/wforms/wforms.js"></script>
      <link rel="stylesheet" href="include/css/layout_form/wforms/wforms.css" type="text/css" media="screen" />
      <style type="text/css">
         body {
            margin:20px auto;
            font-size:83%;
            width:600px;
         }
         h1 {
            font-size:120%;
         }
         form .errMsg {
            display: inline;
         }
         p.footNote {
             display: none;
         }
      </style>
   <link rel="stylesheet" type="text/css" href="/common/css/example.css"></head>
   <body id='example3' class='example'><div class="ads" style="margin:32px auto;text-align:center;"></div><h1 class='h'><a href='/'>PHP &amp; JavaScript Room</a> :: 設置サンプル</h1>
<h3 class='h'>実行結果</h3>
      <h1><a href='http://www.formassembly.com/form-garden.php?formId=29&style=/form-builder/css/campground_2'>The Form Assembly - Form Layouts</a> | 設置サンプル</h1>
      <form method="post" id="wf_TestForm">
         <fieldset id="wf_Field-HintBehavior" class="">
            <legend>フィールドヒント表示</legend>
            <div class="instructions">入力フィードをクリックすると、入力支援のためのフィールドヒントが表示されます。</div>
            <span class="oneField"><div class="field-hint-inactive" id="wf-Username-H"><div>(必須)</div></div>
            <label for="wf-Username" class="preField">氏名:</label><input type="text" id="wf-Username" name="wf-Username" value="" size="" class="required"><span class="reqMark">*</span><br></span>
            <span class="oneField"><label for="wf_Password" class="preField">パスワード:</label><input type="password" id="wf_Password" name="wf_Password" value="" size="" class="required"><span class="reqMark">*</span><br></span>
         </fieldset>
         <fieldset id="wf_SwitchBehavior" class="">
            <legend>切り替え表示</legend>
            <div class="instructions">選択肢によって関連する入力フォームを表示します。'tag'をクリックすると表示されます。</div>
            <span class="oneField"><span class="label preField">あなたが好きなスープは?</span>
            <span class="required"><span class="oneChoice"><input type="radio" value="wf_Tomato" id="wf_Tomato" name="wf_Whatisyourfavoritesoup"><label for="wf_Tomato" id="wf_Tomato-L" class="postField">トマト</label></span>
            <span class="oneChoice"><input type="radio" value="wf_Pea" id="wf_Pea" name="wf_Whatisyourfavoritesoup"><label for="wf_Pea" id="wf_Pea-L" class="postField">えんどう豆</label></span>
            <span class="oneChoice"><input type="radio" value="wf_Onion" id="wf_Onion" name="wf_Whatisyourfavoritesoup"><label for="wf_Onion" id="wf_Onion-L" class="postField">オニオン</label></span>
            <span class="oneChoice"><input type="radio" value="wf_Tag" class="switch-a" id="wf_Tag" name="wf_Whatisyourfavoritesoup"><label for="wf_Tag" id="wf_Tag-L" class="postField">Tag</label></span></span><span class="reqMark">*</span></span>
            <fieldset id="wf-TagSoup" class="offstate-a">
               <legend>Tag Soup</legend>
               <div class="instructions">あなたは既に<a href='http://en.wikipedia.org/wiki/Tag_Soup'>Tag Soup</a>(文書の情報がタグに埋もれてしまっている様を皮肉った意味)がよくないものであることを知っているべきです。</div>
               <span class="oneField"><span class="required"><span class="oneChoice"><input type="checkbox" value="yes" id="wf_Ipledgetoquit" name="wf_Ipledgetoquit"><label for="wf_Ipledgetoquit" id="wf_Ipledgetoquit-L" class="postField">やめると誓います</label></span></span><span class="reqMark">*</span><br></span>
            </fieldset>
         </fieldset>
         <fieldset id="wf_RepeatBehavior" class="">
            <legend>リピート入力</legend>
            <div class="instructions">フィールドを好きなだけ増やして入力できます。'別のコンタンクと方法を追加する'リンクをクリックしてみてください。</div>
            <fieldset id="wf_-vkinth" class="repeat">
               <span class="oneField"><label for="wf_ContactType" class="preField">コンタクト形式</label>
               <select id="wf_ContactType" name="wf_ContactType" class="required"><option value="email">E-mail</option>
                  <option value="aim">AIM</option>
                  <option value="icq">ICQ#</option>
                  <option value="msn">MSN Messenger</option>
                  <option value="yahoo">Yahoo Messenger</option>
                  <option value="phone">Phone</option>
                  <option value="other" class="switch-b">Other</option>
               </select>
               <span class="reqMark">*</span><br></span>
               <span class="offstate-b oneField">
                  <label for="wf_Pleaseprecise" class="preField">正確に入力してください</label>
                  <input type="text" id="wf_Pleaseprecise" name="wf_Pleaseprecise" value="" size="" class="required"><span class="reqMark">*</span><br>
               </span>
               <span class="oneField">
                  <label for="wf_AddressNumber" class="preField">アドレス/番号</label>
                  <input type="text" id="wf_AddressNumber" name="wf_AddressNumber" value="" size="" class="required"><span class="reqMark">*</span><br>
               </span>
            </fieldset>
         </fieldset>
         <fieldset id="wf_InputValidation1" class="">
            <legend>入力確認</legend>
            <div class="instructions">入力エラーがあるかどうか確かめるにはsubmitボタンをクリックしてください。</div>
         </fieldset>
         <div class="actions">
            <input type="submit" class="primaryAction" id="submit-wf_TestForm" value="submit"><input type="button" class="secondaryAction" onclick="history.go(-1)" value="cancel">
         </div>
      </form>
   </body>
</html>