The Form Assembly - Form Layouts | 設置サンプル
実行結果
設置サンプルのソース
<!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 & 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>
