前の記事 ≪:スパム防止に使えるPEARパッケージ「PEAR::Net_DNSBL」
次の記事 ≫:YoutubeのAPIをPHPから簡単に使える「PHPTube」

CSSでフォームデザインをする際のチュートリアル

2008年10月30日-はてなブックマーク

スポンサード リンク
[PR] 英単語を忘却曲線アプリを使って超効率よく記憶する方法

Stylize Forms With CSS - Webmonkey

CSSでフォームデザインをする際のチュートリアル。
フォームデザインは、form, fieldset, legend, label なんかのタグが混じってきて複雑で、個人的にあまり得意ではありません。

今回紹介するページでは、マークアップとCSSが紹介されていて、フォームを記述、デザインする際の参考になります。



マークアップは以下。

<form action="#" class="myform">
    <fieldset>
        <legend>Leave a Comment</legend> 
        <ul> 
            <li> 
                <label for="name">Name:</label> 
                <input id="name" /> 
            </li> 
            <li> 
                <label for="email">Email:</label> 
                <input id="email" /> 
            </li> 
            <li> 
                <label for="comment">Comments:</label> 
                <textarea id="comments" rows="7" cols="25"></textarea> 
            </li> 
            <li> 
                <label for="remember">Remember Me:</label> 
                <input type="radio" name="remember" value="true" />Yes 
                <input type="radio" name="remember" value="false" checked/>No 
            </li> 
        </ul> 
    </fieldset> 
    <p><input type="submit" value="Leave comment" /></p>
</form>

スタイル完成イメージ。



関連エントリ

関連の記事検索:CSS, フォーム
スポンサード リンク

By.KJ : 2008年10月30日 10:03 livedoor Readerで購読 Twitterに投稿

間違いの指摘をしていただける方はメール、あるいはTwitter/FBでお願いします(クリック)