フォーム部品のスタイル

「input type="text"」が多数ある時はそれぞれにidを指定してそれでスタイルを設定する。

input[type="text"] {width:100px;}
にするとすべてのテキストボックスがこのスタイルになってしまう。

input[id="ht"] {width:80px;}
とすると「身長」のテキストボックスだけにスタイルが適用される。

参考
idとスタイル(ps_0018)




「yt」スタイルを「table」タグに使わずにその外側の「div」タグに設定するとこうなる。

SAMPLE
<div class="yt tbsoto">
<table class="tbnaka">
<form>

チェックテスト
体重(kg) :
身長(cm) :
BMI :




「yt」スタイルを「table」タグに設定するとこうなる。

SAMPLE
<div class="tbsoto">
<table class="yt tbnaka">
<form>

チェックテスト
体重(kg) :
身長(cm) :
BMI :

角丸にならず、枠線も正常に描画されていない。




上の場合で、「table」タグから「tbnaka」スタイルをカットした場合。

SAMPLE
<div class="tbsoto">
<table class="yt">
<form>

チェックテスト
体重(kg) :
身長(cm) :
BMI :

問題点
これで、外枠を描く「yt」スタイルと、表(table)の中身を横スクロールさせる「tbnaka」の相性が悪いことが確認できる。いってみれば双方の動作が矛盾するわけで、こうなるのも当然かもしれない。

いずれにしても、フォームに入力する部分はそう多くはない。スマホの横幅に収まるようにしておくのがいいのかもしれない。

となると、「table class="tbnaka"」や「div class="tbsoto"」も無用になる。スクロールする必要がないからである。
また、JavaScriptをformを使わないパターン、すなわちidでデータの授受をすればもっと簡明になるだろう。「this.form」なども使わない。