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で独自スタイリングするサンプル