HTML表示で前の方に表示したい項目が後ろに表示したい項目の後ろに表示される

このスクリプトを実行すると、
希望ユーザ-ID＆テキストボックス
希望パスワード＆テキストボックス
パスワード確認＆テキストボックス
氏名＆テキストボックス
メールアドレス＆テキストボックス
商品名＆テキストボックス
商品値段＆テキストボックス
を最初の方に表示したいのですが、それ以外の後ろに表示したい項目の後ろに表示されてしまいます。どなたか解決策をお願いいたします。

#!C:/WWW/Perl64/bin/perl

use strict;
use UTF8;

print "Content-type: text/html\n\n";
print <<"HTML";

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>ユーザーアカウント登録</title> </head> <body bgcolor="#000066" text="#000000" link="#0000ee" alink="#0000ee" vlink="#551a8b"> <form method="post" form action="67b12.cgi" ENCTYPE="multipart/form-data"> <form> <table border="0"> <tbody> 　 <tr> <th><align="left"><b><font color="#ff0000">希望ユーザ-ID</font></b></th> <td><input type="text" name="name" size="40" maxlength="30"></td><br> </tr><tr> <th><align="lrft"><b> <font color="#ff0000">希望パスワード </font></b></th> <td><input type="password" name="pass" size="40" maxlength="30"></td><br> </tr><tr> 　 <th><align="left"><b><font color="#ff0000">パスワード確認 </font></b></th> <td><input type="password" name="pass2" size="40" maxlength="30"></td><br> </tr><tr> <th><align="left"><b> <font color="#ff0000">氏名</font></b></th> <td><input type="text" name="shimei" size="40" maxlength="30"></td><br> </tr><tr> <th><align="left"><b><font color="#ff0000">メールアドレス </font></b></th> <td><input type=""text"" name="mail" size="40" maxlength="30"></td><br> </tr><tr> <th><align="left"><b><font color="#ff0000">商品名</font></b></th> <td><input type="text" name="syouhinmei" size="40" maxlength="30"></td><br> </tr><tr> <th><align="left"><b> <font color="#ff0000">商品値段</font></b></th> <td><input type="text" name="nedan" size="40" maxlength="30"></td><br> 　　　　　 </tr> <align="left"><p><b><font color="#ff0000">商品カテゴリー</font></b> <input type="radio" name="q1" value="syoseki"><font color="#ff0000">書籍</font> <input type="radio" name="q1" value="CD"><font color="#ff0000">ＣＤ</font> <input type="radio" name="q1" value="DVD"><font color="#ff0000">ＤＶＤ</font> <input type="radio" name="q1" value="ソフト実物"><font color="#ff0000"> ｿﾌﾄウェア（実物）</font> <input type="radio" name="q1" value="ビデオゲーム"><font color="#ff0000">ビデオゲーム（実物）</font> <input type="radio" name="q1" value="電子書籍"><font color="#ff0000">電子書籍</font> <input type="radio" name="q1" value="ソフトウェア電子"><font color="#ff0000">ｿﾌﾄウェア（電子ファイル）</font> <input type="radio" name="q1" value="電子音楽"><font color="#ff0000">音楽（電子ファイル）</font> <input type="radio" name="q1" value="videogame2"><font color="#ff0000">ビデオゲーム（電子ファイル）</font> <input type="radio" name="q1" value="douga2"><font color="#ff0000">動画（電子ファイル）</font><br> <font color="#ff0000">ファイル1:画像ファイル(jpg/gif/png/bmp/ファイル)<br>ファイル2:中身立ち読みファイル(pdfファイル)（無い人はアップロードする必要はありません）、<br>ファイル3:売り物となるコンテンツ（実物商品を扱う場合はアップロードする必要はありません）<br>をアップロードしてください<br> ファイル1を選択:<input type="file" name="file1"><br> ファイル2を選択:<input type="file" name="file2"><br> ファイル3を選択:<input type="file" name="file3"><br> <textarea name="mojijouhou" rows="4" cols="40">商品情報をご記入ください。</textarea> <br> <input type="submit" onclick="location.href'67b12.cgi'" value="送信"> <input type="reset" value="リセット"></td></font> </tbody> </table> </form> <br> <br> </body> </html> HTML exit;

dit.

2018/02/01 05:12 編集

teratailにはコードを見やすくするためのしくみがあります。質問を編集し、コード部分をすべて選択し<code>ボタンを押してください。画面の右側にプレビューが表示されているはずなので確認してください。https://teratail.com/help/question-tips#questionTips3-5 もご覧ください

行動規範の内容に同意します

回答2件

<align>なんてタグはHTML 4.01にも存在しません。

あと、<body>の色指定の属性や<font>などによる指定は、現代からすれば時代遅れとなっています。新規作成するものであれば、HTML 5+CSS 3で組みましょう。

投稿2018/02/01 00:43

maisumakun

総合スコア145183

ベストアンサー

なんか変なところに <br> 入ってますね

html
1<td><input type="text" name="name" size="40" maxlength="30"></td><br>

表示がおかしいのは HTMLの問題だと思われるので、こういう場合は
「HTML の部分だけ抜き出して」
「インデントを入れて」
「``` で囲んで」
質問に貼り付けると、読みやすくて回答しやすいです。

＃相当暇な時なら自分でインデントを入れて読み解いたりしなくもないですが
＃大抵は「うっ面倒臭い」と思ってブラウザバックしてしまいます

とりあえず </table> の閉じタグが変なところにあるからですかね･･･

全体的に HTML としてちょっとおかしいみたいです。一度見直した方が良さそうですね。

投稿2018/02/01 04:56

編集2018/02/01 04:56

sk_3122

総合スコア1126

trm

2018/02/16 08:15

<table>タグを所定の位置に書き足したら解決されました。ありがとうございました。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

HTML表示で前の方に表示したい項目が後ろに表示したい項目の後ろに表示される

関連した質問