目的のラジオボタンをクリックしても選択できない

以下のスクリプトを実行すると、デフォルトで全てのラジオボタンが選択された状態で表示され、一つのラジオボタンを選択することができません、どうしたらいいですか？
しかし何もしていないのに、全てのラジオボタンが選択されている、という状況はなくなり、その代わりに目的のラジオボタンをクリックしても選択できないという状況となりました。その解決方法を教えてください。

perl
1#!/usr/bin/perl
2use strict;
3use utf8;
4binmode(STDOUT,":utf8");
5
6print"Content-type: text/html\n\n";
7print <<"HTML";
8<!DOCTYPE html PUBLIC "-//WSC//DTD HTML 4.01 Transitional//EN">
9<html>
10<head>
11<title>ユーザーアカウント登録</title>
12</head>
13<body bgcolor="#000066" text="#000000" link="#0000ee" alink="#0000ee" vlink="#551a8b">
14<form method="post" form action="67b32.cgi" ENCTYPE="multipart/form-data">
15<table border="0">
16<tbody>
17<tr>
18<td><font color="#ff0000"><label for="ID">希望ユーザーID</label></font></td>
19<td><input type="text" name="ID" size="40" maxlength="30"><br></td>
20</tr><tr>
21<td><font color="#ff0000"><label for="pass">希望パスワード</label></font></td>
22<td><input type="password" name="pass" size="40" maxlength="30"><br></td>
23</tr><tr>
24<td><font color="#ff0000"><label for="pass2">パスワード確認</label></font></td>
25<td><input type="password" name="pass2" size="40" maxlength="30"><br></td>
26</tr><tr>
27<td><font color="#ff0000"><label for="shimei">氏名</label></font></td>
28<td><input type="text" name="shimei" size="40" maxlength="30"><br></td>
29</tr><tr>
30<td><font color="#ff0000"><label for="kaisyamei">会社名</label></font></td>
31<td><input type="text" name="kaisyamei" size="40" maxlength="30"><br></td>
32</tr><tr>
33<td><font color="#ff0000"><label for="mail">メールアドレス</label></font></td>
34<td><input type="text" name="mail" size="40" maxlength="30"><br></td>
35</tr><tr>
36<td><font color="#ff0000"><label for="syouhinmei">商品名</label></font></td>
37<td><input type="text" name="syouhinmei" size="40" maxlength="30"><br></td>
38</tr><tr>
39<td><font color="#ff0000"><label for="nedan">商品値段</label></font></td>
40<td><input type="text" name="nedan" size="40" maxlength="30"><br></td>
41</tr><tr>
42<td><font color="#ff0000"><label for="q1">商品カテゴリー</label></font></td>
43<td><input type="radio" name="q1" value="【書籍(実物商品)】"><font color="#ff0000">書籍</font>
44<input type="radio" name="q1" value="【ＣＤ(実物商品)】"><font color="#ff0000">ＣＤ</font>
45<input type="radio" name="q1" value="【ＤＶＤ(実物商品)】"><font color="#ff0000">ＤＶＤ</font>
46<input type="radio" name="q1" value="【ソフトウェア(実物商品)】"><font color="#ff0000">ｿﾌﾄウエア（実物）</font>
47<input type="radio" name="q1" value="【ビデオゲーム(実物商品)】"><font color="#ff0000">ビデオゲーム（実物）</font>
48<input type="radio" name="q1" value="【電子書籍（電子ファイル）】"><font color="#ff0000">電子書籍</font>
49<input type="radio" name="q1" value="【ソフトウェア（電子ファイル）】"><font color="#ff0000">ｿﾌﾄウェア（電子ファイル）</font>
50<input type="radio" name="q1" value="【音楽（電子ファイル）】"><font color="#ff0000">音楽（電子ファイル）</font>
51<input type="radio" name="q1" value="【ビデオゲーム（電子ファイル）】"><font color="#ff0000">ビデオゲーム（電子ファイル）</font>
52<input type="radio" name="q1" value="【動画（電子ファイル）】"><font color="#ff0000">動画（電子ファイル）</font><br></td>
53</tr><tr>
54<td><font color="#ff0000">ファイル1:画像ファイル(jpg/gif/png/bmpファイル)<br>ファイル2:中身立ち読みファイル(pdfファイル)（無い人はアップロードする必要はありません）<br>ファイル3:売り物となるコンテンツ（実物商品を扱う場合はアップデートする必要はありません）をアップロードしてください</font><br></td>
55</tr><tr>
56<td><font color="#ff0000">ファイル1を選択:</font></td>
57<td><font color="#ff0000"><input type="file" name="file1"></font><br></td>
58</tr><tr>
59<td><font color="#ff0000">ファイル2を選択:</font></td>
60<td><font color="#ff0000"><input type="file" name="file2"></font><br></td>
61</tr><tr>
62<td><font color="#ff0000">ファイル3を選択:</font></td>
63<td><font color="#ff0000"><input type="file" name="file3"></font><br></td>
64</tr><tr>
65<td><textarea name="mojijouhou" rows="4" cols="40">商品情報をご記入ください。</textarea><br></td>
66</tr><tr>
67<td><input type="submit" onclick="location.href'67b32.cgi'" value="送信">
68<input type="reset" value="リセット"></td>
69</tr>
70</tbody>
71</table>
72</form>
73</body>
74</html>
75HTML
76exit;

CentOS7でダウンロードを行おうとすると、全てのラジオボタンが選択されたようになったり、ラジオボタンが全くない状況を余儀なくされます。CentOS7のエラーに関係しているようです。どなたか解決策よろしくお願い致します。

退会済みユーザー

2018/08/21 00:40

PerlやCentOSやApacheの問題というよりも、結果的な出力のHTMLの問題だよね、これ。

m.ts10806

2018/08/21 01:01

複数行htmlなのであればインデントつけてください。読みづらいです。

trm

2018/08/21 01:20

何もしていないのに、全てのラジオボタンが選択されている、という状況はなくなり、その代わりに目的のラジオボタンをクリックしても選択できないという状況となりました。その解決方法を教えてください。

m.ts10806

2018/08/21 01:36

インデントが何か分かってないなら調べるか聞いてください。

yambejp

2018/08/21 03:20

個人的にはul-liなどリストをネストする場合など以外、htmlタグにインデントをつける意義を感じませんが・・・

liveasnotes

2018/08/21 03:33

ネストする以上はインデント必要ですよ．短いコードならまだしも，これぐらいのサイズだとインデントしてないと全体の構造が分かりにくいのです．（閉じタグ忘れが見つかることもありますしね）HTMLは構造を示す言語です．内包関係をはっきりさせておかないと，ある要素に対して実行した何らかの関数やスタイリングが，どこまで影響するのか確認しづらくなります．機能性だけでなく「読みやすさ」も，コードに必要な性質です．

date

2018/08/21 06:38

何もしていないのに、全てのラジオボタンが選択されている、という状況これはどうやって解決したのですか

m.ts10806

2018/08/21 06:41 編集

要件が変わっているのに質問がタイトルを含めて更新されていない。この状態では回答者を振り回しているだけです。指摘が増えるばかりですよ。

hope_mucci

2018/08/21 10:09

私も質問の状況は再現できなかったとお伝えしておきます。

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

回答2件

スクショです．ラジオボタンが自動で全選択，ということはないですね（但し，フォーム関連要素は，前回の状態を保持することがあるので，必要に応じて初期化処理を加えてください）

HTMLの問題ではなさそう（配色がヤバいという話はとりあえず置いておく）

labelにfor属性がないので，ボタンを直にクリックしないと効かないのが残念
（そして異様に目がちかちかする...><）

Thimbleはコピペするだけで，HTMLのインデントを自動で整えてくれるので便利です．ついでに，HTMLの12行目，name属性のところが，「=」ではなく「-」になっているのを見つけました．何か関連があるのかな

クリックできない系のときは，pointer-events:none;がかかってないかとか，他の要素が上にかぶってないかとか確認するのだけど，これだけだとさっぱり分かりません...

修正済みHTML（他の回答者さんの参考用に貼っておきます）

html
1<!DOCTYPE html PUBLIC "-//WSC//DTD HTML 4.01 Transitional//EN">
2<html>
3  <head>
4    <title>ユーザーアカウント登録</title>
5  </head>
6  <body bgcolor="#000066" text="#000000" link="#0000ee" alink="#0000ee" vlink="#551a8b">
7    <form method="post" form action="67b32.cgi" ENCTYPE="multipart/form-data">
8      <table border="0">
9        <tbody>
10          <tr>
11            <td><font color="#ff0000"><label for="ID">希望ユーザーID</label></font></td>
12            <td><input type="text" name="ID" size="40" maxlength="30"><br></td>
13          </tr>
14          <tr>
15            <td><font color="#ff0000"><label for="pass">希望パスワード</label></font></td>
16            <td><input type="password" name="pass" size="40" maxlength="30"><br></td>
17          </tr>
18          <tr>
19            <td><font color="#ff0000"><label for="pass2">パスワード確認</label></font></td>
20            <td><input type="password" name="pass2" size="40" maxlength="30"><br></td>
21          </tr>
22          <tr>
23            <td><font color="#ff0000"><label for="shimei">氏名</label></font></td>
24            <td><input type="text" name="shimei" size="40" maxlength="30"><br></td>
25          </tr>
26          <tr>
27            <td><font color="#ff0000"><label for="kaisyamei">会社名</label></font></td>
28            <td><input type="text" name="kaisyamei" size="40" maxlength="30"><br></td>
29          </tr>
30          <tr>
31            <td><font color="#ff0000"><label for="mail">メールアドレス</label></font></td>
32            <td><input type="text" name="mail" size="40" maxlength="30"><br></td>
33          </tr>
34          <tr>
35            <td><font color="#ff0000"><label for="syouhinmei">商品名</label></font></td>
36            <td><input type="text" name="syouhinmei" size="40" maxlength="30"><br></td>
37          </tr>
38          <tr>
39            <td><font color="#ff0000"><label for="nedan">商品値段</label></font></td>
40            <td><input type="text" name="nedan" size="40" maxlength="30"><br></td>
41          </tr>
42          <tr>
43            <td><font color="#ff0000"><label for="q1">商品カテゴリー</label></font></td>
44            <td>
45              <input type="radio" name="q1" value="【書籍(実物商品)】"><font color="#ff0000">書籍</font>
46              <input type="radio" name="q1" value="【ＣＤ(実物商品)】"><font color="#ff0000">ＣＤ</font>
47              <input type="radio" name="q1" value="【ＤＶＤ(実物商品)】"><font color="#ff0000">ＤＶＤ</font>
48              <input type="radio" name="q1" value="【ソフトウェア(実物商品)】"><font color="#ff0000">ｿﾌﾄウエア（実物）</font>
49              <input type="radio" name="q1" value="【ビデオゲーム(実物商品)】"><font color="#ff0000">ビデオゲーム（実物）</font>
50              <input type="radio" name="q1" value="【電子書籍（電子ファイル）】"><font color="#ff0000">電子書籍</font>
51              <input type="radio" name="q1" value="【ソフトウェア（電子ファイル）】"><font color="#ff0000">ｿﾌﾄウェア（電子ファイル）</font>
52              <input type="radio" name="q1" value="【音楽（電子ファイル）】"><font color="#ff0000">音楽（電子ファイル）</font>
53              <input type="radio" name="q1" value="【ビデオゲーム（電子ファイル）】"><font color="#ff0000">ビデオゲーム（電子ファイル）</font>
54              <input type="radio" name="q1" value="【動画（電子ファイル）】"><font color="#ff0000">動画（電子ファイル）</font><br>
55            </td>
56          </tr>
57          <tr>
58            <td>
59              <font color="#ff0000">
60                ファイル1:画像ファイル(jpg/gif/png/bmpファイル)<br>
61                ファイル2:中身立ち読みファイル(pdfファイル)（無い人はアップロードする必要はありません）<br>
62                ファイル3:売り物となるコンテンツ（実物商品を扱う場合はアップデートする必要はありません）をアップロードしてください
63              </font>
64              <br>
65            </td>
66          </tr>
67          <tr>
68            <td><font color="#ff0000">ファイル1を選択:</font></td>
69            <td><font color="#ff0000"><input type="file" name="file1"></font><br></td>
70          </tr>
71          <tr>
72            <td><font color="#ff0000">ファイル2を選択:</font></td>
73            <td><font color="#ff0000"><input type="file" name="file2"></font><br></td>
74          </tr>
75          <tr>
76            <td><font color="#ff0000">ファイル3を選択:</font></td>
77            <td><font color="#ff0000"><input type="file" name="file3"></font><br></td>
78          </tr>
79          <tr>
80            <td><textarea name="mojijouhou" rows="4" cols="40">商品情報をご記入ください。</textarea><br></td>
81          </tr>
82          <tr>
83            <td><input type="submit" onclick="location.href'67b32.cgi'" value="送信"><input type="reset" value="リセット"></td>
84          </tr>
85        </tbody>
86      </table>
87    </form>
88  </body>
89</html>