Search
  1. ボタンレイアウト〔Rediscovering the Button Element〕
  2. 送信フォーム
  3. 送信フォーム〔Prettier Accessible Forms〕
  4. 送信フォーム(フォーム要素を画像できれいに)〔Niceforms v.0.9〕
  5. 送信フォーム(フォーム要素を画像できれいに)〔Fun with forms - customized input elements〕
  6. 送信フォーム(フォーム要素を画像できれいに)〔Pretty Forms〕
  7. 送信フォーム(入力要素の追加・削除)〔The Form Assembly - Form Layouts〕
  8. 送信フォームの基本レイアウト
  9. ログインフォームをお洒落に〔テキストボックスに背景画像を指定〕
  10. ログインフォーム〔Beautiful CSS Form参照〕

ボタンレイアウト
Rediscovering the Button Element

unknown

Rediscovering the Button Element

button要素は、要素内にHTML要素を含めることができます。 【Save】ボタンは、button要素内にアイコン画像とテキストを指定し、【Change Password】ボタンと【Cancel】ボタンは、a要素内にアイコン画像とテキストを指定しています。 それぞれ、button要素あるいはa要素ににマウスが乗った時と通常時のレイアウトをCSSで切り替えています。

設置サンプルサンプルを見る
<style type="text/css">
.buttons {
    margin:0 0 1em 0; padding:0;
    clear:both;
    height:100%;
    overflow:hidden;
}
.buttons * {
    font-family:verdana,sans-serif;
}
.buttons a,
button { /* 通常時 */
    float:left;
    display:block;
    margin:0 7px 0 0; padding:5px 10px 6px 7px;
    background-color:#f5f5f5;
    border-width:1px;
    border-style:solid;
    border-color:#eee #dedede #dedede #eee;
    cursor:pointer;
    color:#333;
    font-size:100%;
    font-weight:bold;
    line-height:130%;
    text-decoration:none;
}
button {
    overflow:visible;
    width:auto;
    padding:4px 10px 3px 7px;
    font-weight:bold;
}
button[type] {
    width:auto;
    padding:5px 10px 5px 7px;
    line-height:17px;
}
*:first-child+html button[type] {
    padding:4px 10px 3px 7px;
}
button img,
.buttons a img { /* アイコン画像 */
    width:16px; height:16px;
    margin:0 3px -3px 0 !important; padding:0 !important;
    border:none !important;
}
button:hover,
.buttons a:hover { /* マウスオーバー時 */
    border:1px solid #c2e1ef;
    color:#336699;
    background-color:#dff4ff;
}
.buttons a:active { /* アクティブ時 */
    border:1px solid #6299c5;
    color:#fff;
    background-color:#6299c5;
}
button.positive,
.buttons a.positive { /* 色テーマ positive */
    color:#529214;
}
.buttons a.positive:hover,
button.positive:hover {
    color:#529214;
    border:1px solid #c6d880;
    background-color:#e6efc2;
}
.buttons a.positive:active {
    border:1px solid #529214;
    color:#fff;
    background-color:#529214;
}
.buttons a.negative,
button.negative { /* 色テーマ nagative */
    color:#d12f19;
}
.buttons a.negative:hover,
button.negative:hover {
    border:1px solid #fbc2c4;
    color:#d12f19;
    background:#fbe3e4;
}
.buttons a.negative:active {
    border:1px solid #d12f19;
    color:#fff;
    background-color:#d12f19;
}
</style>

<div class="buttons">
<!-- button要素 -->
    <p>
        <button type="submit" class="positive"><img src="/content/img/icon/color/action_check.gif" alt=""/> Save</button>
        <button type="submit"><img src="/content/img/icon/color/login.gif" alt=""/> Change Password</button>
        <button type="submit" class="negative"><img src="/content/img/icon/color/action_delete.gif" alt=""/> Cancel</button>
    </p>
</div>
<div class="buttons">
<!-- a要素 -->
    <p>
        <a href="#" class="positive"><img src="/content/img/icon/color/action_check.gif" alt=""/> Save</a>
        <a href="#"><img src="/content/img/icon/color/login.gif" alt=""/> Change Password</a>
        <a href="#" class="negative"><img src="/content/img/icon/color/action_delete.gif" alt=""/> Cancel</a>
    </p>
</div>

送信フォーム

unknown

シンプルなフォームの例です。
テキスト入力フィールドの枠線にinheritを使用しています。

設置イメージ設置イメージ
フォームの基本サンプルを見る
<style type="text/css">
    #demo {
        width:60%;
    }
    #demo ul {
        list-style:none;
        margin:0; padding:0;
    }
    #demo li {
        list-style:none;
        margin:0; padding:6px;
        clear:both;
    }
    #demo label {
        display:block;
        font-weight:bold;
        color:#666;
    }
    #demo li span {
        float:left;
        margin:0 5px 0 0; padding:0;
    }
    #demo li span label {
        color:#999;
        font-weight:normal;
        font-size:80%;
    }
    #demo input.field,
    #demo textarea {
        background:#fff url(/content/img/css/fieldborder.png) repeat-x 0 0;
        border:1px solid #ddd;
        border-top-color:#ccc;
        border-left-color:#ccc;
        padding:3px;
    }
    #demo textarea {
        width:100%;
    }
    #demo input#email {
        width:200px;
    }
</style>

<form id="demo" action="#" onsubmit="return false;">
    <ul>
        <li>
            <label for="name">名前:</label>
            <span>
                <input id="firstname" name="firstname" type="text" class="field" value="" maxlength="20" tabindex="1" /><br>
                <label for="Field4">姓</label>
            </span>
            <span>
                <input id="lastname" name="lastname" type="text" class="field" value="" maxlength="20" tabindex="2" />
                <label for="lastname">名</label>
            </span>
         </li>
        <li>
            <label for="email">メールアドレス:</label>
            <input id="email" name="email" type="text" class="field" value="" maxlength="255" tabindex="3" /> 
        </li>
        <li>
            <label for="message">メッセージ:</label>
            <textarea id="message" name="message" rows="10" cols= "5" tabindex="4" /></textarea>
        </li>
    </ul>
    <input id="btn_submit" name="btn_submit" value="送信" type="submit" />
</form>

送信フォーム
Prettier Accessible Forms

unknown

A List Apart: Articles: Pettier Accessible Forms

アクセシブルなフォームの例です。 必須入力項目に*を付けることで、必須と任意入力の区別がわかりやすくなります。 入力項目部分は、リスト(ol)要素を使用してマークアップされています。

Prettier Accessible Formsの設置サンプルサンプルを見る
<style type="text/css">
form.cmxform {
    margin:1em 0; padding:0;
    font-size:11px;
}
form.cmxform fieldset {
    width:370px;
    border:0;
    border-top:1px solid #c9dca6;
    background:url(/content/img/css/cmxform-fieldset.gif) left bottom repeat-x;
}
form.cmxform legend {
    padding:1em 2px 0 2px;
    font-weight:bold;
}
form.cmxform em {
    color:#f00;
    background-color:transparent;
    font-weight:normal;
    font-style:normal;
    font-size:.8em;
}
form.cmxform label {
    display:block;
    float:left;
    width:120px;
}
form.cmxform fieldset ol {
    margin:0;
    padding:0;
}
form.cmxform fieldset li {
    list-style:none;
    clear:both;
    margin:0; padding:5px 5px 7px 7px;
    background:url(/content/img/css/cmxform-divider.gif) left bottom repeat-x;
}
form.cmxform fieldset fieldset {
    border:none;
    background:none;
}
    form.cmxform fieldset fieldset legend {
        font-weight:normal;
        padding-left:0;
    }
    form.cmxform fieldset fieldset label {
        float:none;
        width:auto;
    }
form.cmxform .sr {
    position:absolute;
    left:-9999px; top:0;
    width:1px; height:1px;
    overflow:hidden;
}
</style>

<form class="cmxform" action="#">
    <p><em>*</em>印は必須入力項目です。</p>
    <fieldset>
        <legend>お届け先</legend>
        <ol>
          <li>
            <label for="name">氏名<em>*</em></label>
            <input id="name" />
          </li>
          <li>
            <label for="address1">住所<em>*</em></label>
            <input id="address1" />
          </li>
          <li>
            <label for="address2">住所2</label>
            <input id="address2" />
          </li>
          <li>
            <label for="town-city">市区町村</label>
            <input id="town-city" />
          </li>
          <li>
            <label for="county">国<em>*</em></label>
            <input id="county" />
          </li>
          <li>
            <label for="postcode">郵便番号<em>*</em></label>
            <input id="postcode" />
          </li>
          <li>
            <fieldset>
              <legend>請求書の送り先も同じですか?<em>*</em></legend>
              <label><input type="radio" &raquo; name="invoice-address" />Yes</label>
              <label><input type="radio" &raquo; name="invoice-address" />No</label>
            </fieldset>
          </li>
        </ol>
    </fieldset>
    <fieldset>
        <legend>その他の情報</legend>
        <ol>
            <li><label for="dob">生年月日 <span class="sr">(日)</span> <em>*</em></label> <select id="dob"><option value="1">1</option><option value="2">2</option></select> <label for="dob-m" class="sr">生年月日(月) <em>*</em></label> <select id="dob-m"><option value="1">Jan</option><option value="2">Feb</option></select> <label for="dob-y" class="sr">生年月日 (年) <em>*</em></label> <select id="dob-y"><option value="1979">1979</option><option value="1980">1980</option></select></li>
            <li><label for="sex">性別 <em>*</em></label> <select id="sex"><option value="female">女</option><option value="male">男</option></select></li>
            <li>
                <fieldset>
                    <legend>次のスポーツの内、あなたはどれを楽しみますか?</legend>
                    <label for="football"><input id="football" type="checkbox" /> フットボール</label>
                    <label for="golf"><input id="golf" type="checkbox" /> ゴルフ</label>
                    <label for="rugby"><input id="rugby" type="checkbox" /> ラグビー</label>
                    <label for="tennis"><input id="tennis" type="checkbox" /> テニス</label>
                    <label for="basketball"><input id="basketball" type="checkbox" /> バスケットボール</label>
                    <label for="boxing"><input id="boxing" type="checkbox" /> ボクシング</label>
                </fieldset>
            </li>
            <li><label for="comments">コメント</label> <textarea id="comments" rows="7" cols="25"></textarea></li>
        </ol>
    </fieldset>
    <p><input type="submit" value="注文する" /></p>
</form>

*印は必須入力項目です。

お届け先
  1. 請求書の送り先も同じですか?*
その他の情報
  1. 次のスポーツの内、あなたはどれを楽しみますか?

送信フォーム(フォーム要素を画像できれいに)
Niceforms v.0.9

unknown

Niceforms v.1.0

オン/オフ、アクティブ/非アクティブ時の状態を1枚の画像にし、ページのロード時にJavaScriptでフォーム要素の見栄えを画像化しています。 CSSだけだと限界がありますが、DOMを使用してJavaScriptで制御することでグラフィカルなフォームが作成できます。

ラジオボタンとチェックボックスのオン/オフ時のアクション、テキストボックスとテキストエリアのfocus/blur時、ボタンのマウスオーバー/マウスアウト時に応じて背景画像の表示位置を動的にずらして表示しています。

v.0.9の時は、チェックボックスやラジオボタンは、ラベル部分をクリックしないと、チェックしたりできませんでしたが、v.1から画像部分をクリックしてもチェックのオン/オフ切り替えができるようになっています。

設置イメージ設置イメージ
Niceformsの設置サンプルサンプルを見る
<!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>Niceforms | 設置サンプル</title>
        <script type="text/javascript" src="include/css/layout_form/niceforms/niceforms.js"></script>
        <link rel="stylesheet" type="text/css" href="include/css/layout_form/niceforms/niceforms.css" />
    </head>
    <body>
        <h1><a href="http://www.badboy.ro/articles/2007-01-30/niceforms/">Niceforms v.1</a> | 設置サンプル</h1>
        <form action="#" method="post" class="niceform">
            <select size="1" id="mySelect1" name="mySelect1" class="width_320"> <!-- class="width_320" sets a width of 320px -->
                <option selected="selected" value="Test area no.1">Test area no.1</option>
                <option value="Another test option">Another test option</option>
                <option value="And another one">And another one</option>
                <option value="One last option for me">One last option for me</option>
                <option value="This is one really really long option right here just to test it out">This is one really really long option right here just to test it out</option>
            </select>
            <br>
            <select size="1" id="mySelect2" name="mySelect2" class="width_160">
                <option value="Test area no.2">Test area no.2</option>
                <option value="Another test">Another test</option>
                <option selected="selected" value="And another one">And another one</option>
                <option value="And yet another one">And yet another one</option>
                <option value="One last option for me">One last option for me</option>
            </select>
            <br>
            <input type="radio" name="radioSet" id="option1" value="foo" checked="checked" /><label for="option1">foo</label><br>
            <input type="radio" name="radioSet" id="option2" value="bar" /><label for="option2">bar</label><br>
            <input type="radio" name="radioSet" id="option3" value="another option" /><label for="option3">another option</label><br>
            <br>
            <input type="checkbox" name="checkSet1" id="check1" value="foo" /><label for="check1">foo</label><br>
            <input type="checkbox" name="checkSet2" id="check2" value="bar" checked="checked" /><label for="check2">bar</label><br>
            <input type="checkbox" name="checkSet3" id="check3" value="another option" /><label for="check3">another option</label><br>
            <br>
            <label for="textinput">Username:</label><br>
            <input type="text" id="textinput" name="textinput" size="12" /><br>
            <label for="passwordinput">Password:</label><br>
            <input type="password" id="passwordinput" name="passwordinput" size="20" /><br>
            <br>
            <label for="textareainput">Comments:</label><br>
            <textarea id="textareainput" name="textareainput" rows="10" cols="30"></textarea><br>
            <br>
            <input type="submit" value="Submit this form" />
        </form>
    </body>
</html>

送信フォーム(フォーム要素を画像できれいに)
Fun with forms - customized input elements

unknown

Fun with forms – customized input elements

CSSで、フォームの入力要素をグラフィカルにしていく手順が、ステップバイステップで丁寧に解説されています。

ヘッダなど他の部分でポジション指定をしている場合は、filedset要素にrelativeを指定して、legend要素にabsoluteを指定しないと、レイアウトが崩れます。 あとlegend要素がブラウザによって見え方が異なるので調整してみましたが、なぜかうまくいかない。。。

Fun with formsの設置サンプルサンプルを見る
<style type="text/css">
div#funwithforms {
    padding:2em 0;
}
div#funwithforms,
div#funwithforms * {
    color:#666666;
    font-size:11px;
    font-family:Verdana, Arial, Helvetica, sans-serif;
}
div#funwithforms label {
    margin:0;
    padding:0.2em;
    margin-top:0.3em;
    text-align:right;
    width:70px;
    float:left;
    text-transform:uppercase;
}
div#funwithforms fieldset {
    position:relative;
    width:300px;
    margin:0; padding:13px 0 0 0;
    border:solid 0 #fff; /* Opera doesn't get border:none or border:0 on fieldsets */
    background-color:#ccc;
}
div#funwithforms legend {
    width:auto; height:30px;
    margin:0; padding:0 4em 0 .5em;
    position:absolute;
    top:-13px; left:10px;
    color:#fff;
    background:transparent url(/content/img/css/funwithforms/legend_bg.gif") no-repeat;
    font-size:1.5em;
    font-weight:bold;
    text-transform:uppercase;
    letter-spacing:-1px;
    display:block;
}
div#funwithforms .br {display:none;} 
div#funwithforms .textfield {
    font:1.1em  Verdana, Arial, Helvetica, sans-serif ;
    color:#333 ;
    margin:3px;
    height:20px;
    border:solid 0 #fff;
    padding: 3px 8px;
    background: transparent url(/content/img/css/funwithforms/textfield_bg.gif) no-repeat fixed;
    width:200px;
    voice-family: "\"}\""; 
    voice-family:inherit;
    width:187px;
}
div#funwithforms fieldset>input.textfield {
    background: transparent url(/content/img/css/funwithforms/textfield_bg.gif) no-repeat;
}
div#funwithforms textarea {
    font:1.1em Verdana, Arial, Helvetica, sans-serif;
    color:#333 ;
    margin:3px;
    height:165px;
    border:solid 0 #fff;
    padding: 0 8px;
    background: transparent url(/content/img/css/funwithforms/textarea_bg.gif) no-repeat fixed;
    width:200px;
    voice-family: "\"}\""; 
    voice-family:inherit;
    width:190px;
}
div#funwithforms fieldset>textarea {
    background: transparent url(/content/img/css/funwithforms/textarea_bg.gif) no-repeat;
}
div#funwithforms .submit {
    margin:3px;
    background: transparent url(/content/img/css/funwithforms/submit.gif) no-repeat;
    height:20px;
    border:solid 0 #fff;
    width:80px;
    font:1.1em Verdana, Arial, Helvetica, sans-serif;
    color:#666;
    text-transform:uppercase;
}
</style>
<div id="funwithforms">
    <form action="#" method="post" onsubmit="return false;">
        <fieldset>
            <legend>Contact form</legend>
            <label for="name">Name</label><br class="br" /><input name="name" type="text" class="textfield"  id="name"  /><br>
            <label for="email">Email</label><br class="br" /><input name="email" type="text" class="textfield" id="email" /><br/>
            <label for="website">Website</label><br class="br" /><input name="website" type="text" class="textfield" id="website" value="http://" /><br>
            <label for="comment">Comment</label><br class="br" /><textarea cols="30" rows="15" name="comment" id="comment"></textarea><br>
            <label for="submit">&nbsp;</label><br class="br" /><input name="submit" type="submit" class="submit" id="submit" value="submit" />
        </fieldset>
    </form>
</div>
Contact form








送信フォーム(フォーム要素を画像できれいに)
Pretty Forms

unknown

Pretty Forms

body要素のonload属性にprettyForms()を指定し、ぺージのロード時に、JavaScriptでフォーム要素の見栄えを画像化しています。 ラジオボタンとチェックボックスのオン/オフ時のアクションに応じて画像を切り替えています。 オン/オフ時の画像は別画像になっています。

設置イメージ設置イメージ
Pretty Formsの設置サンプルサンプルを見る
<!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>Pretty Forms | 設置サンプル</title>
        <script type="text/javascript">
        function showFormData(frm){
            message="The values of the form are: \n-------------------------------------\n";
            message+="text area = \t" + frm.textarea.value + "\n\n";
            message+="textbox = \t" + frm.textbox.value + "\n\n";
            message+="select box = \t" + frm.selectMenu[frm.selectMenu.selectedIndex].innerHTML + "\n\n";
            message+="checkboxes = \t" + frm.checkbox1.checked + ", " + frm.checkbox2.checked + ", " + frm.checkbox3.checked + "\n\n";
            if(frm.radioButtons[0].checked){
                message+="radio buttons = \t" + frm.radioButtons[0].value + "\n\n";
            }else if(frm.radioButtons[1].checked){
                message+="radio buttons = \t" + frm.radioButtons[1].value + "\n\n";
            }else if(frm.radioButtons[2].checked){
                message+="radio buttons = \t" + frm.radioButtons[2].value + "\n\n";
            }
            window.alert(message);
            return false;
        }
        function doSomething(){
            showText = document.getElementById("signalEvent");
            showText.innerHTML = "You triggered an event";
            setTimeout("showText.innerHTML = '&nbsp;'",1000)
        }
        </script>
        <script type="text/javascript" src="include/css/layout_form/prettyforms/prettyForms.js"></script>
        <link rel="stylesheet" href="include/css/layout_form/prettyforms/prettyForms.css" type="text/css" media="screen" />
    </head>
    <body onload="prettyForms()">
        <h1><a href='http://www.agavegroup.com/?p=35'>Pretty Forms</a> | 設置サンプル</h1>
        <form id="myForm" action=""     onsubmit="return(showFormData(this))">
            <p>
                <label>textarea: </label><textarea name="textarea" cols="60" rows="10">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</textarea>
                <br class="clearAll" /><br>
            </p>
            <p>
                <label><strong>text box: </strong></label><input name="textbox" type="text" onfocus="doSomething()" value="Lorem ipsum" />
                <br class="clearAll" /><br>
            </p>
            <p>
                <label><strong>select box:</strong> </label>
                <select name="selectMenu" onchange="doSomething()">
                    <option value="1">row 1 row 1 row 1 row 1</option>
                    <option value="2">row 2 row 2 row 2 row 2</option>
                    <option value="3" selected="selected">row 3 row 3 row 3 row 3</option>
                    <option value="4">row 4 row 4 row 4 row 4</option>
                </select>
                <br class="clearAll" /><br>
            </p>
            <p>
                <label>checkboxes: </label>
                <input type="checkbox" name="checkbox1" /><label>check 1</label>
                <input type="checkbox" name="checkbox2" onchange="doSomething()" /><label><strong>check 2</strong></label>
                <input type="checkbox" name="checkbox3" /><label>check 3</label>
                <br class="clearAll" /><br>
            </p>
            <p>
                <label>radio buttons: </label>
                <input type="radio" name="radioButtons" value="1" /><label>radio 1</label>
                <input type="radio" name="radioButtons" value="2" /><label>radio 2</label>
                <input type="radio" name="radioButtons" value="3" checked="checked" onchange="doSomething()" /><label><strong>radio 3</strong></label>
                <br class="clearAll" /><br>
            </p>
            <p><input type="submit" value="check inputs" /></p>
        </form>
    </body>
</html>

送信フォーム(入力要素の追加・削除)
The Form Assembly - Form Layouts

unknown

The Form Assembly - Form Layouts

設置イメージ設置イメージ
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>
    </head>
    <body>
        <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>

送信フォームの基本レイアウト

unknown

fieldset要素とlegend要素を使用した基本的な送信フォームの例です。

フォームの基本サンプルを見る
<style type="text/css">
    form#frm_a {
        margin:10px 0; padding:0;
    }
    form#frm_a fieldset {
        margin:0; padding:10px;
        border:1px solid #6bba70;
        background-color:inherit;
        color:#fff;
        font-size:12px;
    }
    form#frm_a legend {
        margin:0 0 10px 0; padding:2px 5px;
        color:#6bba70;
        font-weight:bold;
    }
    form#frm_a p {
        margin:0; padding:0 0 10px 0;
        color:#666;
    }
    form#frm_a input.txt {
        border:1px solid #cdeb8b;;
        font-weight:bold;
        padding:1px 3px;
    }
    form#frm_a input.submit {
        border:3px double #cdeb8b;
        background-color:#fff;
        color:#6bba70;
        font-weight:bold;
    }
</style>

<form id="frm_a" action="#" onsubmit="alert('サンプルのため送信しません'); return false;">
    <fieldset>
        <legend>会員登録</legend>
        <p>
            <label for="lastname">氏: <input type="text" class="txt" id="lastname" name="lastname" size="10" /></label>
            <label for="firstname">名: <input type="text" class="txt" id="firstname" name="firstname" size="10" /></label>
        </p>
        <p>
            <label for="email">E-mail: <input type="text" class="txt" id="email" name="email" size="40" /></label>
        </p>
        <p>
            生年月日: 西暦 
            <label for="birth_y"><input type="text" class="txt" id="birth_y" name="birth_y" size="4" maxlength="4" />年</label>
            <label for="birth_m"><input type="text" class="txt" id="birth_m" name="birth_m" size="2" maxlength="2" />月</label>
            <label for="birth_d"><input type="text" class="txt" id="birth_d" name="birth_d" size="2" maxlength="2" />日</label>
        </p>
        <p>
            性別: 
            <label for="sex1"><input type="radio" id="sex1" name="sex" value="male" />男</label>
            <label for="sex2"><input type="radio" id="sex2" name="sex" value="female" />女</label>
        </p>
        <input type="submit" class="submit" value="登録する" />
    </fieldset>
</form>
会員登録

生年月日: 西暦

性別:

ログインフォーム
Beautiful CSS Form参照

unknown

woork: Beautiful CSS Form

シンプルなログインフォームの例です。 フォーム要素にlabel要素でラベル付けしています。

Beautiful CSS Fromの設置サンプルサンプルを見る
<style type="text/css">
    div#login1 a {
        color:#0033cc;
    }
    div#login1 a:hover{
        background-color:transparent;
    }
    div#login1 h1,
    div#login1 h2,
    div#login1 p,
    div#login1 form {
        margin:0; padding:0;
        border:0;
    }
    div#login1 h2{
        margin:0 0 20px 0;
        color:#666666;
        font-size:16px;
    }
    div#login1 div.box {
        margin-bottom:20px;    padding:10px;
        border:solid 1px #c6cfe1;
        background:#dfe4ee;
        color:#333333;
    }
        div#login1 div.box h1 {
            color:#000000;
            padding:0 0 4px 0;
            font-size:14px;
        }
        div#login1 div.box p {
            padding-bottom:14px;
        }
        div#login1 div.box input .input-text {
            width:180px;
            border:1px solid #3b6e22;
            color:#666666;
        }
        div#login1 div.box label {
            display:block;
            margin-bottom:10px;
            color:#555555;
        }
            div#login1 div.box label span {
                display:block;
                float:left;
                width:10em;
                padding-right:6px;
                font-weight:bold;
                text-align:right;
            }
        div#login1 .spacer {
            margin-left:80px; margin-bottom:10px;
            font-size:11px;
            color:#555555;
        }
        div#login1 .green {
            background:url(/content/img/css/green.gif);
            padding:3px 6px;
            border:1px solid #3b6e22;
            height:24px; 
            line-height:24px;
            color:#FFFFFF;
            font-size:12px;
            margin-right:10px;
            display:inline-block;
            text-decoration:none;
        }
</style>

<div id="login1">
    <div class="box">
        <h1>サインイン</h1>
        <p>アカウントをお持ちの方はサインイン!</p>
        <form action="" method="post">
            <label><span>メールアドレス</span><input type="text"name="email" id="email" class="input-text"/></label>
            <label><span>パスワード</span><input type="password"name="psw" id="psw" class="input-text"/></label>
        </form>
        <div class="spacer"><a href="#" onClick="" class="green">サインイン</a></div>
        <div class="spacer">
            パスワードを忘れた場合:<a href="#">パスワード取得</a><br/>
            新規ユーザーの場合:<a href="#">サインアップ</a>
        </div>
    </div>
    <div class="box">
        <h1>サインアップ</h1>
        <p>アカウントを作りましょう!</p>
        <form action="" method="post">
            <label><span>氏名</span><input type="text"name="name" id="name" class="input-text"/></label>
            <label><span>メールアドレス</span><input type="text"name="email" id="email" class="input-text"/></label>
            <label><span>パスワード</span><input "psw" type="password" id="psw" class="input-text"/></label>
        </form>
        <div class="spacer"><a href="#" onClick="" class="green">アカウント作成</a></div>
        <div class="spacer">
            パスワードを忘れた場合:<a href="#">パスワード取得</a><br/>
            新規ユーザーの場合:<a href="#">サインアップ</a>
        </div>
    </div>
</div>

サインイン

アカウントをお持ちの方はサインイン!

パスワードを忘れた場合:パスワード取得
新規ユーザーの場合:サインアップ

サインアップ

アカウントを作りましょう!

パスワードを忘れた場合:パスワード取得
新規ユーザーの場合:サインアップ

関連コンテンツ

Q. このサイトの情報はお役に立ちましたでしょうか?

投票する 投票結果を見る

管理人に【web拍手】を送るweb拍手(1行メッセージも送れます♪)

pagetop