テーブル環境内のアドレスフィールドのサイズをhtmlで変更する

Question

私はhtmlを初めて使用しています。 fieldset要素のラベルを整列するように求められているプロジェクトがあります。そのため、私はテーブル環境を使用しています。おそらくそのため、行と列を使用してアドレスフィールドのサイズを設定しようとすると、変更はありません。私は、次のコードを持っている：

<fieldset class=""> 
 
    <legend>Your Contact information</legend> 
 
    <table> 
 
    <tr> 
 
     <label for="mail"></label> 
 
     <td align="right">Email: </td> 
 
     <td align="left"><input type="email" name="mail" id= "mail" value="" required> 
 
    </tr> 
 
    <tr> 
 
     <label for="mob"></label> 
 
     <td align="right">Mobile: </td> 
 
     <td align="left"><input type="tel" name="mob" id = "mob" value=""> 
 
    </tr> 
 
    <tr> 
 
     <label for="add"></label> 
 
     <td align="right">Address: </td> 
 
     <td align="left"><input type="textarea" rows = "4" cols = "20" name="add" id = "add" value=""> 
 
    </tr> 
 
    </table> 
 
</fieldset>

Answer 1

フォームのサブミット中に残りのフィールドinputが表示されます。

colsの代わりにwidthプロパティを使用して、テキストエリアの幅を設定することをお勧めします。これにより、入力フィールドとの比較をより簡単に行うことができ、より見栄えが向上します。代わりに、ラッパーとしてdivを使用して

.contactinfo { 
 
    background:lightyellow; 
 
    border:10px solid yellow; 
 
    margin-bottom:10px; 
 
    width: 720px; 
 
} 
 
.contactinfo input, 
 
.contactinfo textarea { 
 
    width: 180px; 
 
    box-sizing: border-box; /* have border/padding included in the given width */ 
 
} 
 
.contactinfo td { 
 
    vertical-align: top; 
 
}

<fieldset class="contactinfo"> 
 
    <legend>Your Contact information</legend> 
 
    <table> 
 
    <tr>  
 
     <td align="right"><label for="mail">Email: </label></td> 
 
     <td align="left"><input type="email" name="mail" id= "mail" value="" required> 
 
    </tr> 
 
    <tr> 
 
     <td align="right"><label for="mob">Mobile: </label></td> 
 
     <td align="left"><input type="tel" name="mob" id = "mob" value=""> 
 
    </tr> 
 
    <tr>  
 
     <td align="right"><label for="add">Address: </label></td> 
 
     <td align="left"><textarea rows = "4" name="add" id = "add"></textarea> 
 
    </tr> 
 
    </table> 
 
</fieldset>

、それは応答レイアウトでより多くのオプションが可能になります。

.contactinfo { 
 
    background:lightyellow; 
 
    border:10px solid yellow; 
 
    margin-bottom:10px; 
 
    width: 720px; 
 
} 
 
.contactinfo label { 
 
    display: inline-block; 
 
    width: 60px; 
 
    text-align: right; 
 
    vertical-align:top; 
 
} 
 
.contactinfo div ~ div { 
 
    margin-top: 2px; 
 
} 
 
.contactinfo input, 
 
.contactinfo textarea { 
 
    width: 180px; 
 
    box-sizing: border-box; /* have border/padding included in the given width */ 
 
}

<fieldset class="contactinfo"> 
 
    <legend>Your Contact information</legend> 
 
    <div> 
 
    <label for="mail">Email: </label> 
 
    <input type="email" name="mail" id= "mail" value="" required> 
 
    </div> 
 
    <div> 
 
    <label for="mob">Mobile: </label> 
 
    <input type="tel" name="mob" id = "mob" value=""> 
 
    </div> 
 
    <div> 
 
    <label for="add">Address: </label> 
 
    <textarea rows = "4" name="add" id = "add"></textarea> 
 
    </div> 
 
</fieldset>

Answer 2

これを試してみてくださいを。あなたは、あなたが、私はそれらのサイズを変更するためにCSSを使用することになり、この

<textarea col="4" rows="25" name="add" id = "add"></textarea> 

Answer 3

。

<tr> 
    <label for="mail"></label> 
    <td align="right">Email: </td> 
    <td align="left"><input type="email" name="mail" id= "mail" style="width:200px; height:200px;" value="" required> 
</tr> 

これは動作するはずです。 labelを持つtrの直接の子が許可されていないとして、inputはtextareaの種類を持っていないので、私が渡されます<textarea></textarea>に切り替え、私はいくつかの問題を修正以下のサンプルでは、​​

Answer 4

のように、これを編集してください入力タイプとして

<input type="textarea" rows = "4" cols = "20" name="add" id = "add" value=""> 

をテキストエリアを使用することはできません

<fieldset class=""> 
 
     <legend>Your Contact information</legend> 
 
     <table width="100%"> 
 
     <tr> 
 
      <label for="mail"></label> 
 
      <td align="right">Email: </td> 
 
      <td align="left"><input type="email" name="mail" id= "mail" value="" required> 
 
     </tr> 
 
     <tr> 
 
      <label for="mob"></label> 
 
      <td align="right">Mobile: </td> 
 
      <td align="left"><input type="tel" name="mob" id = "mob" value=""> 
 
     </tr> 
 
     <tr> 
 
      <label for="add"></label> 
 
      <td align="right">Address: </td> 
 
      <td align="left"><textarea rows = "4" cols = "20" name="add" id = "add" value=""></textarea> 
 
     </tr> 
 
     </table> 
 
    </fieldset>