CSSでフォームデザインをする際のチュートリアル:phpspot開発日誌

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

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

2008年10月30日-

スポンサードリンク

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>