Divのように動作するDiv

Question

私は溝のある境界線を持つdivを持っています。 このパネルのようにしたい：http://www.devmanuals.com/images/images1/444Panel1.gif

画像のパネルには「ユーザー登録」というタイトルがあります。 私のdivにはパネルのようなタイトルがありますか？

Answer 1

これはフィールドセットと呼ばれ、基本的なHTMLタグです。

<fieldset> 
    <legend>User Registration</legend> 
    User name: <input type="text" /><br /> 
    Password: <input type="text" /><br /> 
    </fieldset> 

私はthis siteにあなたのリンクを与えることにうんざりするが、それはあなたがすぐそこにあなたのHTMLを試してみるための能力を持っています。

Answer 2

は、「フィールドセット」を試してみてください。

<fieldset> 
    <legend>caption goes here</legend> 
</fieldset> 

Answer 3

あなたがフィールドセットにいくつかのスタイリングを行うことができます。

Stylesheet.css

fieldset.panel 
{ 
    border: 1px solid #000; 
    width: 200px; 
} 
fieldset.panel input[type=text] 
{ 
    width: 170px; 
} 

使用法基本的に

<fieldset class="panel"> 
    <legend>User Registration</legend> 
    User name:<br/><input type="text"/><br/> 
    Email-id:<br/><input type="text"/><br/> 
    Password:<br/><input type="text"/><br/> 
    Confirm password:<br/><input type="text"/><br/> 
    <br/> 
    <input type ="submit" value="Register"/> 
</fieldset> 

それがフィールドセットを使用していますが、いくつかの基本的なスタイルで、CSSクラスpanelは国境が1pxの黒一色になりますと、入力がすべて行っていますCSSスタイルはtypeがtextで、class属性のfieldsetの中にあるinputにのみ適用されるため、170px幅にする必要がありますpanelは、次のようにcssに翻訳されました：fieldset.panel input[type=text]です。