このフォームのスタイルを設定するCSSメソッド

Question

このようなフォームは現在、テキスト入力ボックスと送信ボタンがあります。テーブルを使うのではなくむしろ、私はCSSを使いたいと思います。どのように私は（質問のうまくいけば、あまりにも漠然としていない？）提示可能に見えた道/プロでこれをフォーマットします

<h2>Add Record to Database</h2> 
<form action="addrecord.psp" method="get"> 
Username: <input type="text" name="uname" size="12"/> 
Machine Name:<input type="text" name="mname" size="8" /> 
Make: <input type=text" name="make" size="8" /> 
Model: <input type="text" name="model" size="8"/> 
Service Tag: <input type="text" name="service" size="8"/> 
Processor: <input type="text" name="processor" size="12"/><br /> 
Processor Speed: <input type="text" name="speed" size="4"/> 
Amount of RAM: <input type="text" name="ram" size="3"/> 
Type of RAM: <input type="text" name="ram2" size="4"/> 
RAM Speed: <input type="text" name="rspeed" size="4"/><br /> 
Graphics Card: <input type="text" name=graphics" size="8"/> 
Wired Mac Add: <input type="text" name="wired" size="17"/> 
Wireless Mac Add: <input type="text" name="wireless" size="17"/><br /> 
OS: <input type="text" name="os" size="12"/> 
Deploy Date: <input type="text" name="deploy" size="12"/> 
Last Check-up: <input type="text" name="checkup" size="12"/> 
<input type="submit" value="Submit" /> 
</form> 
<br /> 

Answer 1

サムスはアドバイス：

1. GETがあるので、あなたは、代わりにPOSTGETを使用する必要があります情報を取得することを意味します（More info）。あなたはまた、例えば、自分のフォームで<label>タグを使用する必要があります

2. ：

   <label for="uname">Username:</label> 
   <input type="text" name="uname" size="12"/> 
   

3. は、フィールド上のラベルを揃えるようにしてください。それは読みやすくなります。 More tips on forms usability.

4. さらに、実際にはいくつかのCSSチュートリアルを読むべきです。あなたはHTMLdogまたはDev.Opera

Answer 2

セマンティックリストを構築するためのもう一つの良いマークアップ要素は、定義リストでみてください。 Dan Cederholmはこのテクニックについて次のように書いています。http://www.devarticles.com/c/a/Web-Design-Standards/Web-Forms/2/

これは、フォームのスタイルを設定するときにCSSを利用するための優れた構造を提供します。

しかし、tcurveloの答えとDavid Barkerのコメントをエコーするには、構造を確立したらCSSを試してみてください。 http://reference.sitepoint.com/html/elements-form

また、CSSを使用してフォームのさまざまな外観を実現するためのチュートリアルもたくさんあります。重要なことは、CSSなしで意味のある良い構造から始めることです。

Answer 3

まず、データが表形式で表されている場合、<table>を使用することは悪い考えではありません。

第2に、このスタイルを<form>に設定する場合は、ラベルに<label>を含めることをおすすめします。これはどう：

<h2>Add Record to Database</h2> 
<form id="myform" action="addrecord.psp" method="get"> 
    <fieldset> 
     <label for="uname">Username:</label> 
     <input type="text" name="uname" size="12"/> 
     <label for="mname">Machine Name:</label> 
     <input type="text" name="mname" size="8" /> 
     <label for="make">Make:</label> 
     <input type="text" name="make" size="8" /> 
     <label for="model">Model:</label> 
     <input type="text" name="model" size="8"/> 
     <label for="service">Service Tag:</label> 
     <input type="text" name="service" size="8"/> 
     <label for="processor">Processor:</label> 
     <input type="text" name="processor" size="12"/><br /> 
     <label for="speed">Processor Speed:</label> 
     <input type="text" name="speed" size="4"/> 
     <label for="ram">Amount of RAM:</label> 
     <input type="text" name="ram" size="3"/> 
     <label for="ram2">Type of RAM:</label> 
     <input type="text" name="ram2" size="4"/> 
     <label for="rspeed">RAM Speed:</label> 
     <input type="text" name="rspeed" size="4"/><br /> 
     <label for="graphics">Graphics Card:</label> 
     <input type="text" name="graphics" size="8"/> 
     <label for="wired">Wired Mac Add:</label> 
     <input type="text" name="wired" size="17"/> 
     <label for="wireless">Wireless Mac Add:</label> 
     <input type="text" name="wireless" size="17"/><br /> 
     <label for="os">OS:</label> 
     <input type="text" name="os" size="12"/> 
     <label for="deploy">Deploy Date:</label> 
     <input type="text" name="deploy" size="12"/> 
     <label for="checkup">Last Check-up:</label> 
     <input type="text" name="checkup" size="12"/> 
    </fieldset> 
    <input type="submit" value="Submit" /> 
</form> 

基本CSS：

#myform { 
    border: 1px solid #CCC; 
    padding: 20px; 
} 
#myform label { 
    display: block; 
} 

また、私はあなたの要素の属性の一部の周りにかなりの数の"を欠落していたことに気づきました。それがあなたのコードを壊すので注意してください。