ｈｔｍｌで成形したフォームにPHPを組み込むとテキストがおかしくなります

質問

検索仕方が下手なせいなのか思った回答が探せませんでした。
それでお恥ずかしいのですが、皆さまのお力をお借りしたいと思います。

htmlでフォームを作った後、プログラマーさんがPHPを組み込んだのですが、その際IE6（7では確認してません）で<input>タグに囲まれていないテキストがおかしな表示になります。

おかしなというのは<input type="text">で表示された部分の幅と同じくらいの幅でテキストが折り返してしまうという状態です。
↓このような状態です
－－－－－－－－－－－－－　　　　
｜　テキストボックス　　　　　　｜　
－－－－－－－－－－－－－　　　
あいうえおかきくけこさしすせ
そたちつてとなにぬねのはひふ
へほ

SafariやFirefoxではちゃんとほどよい幅で折り返してます。
↓Safari・Firefox
－－－－－－－－－－－－－　　　　
｜　テキストボックス　　　　　　｜　
－－－－－－－－－－－－－　　　
あいうえおかきくけこさしすせそたちつてとなにぬねの
はひふへほ

htmlの組み方がおかしいからだとプログラマーさんから修正依頼をされましたが普通にhtmlで作成しただけで特に特殊なことをした訳ではありません。
強いて言う変化といえばテーブルを使わずにデザインしてあったものをプログラマーさんがテーブルタグの中にそれらを入れてしまったことでしょうか。
プログラムを使ったフォームは初めて扱うのでよく分かりません。
みなさま対処方法をお教えください。よろしくお願いします。

回答No.5

STICKY2006 · ベストアンサー

>>えええ！やっぱりですか…orz

まぁ、個人的な意見ではありますけどね。。。
「仕様にないことを何でやるの！！」って前によく言われた事があるので。。。(´・ω・`)

作業を行う際の、「どういう作業をします」って取り決め次第かもしれませんけどね。

>>もしこれが原因なら、上の態度が気に入らないとかでこっぴどく当たってくださいｗ
>これは絶対にやらないほうが良いでしょう。

ここらへんは変に言い過ぎましたね。
反省点です。

ただ、金払って頼む客と、金もらって作る側の完成理想はできるだけ一致させておく必要ってありますよね。（質問文読んで、お金払ってるユーザーと、お金もらってるプログラマの間のことだよな？と勝手に推測して回答したのもよくなかったかもですね。
（それも、金もらってる側のお仕事の一つかとは思いますけどね。客の望んでいることをいかに聞き出すか。とかってよく自分は言われます。

どんだけ聞き出しても、人間なんで、最終形態にある程度のズレは出ますが、それはそれで仕方ない。
ただ、聞き出すことが足りなくてズレたなら、それは聞き出すほうの問題でもあるだろ？って思ってます。

今回は、「テーブル入れた方がレイアウト定まるからそっちのがいいだろ」って思って追加されたのかもしれませんけど
もしかしたら、「この色にはこの色だろ。こっちのサイズはこうだろ。」とか、
結果、出来ることは同じであっても、内容ががらっと変わったものになった可能性だってあったわけですよね。
（やっぱ、そこらへんは「どういう作業をします」って取り決め次第かもしれませんが。。。

まあ、何にしてもよく分からない回答になってしまった。。。(´・ω・`)
感情論な感じになってしまし失礼。。。

>>出来ればテーブルでテキストがほどよく折り返せる方法をご存知でしたらご教授ください。

とりあえず、この辺に関しては、すでに対処されてるって事なんで言うのもあれですが。。。

<td rowspan="2" align="left" width ="100"><p>商品名：</p></td>
<td width ="400"><select name="selItem" class="exception">

だとか

<td nowrap><select name="selItem" class="exception">

だとか

諦めて

※テキストテキスト<BR>テキストテキストテキスト<BR>テキストテキストテキスト<BR>テキストテキストテキスト<BR>テキスト

だとか

スタイルシートの方で幅きめちゃって、divやらで囲むとか。。。

<PRE>～</PRE>タグで囲むとか。。。（タグのブラウザ対応とか気になりますが。

まぁ、方法だけならいろいろありますが、「ほどよく」の内容が的確に聞けないと、望む通りにはならないかもですが。

板汚し失礼しました(´・ω・`；)

お礼

再びの回答ありがとうございます。
>反省点です。
冗談半分で読んでいたので気にしないでください。

さて結局どうしたかと言いますと…
最初にやってダメだったnowrapをもう一度試してみました。
はっきりした原因は分からないのですが、プログラマさんの側でもファイルをいじっていたみたいなので上手くアップロードが出来ていなかったのかもしれません。
今回はこれで上手くいったのでとりあえず良かったと思う事しました。

聞ける人がいない環境にいるのでこういうサイトは本当にありがたいです。

回答No.8

leap_day

こんにちは

プログラマーではなくただの一般人ですが・・・
こちらの関係の質問に主に回答させてもらっているのですけどできるだけ質問者様の意図に沿うように・・・レイアウトを崩さないように・・・と考えながら回答しているのですが(どうしても気になるときは※印とかで説明してから修正とかはしますけど)プロの方でもそこまで考えずにやられる方がおられるのですね・・・（＞＜）

え～～と本題ですが・・・
一部抜粋といっても問題部分はそのまま（＃２様のお礼に書かれてあるもの)ですよね？
そうしますと<td>の数があっていないような気がするのですが・・・

┌┐┌┐
││└┘
││┌┐┌┐
└┘└┘└┘
こんな風になっていると思います・・・

<td colspan="2"><select name="selItem" class="exception">

としてもダメですか？
※おそらくレイアウトが多少変更しますのでwidth調整をしてください

お礼

ご回答いただきありがとうございます。

ソースがおかしいのは私があちこちいじりまくっていたからだと思います。
午前中はかなりてんぱっていたようです。
（混乱させてすみません。元のものはノーマルなテーブルでした）

回答No.7

神崎 渉瑠（@taloo）

プログラマーの立場から。

デザイナーと連携する場合、
最終的にどんなHTMLを出力すればよいかというのを確認してあれば、その通りに書き出したり、
Illustratorなどで作った画像と全く同じに表示されるようにHTMLとCSSファイルを作って下さいというのなら、それにあわせてHTMLとCSSファイルを作りますが、
曖昧な場合は曖昧でしか答えられません。

プログラマーが作ったスタイルシートとデザイナーが作ったスタイルシートが異なっていると、
プログラマーが作ったスタイルシートでは綺麗になっていても、
デザイナーが作ったスタイルシートではぐちゃぐちゃ、ということもあり得ます。
納品物の中にCSSファイルが含まれていない場合は、その可能性も高くなります。

> 強いて言う変化といえばテーブルを使わずにデザインしてあったものをプログラマーさんがテーブルタグの中にそれらを入れてしまったことでしょうか。
この点について、
これと同じHTMLを作れ、もしくは、このスクリーンショットと同じ表示になるように作れと言われて違う物が出来るようなら、タダの不良品ですので、作り直させるのが当然でしょう。
表示サンプルがHTMLではなく画像だったのなら、一緒にCSSファイルも納品してもらってはいかがでしょうか。

> ただ、彼の方からもう一件、手に負えなくなったといってくちゃくちゃになったファイルが回ってきていまして、両方とも納期がそんなにないのです。
HTMLやCSSが手に負えないということであれば、
質問者さんがHTMLを作って、このように出力させて下さい、といえば、たぶんその通りに作れると思います。
それで作れなければ、、、まぁ、なんですねぇ。。。

もし自分でPHPのコードを編集される場合、
<tr><td><?php echo $xxxx; ?></td><td><?php echo $xxxx; ?></td></tr>
または、
<tr><td><?= $xxxx ?></td><td><?= $xxxx ?></td></tr>
などとなっていると思いますが、
PHPでは <?php xxxxx ?> <?= $xxxxx ?> という部分がPHPのコードで、
その外側の部分は通常のHTMLですので、そこは自由に変更しても、PHPの動作に影響はありません。
あまりに細かいと結構読みにくかったりしますが、注意していけばたぶん大丈夫と思います。

>ANo.2回答
tableのwidthを削除、確認用にborder="1"、tdにそれぞれwidth="100"とwidth="400"を追加して様子見？
ていうか、rowspan邪魔？

p{margin:0;}

<table border="0">
<tr>
<td rowspan="2" align="left" width="100"><p>商品名：</p></td>
<td width="400"><select name="selItem" class="exception">

どういう表示にしたいかがわからないと、答えようがないですね(^^;

お礼

回答ありがとうございます。

あんまりにも私の原因究明が遅かったせいか上司（ソースを変えちゃった人）が見かねて「原因が分かったんだったら後はやっておく」と言ってくださったので、これでもうひとつの作業にかかれます。

nowrapの聞かなかった原因はアップロードの際のファイルのぶつかり（？っていうのでしょうか）だと思われます。
直せと言ったなら何もして欲しくなかった…なんて思っちゃいますが、言っても始まりませんので原因が分かってよかったと思っておくべきなんでしょう。

>そこは自由に変更しても、PHPの動作に影響はありません。
実は次の作業でphpがてんこ盛りになってるファイルを触らなければいけない状態だったので、このアドバイスはありがたいです。

回答No.6

wp_

まぁ仕事云々の話はやめましょうか。
当方としては「プログラマを責めるのはお門違いだから気をつけて」
ということを言いたかっただけなので。

nowrapが効いていないのはどこかでwidthを書いているからとか
cssで幅指定しているからかとかいろいろ原因はありますが、
当方の環境では再現できなかったのでなんともいえません。

まぁ一番妥当なのは
>どうやらhtmlのみの部分は触っても支障がないようですので元のhtmlに戻すことします。
ですね。プログラマが書いたデザインは無視すればよいです。
コード部分まで消さないよう留意すれば問題ないでしょう。
// というか質問者様の文から察するに
// そのプログラマの力量は明らかに足りてない気がするのだけども。
// そんな奴に仕事させるなと思わなくもない

お礼

再びの回答ありがとうございます。

下の6さんのお礼でも書いたのですが、プログラマさんの側でもファイルをいじっていたみたいで、アップロードが上手くいかなかった事がnowrapを上手くいかなくしてたそもそもの原因のようです。

結局、幅設定しnowrapで無事になんとかなりました。

彼の方もCSSが分からないので、私に崩れた原因をつかんで欲しかったようです。
一応上司なんですけれどね^^;

回答No.4

wp_

当方プログラマです。

辛辣な意見ですが、プログラマ側から「デザインが崩れたから直せ」と言われたらそれを直すのがデザイナの仕事です。
プログラマに対して「勝手に<table>入れんな！」と抗議したところで「だから直せといっている」と帰ってくるのが関の山でしょう。
勝手にテンプレを変えて共有環境に上げたプログラマにも問題はありますが、質問者様も仕事はきちんとこなすべきでしょう。

言われたことはこなす、直せといわれたら直す、これがプロの仕事です。
ましてデザインテンプレートに関しては通常「デザイナが責任を持つ」ものです。
プログラマが責任を持つのであればプログラマに直させれば良いですが、それでは質問者様は何のためにいるのと言う話になります。
責任を持つ気があるのならば（それでお金をもらいたいのであれば）該当部分をtable排除してでも正常表示させるべきでしょう。
tableがないと正常に動かない（jsをふんだんに使用）といった場合はプログラマを海に沈めてもかまいませんが。
そんな腕の悪いpgがいるから当方があちこち駆けずり回って腐コードを直すハメにぐちぐちぐちぐち

ちなみに当方もデザイナが上げたテンプレのコードはガンガン変えますが、デザイナの方も崩れているのを察知したらガンガン変えます。
もちろん当方との詰めの話はしますが。cvsやsvnなどのバージョン管理を使ってないと無理ですけどね。

>もしこれが原因なら、上の態度が気に入らないとかでこっぴどく当たってくださいｗ
これは絶対にやらないほうが良いでしょう。
人間関係をこじらせたところで仕事が終わるわけではありません。
そのような薦めかたをするのも大人の対応というには程遠いかと思われます。
仕事をするために会社にいるのか他人をこき下ろすために会社にいるのか熟考すべきでしょう。

で。本題ですが、nowrapでは駄目なのでしょうか？

お礼

>nowrapでは駄目なのでしょうか？
nowrapは一番最初に思いついたので既に試しました。

補足

>質問者様も仕事はきちんとこなすべきでしょう。
確かに随分と辛辣なご意見ですね。
私が仕事をちゃんとやっていなくて甘ったれてるようにあなたには思えたのですね、
この文章からそう読み取れたのであれば大変申し訳ないです。

ただ、彼の方からもう一件、手に負えなくなったといってくちゃくちゃになったファイルが回ってきていまして、両方とも納期がそんなにないのです。
そういうこともあって、もしできる物ならテーブルを生かした修正（の方が早いかな？と思ったので）、それと今後また同じ事があった場合に参考になればと思いお聞きしたかったのです。
別に責任云々を問うつもりも言い争う気もさらさらありません。
ちゃんとモノが出来ればそれで良いので…。
（なぜ話が逸脱してしまったのでしょうか？その方が不思議です）
仕事の責任等の所在云々の件に関してはもうお答えいたしません。

回答No.3

shimix

＃ちょっと憤慨モードです。担当プログラマに「強く」抗議していいと思いますよ。

>そういえば以前作った時はそんな事は言われなかったような。
>作る人の個性（？）なんでしょうかねぇ^^;

個性というにはあまりにも・・と思います。せっかくtableを使わずに書いたhtmlにtableを埋め込むなんて非常識だと思います。htmlとしては悪化するわけですから。htmlとしての出来が良かろうと悪かろうと、スクリプトを入れるのに問題がない部分を触るのは御法度だと思います。

というかphpを埋め込むのに問題がある部分なんてほとんどないです。ページデザインとスクリプトを分けている意味がありません。

ちなみに私は元のhtmlをテンプレートとして読み込んで処理することが多いです。埋め込む部分だけそれ用の記号を挿入しますけどね。htmlがおかしくなったら自分じゃ修正出来ないというのもありますけど（苦笑

お礼

再度のご回答ありがとうございます。

どうやらhtmlのみの部分は触っても支障がないようですので元のhtmlに戻すことします。
それが一番近道な気がします。

回答No.2

STICKY2006

こんちくは。

近い立場でプログラマーさんな自分です・ｗ・)y-~~

>>htmlの組み方がおかしいからだとプログラマーさんから修正依頼をされましたが

ちょっとその言い方が気に食わなかったもので。。。＠ｗ＠
ギャフンといわせられるように原因追求原因追求。。。

さて。

>>強いて言う変化といえばテーブルを使わずにデザインしてあったものをプログラマーさんがテーブルタグの中にそれらを入れてしまったことでしょうか。

もしこれが原因なら、上の態度が気に入らないとかでこっぴどく当たってくださいｗ

対処方法。

テーブルが原因かどうか判別。

<table>
<tr>
<td>
<input type ="text">テキストボックスです。<BR>
あいうえおかきくけこさしすせそなにぬねの。。。
</td>
</tr>
</table>

こんな感じで、「<td>～</td>」の中に、テキストボックスと、該当の文字が入ってれば、なりますね。

<table>
のタグを
<table border ="1">
に置き換える、または、「border ="1"」を、<table>タグの中に追記することで、テーブルの枠線が表示されるので、もっと分かりやすくなるかと思います。

まぁ。。。あくまで推測なんで、上のようになっているかどうかは分かりませんけどね。。。

該当部分であろう箇所のHTMLソースの提示があれば、もっと突っ込んで回答できるかと思いますよ。

。。。自分も、１番さん同様、ホントにその追加をプログラマさんがしてるなら、必要のないものだったんじゃ？といいたい感じのことですねぇ(´・ω・`)

お礼

回答ありがとうございます。

テキストボックスと一緒に・・・入ってました。
まさにご記入くださったのような状態です。

【ソース：一部抜粋】
<h4 id="aaa">お申込みフォーム</h4>
<div id="bbb">
<form name="frmInput" method="post" action="shop_confirm.php">
<table border="0" width="500">
<tr>
<td rowspan="2" align="left"><p>商品名：</p></td>
<td><select name="selItem" class="exception">
<option>ccccccccccc（￥x,xxx 税・送料込）</option>
<option>ddddddddddd（￥x,xxx 税・送料込）</option>
<option>eeeeeeeeee（￥x,xxx 税・送料込）</option>
<option>fffffffffff（￥x,xxx 税・送料込）</option>
</select><br />
<!--☆☆問題の箇所☆☆-->※テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</td>
</tr>
<tr>
<td>氏名：</td>
<td align="left" width="400"><input type="text" name="txtName" /></td>

どこまで表示できるのか分からなかったので、とりあえず途中まで（で大丈夫だと思うので）。
元々、テキストは<p>タグでくくっていてテーブルなんて「テ」の字も存在してませんでした。
というのも私はテーブルが苦手なので…（苦笑）

>自分も、１番さん同様、ホントにその追加をプログラマさんがしてるなら、必要のないものだったんじゃ？
えええ！やっぱりですか…orz
元ファイルはhtmlとcss使って作成しているんですが、少しは崩れるかなぁと思ってフォーム自体（テキスト以外）は特にいじってなくて追加した後で細々と形成させようと思っていたんですが、予想外の事態にややパニック気味です^^;

で質問後にテーブルこっそり外してみたんですが、美しさはともかく（笑）ちゃんとIEでも問題なく表示されました。

ただ、全部のフォームがこの状態だとチョット・・・という気がしてるので出来ればテーブルでテキストがほどよく折り返せる方法をご存知でしたらご教授ください。

補足

テーブルに幅を入れてみたのは私です。
幅指定は最初はどこにもありませんでした。

回答No.1

shimix

>強いて言う変化といえばテーブルを使わずにデザインしてあったものを
>プログラマーさんがテーブルタグの中にそれらを入れてしまったことで
>しょうか。

テーブルに入れてしまうと、同じ列が同じ幅になってしまうのは当然のことでは？なぜ「テーブルタグに入れたのか」をプログラマに確認すべきです。phpスクリプトを組み込んでいくのに、そんなことをする必然性はないので・・。

＃私は（スクリプトを組み込むのに）元のhtmlを変更したことはないです。

お礼

回答ありがとうございます。

>phpスクリプトを組み込んでいくのに、そんなことをする必然性はないので・・。
そうなんですか？
そういえば以前作った時はそんな事は言われなかったような。
作る人の個性（？）なんでしょうかねぇ^^;
作ったフォームが4パターンあるのですが、それに全部テーブルを入れちゃってるみたいなので、上手く表示できないのがIEだけだったので、できればこの状態でナントカできないかなぁと思ったもので…。