input　type="text"で入力できる項目とできない項目があります。原因はなんでしょうか？

回答率: 85.48%

質問するログイン新規登録

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

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

新規登録して質問してみよう

ただいま回答率: 85.48%

トップ CSS3に関する質問

Q&A

解決済

3回答

2614閲覧

input　type="text"で入力できる項目とできない項目があります。原因はなんでしょうか？

総合スコア17

0グッド

0クリップ

投稿2018/11/16 02:04

編集2018/11/16 02:07

0

0

input type="text"でフォームを作成しているものです。

箇所によって入力できないフォームとできるフォームが出現します。
こちらの原因が不明でして今回ご質問させていただきました。
原因は何にあるのでしょうか？

なお、cssはwebサービス側のバックで用意されているためさわれません。

以下bodyタグの中身です。

html
1<form id="customform" class="pera1-form form-horizontal"  method="POST">
2      <input type="hidden" name="oid" value="">
3      <input type="hidden" name="retURL" value="">
4      <input type="hidden" name="lead_source" value="Web">
5      <div class="pera1-editable" data-pera1-type="custom_form">
6        <div class="form">
7          <div class="form-group" data-elem-name="formInputCustomText">
8            <label class="col-sm-3 control-label customFormGroup_ttl_required">性</label>
9            <div class="col-sm-8 form_inputs">
10              <input　id="last_name" class="form-control form_input"  maxlength="80" name="last_name" size="20" type="text" placeholder="山田" required="required" style="font-family: fontplus-unused;">
11            </div>
12          </div>
13
14          <div class="form-group" data-elem-name="formInputCustomText">
15            <label class="col-sm-3 control-label customFormGroup_ttl_required">名</label>
16            <div class="col-sm-8 form_inputs">
17              <input　id="first_name" class="form-control form_input" type="text" placeholder="一郎" name="first_name" required="required" style="font-family: fontplus-unused;">
18            </div>
19          </div>
20          <div class="form-group" data-elem-name="formInputCustomText">
21            <label class="col-sm-3 control-label customFormGroup_ttl_required">会員/非会員</label>
22            <div class="col-sm-8 form_inputs">
23              <label class="radio-inline">
24                <input　id="00N10000007RbTx" class="form_input" type="radio" value="会員" name="00N10000007RbTx" required="required">会員
25              </label>
26              <label class="radio-inline">
27                <input　id="00N10000007Rbj9" class="form_input" type="radio" value="非会員" name="00N10000007Rbj9" required="required">非会員
28              </label>
29            </div>
30          </div>
31          <div class="form-group" data-elem-name="formInputCustomText">
32            <label class="col-sm-3 control-label customFormGroup_ttl_required">会社名</label>
33            <div class="col-sm-8 form_inputs">
34              <input　id="company" class="form-control form_input" type="text" placeholder="株式会社山田商店" name="company" required="required" style="font-family: fontplus-unused;">
35            </div>
36          </div>
37          <div class="form-group" data-elem-name="formInputCustomText">
38            <label class="col-sm-3 control-label customFormGroup_ttl">部署名</label>
39            <div class="col-sm-8 form_inputs">
40              <input id="00N10000007R2sM" class="form-control form_input" type="text" placeholder="人事部" name="00N10000007R2sM" style="font-family: fontplus-unused;">
41            </div>
42          </div>
43          <div class="form-group" data-elem-name="formInputCustomText">
44            <label class="col-sm-3 control-label customFormGroup_ttl">役職名</label>
45            <div class="col-sm-8 form_inputs">
46              <input id="title" class="form-control form_input" type="text" placeholder="部長" name="title" style="font-family: fontplus-unused;">
47            </div>
48          </div>
49          <div class="form-group" data-elem-name="formInputCustomText">
50            <label class="col-sm-3 control-label customFormGroup_ttl_required">メールアドレス</label>
51            <div class="col-sm-8 form_inputs">
52              <input id="email" class="form-control form_input" type="email" placeholder="example@peraichi.com" name="email" required="required">
53            </div>
54          </div>
55          <div class="form-group" data-elem-name="formInputCustomText">
56            <label class="col-sm-3 control-label customFormGroup_ttl_required">お電話番号</label>
57            <div class="col-sm-8 form_inputs">
58              <input id="phone" class="form-control form_input" type="text" placeholder="080-1234-5678" name="phone" required="required" style="font-family: fontplus-unused;">
59            </div>
60          </div>
61          <div class="form-group" data-elem-name="formInputCustomText">
62            <label class="col-sm-3 control-label customFormGroup_ttl_required">お問合せ内容</label>
63            <div class="col-sm-8 form_inputs">
64              <label class="radio-inline">
65                <input id="00N10000007RbWh" class="form_input" type="radio" value="お申込み" name="00N10000007RbWh" required="required">お申込み
66              </label>
67              <label class="radio-inline">
68                <input id="00N10000007RbWw" class="form_input" type="radio" value="3ヶ月試用プラン（JMA会員様限定）" name="00N10000007RbWw" required="required">3ヶ月試用プラン（JMA会員限定）
69              </label>
70              <label class="radio-inline">
71                <input id="00N10000007RbX6" class="form_input" type="radio" value="デモ実施" name="00N10000007RbX6" required="required">デモ実施
72              </label>
73              <label class="radio-inline">
74                <input id="00N10000007RbXB" class="form_input" type="radio" value="デモID発行" name="00N10000007RbXB" required="required">デモID発行
75              </label>
76              <label class="radio-inline">
77                <input id="00N10000007RbXG" class="form_input" type="radio" value="資料請求" name="00N10000007RbXG" required="required">資料請求
78              </label>
79              <label class="radio-inline">
80                <input id="00N10000007RbXL" class="form_input" type="radio" value="その他" name="00N10000007RbXL" required="required">その他
81              </label>
82            </div>
83          </div>
84          <div class="form-group" data-elem-name="formInputCustomText">
85            <label class="col-sm-3 control-label customFormGroup_ttl">お問合せの詳細</label>
86            <div class="col-sm-8 form_inputs">
87              <textarea id="00N10000007RA0L" rows="4" cols="40" class="col-sm-8 form_input form-control" placeholder="詳細をご記入ください" name="00N10000007RA0L" style="font-family: fontplus-unused;"></textarea>
88            </div>
89          </div>
90          <input type="submit" name="submit" class="btn btn-primary btn-customform-submit pera1-editable col-sm-offset-3 col-sm-8">
91        </div>
92      </div>
93    </form>
94

2018/11/16 02:10

具体的に、どれが「入力できる項目」でどれが「入力できない項目」なのでしょうか。

2018/11/16 02:12

具体的に言いますと、「部署名・人事部・役職名・メールアドレス・お電話番号・お問合せ詳細」が入力可能で、残りは入力不可能です。

2018/11/16 02:13

姓・名・会社名が入力不可となってます

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

回答3件

0

ベストアンサー

html
1<input　id="last_name" class="form-control form_input"  maxlength="80" name="last_name" size="20" type="text" placeholder="山田" required="required" style="font-family: fontplus-unused;">

<inputの直後に全角スペースがあるため、正しくタグとして認識されていないようです。

投稿2018/11/16 02:16

総合スコア145184

2018/11/16 02:20

初歩的なミスでした。ご回答ありがとうございます。今後ともよろしくお願いします！

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

0

これは、inputとidの間に全角のスペースが入っているのが原因です。
半角スペースに置き換えると入力フォームは出力されます。

投稿2018/11/16 02:15

編集2018/11/16 02:16

総合スコア204

2018/11/16 02:20

初歩的なミスでした。ご回答ありがとうございます。今後ともよろしくお願いします！

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

0

全角余白があるからです
これで解決します

html
1<form id="customform" class="pera1-form form-horizontal"  method="POST">
2      <input type="hidden" name="oid" value="">
3      <input type="hidden" name="retURL" value="">
4      <input type="hidden" name="lead_source" value="Web">
5      <div class="pera1-editable" data-pera1-type="custom_form">
6        <div class="form">
7          <div class="form-group" data-elem-name="formInputCustomText">
8            <label class="col-sm-3 control-label customFormGroup_ttl_required">性</label>
9            <div class="col-sm-8 form_inputs">
10              <input id="last_name" class="form-control form_input"  maxlength="80" name="last_name" size="20" type="text" placeholder="山田" required="required" style="font-family: fontplus-unused;">
11            </div>
12          </div>
13
14          <div class="form-group" data-elem-name="formInputCustomText">
15            <label class="col-sm-3 control-label customFormGroup_ttl_required">名</label>
16            <div class="col-sm-8 form_inputs">
17              <input id="first_name" class="form-control form_input" type="text" placeholder="一郎" name="first_name" required="required" style="font-family: fontplus-unused;">
18            </div>
19          </div>
20          <div class="form-group" data-elem-name="formInputCustomText">
21            <label class="col-sm-3 control-label customFormGroup_ttl_required">会員/非会員</label>
22            <div class="col-sm-8 form_inputs">
23              <label class="radio-inline">
24                <input id="00N10000007RbTx" class="form_input" type="radio" value="日本能率協会会員" name="00N10000007RbTx" required="required">日本能率協会会員
25              </label>
26              <label class="radio-inline">
27                <input id="00N10000007Rbj9" class="form_input" type="radio" value="日本能率協会非会員" name="00N10000007Rbj9" required="required">日本能率協会非会員
28              </label>
29            </div>
30          </div>
31          <div class="form-group" data-elem-name="formInputCustomText">
32            <label class="col-sm-3 control-label customFormGroup_ttl_required">会社名</label>
33            <div class="col-sm-8 form_inputs">
34              <input id="company" class="form-control form_input" type="text" placeholder="株式会社山田商店" name="company" required="required" style="font-family: fontplus-unused;">
35            </div>
36          </div>
37          <div class="form-group" data-elem-name="formInputCustomText">
38            <label class="col-sm-3 control-label customFormGroup_ttl">部署名</label>
39            <div class="col-sm-8 form_inputs">
40              <input id="00N10000007R2sM" class="form-control form_input" type="text" placeholder="人事部" name="00N10000007R2sM" style="font-family: fontplus-unused;">
41            </div>
42          </div>
43          <div class="form-group" data-elem-name="formInputCustomText">
44            <label class="col-sm-3 control-label customFormGroup_ttl">役職名</label>
45            <div class="col-sm-8 form_inputs">
46              <input id="title" class="form-control form_input" type="text" placeholder="部長" name="title" style="font-family: fontplus-unused;">
47            </div>
48          </div>
49          <div class="form-group" data-elem-name="formInputCustomText">
50            <label class="col-sm-3 control-label customFormGroup_ttl_required">メールアドレス</label>
51            <div class="col-sm-8 form_inputs">
52              <input id="email" class="form-control form_input" type="email" placeholder="example@peraichi.com" name="email" required="required">
53            </div>
54          </div>
55          <div class="form-group" data-elem-name="formInputCustomText">
56            <label class="col-sm-3 control-label customFormGroup_ttl_required">お電話番号</label>
57            <div class="col-sm-8 form_inputs">
58              <input id="phone" class="form-control form_input" type="text" placeholder="080-1234-5678" name="phone" required="required" style="font-family: fontplus-unused;">
59            </div>
60          </div>
61          <div class="form-group" data-elem-name="formInputCustomText">
62            <label class="col-sm-3 control-label customFormGroup_ttl_required">お問合せ内容</label>
63            <div class="col-sm-8 form_inputs">
64              <label class="radio-inline">
65                <input id="00N10000007RbWh" class="form_input" type="radio" value="お申込み" name="00N10000007RbWh" required="required">お申込み
66              </label>
67              <label class="radio-inline">
68                <input id="00N10000007RbWw" class="form_input" type="radio" value="3ヶ月試用プラン（JMA会員様限定）" name="00N10000007RbWw" required="required">3ヶ月試用プラン（JMA会員限定）
69              </label>
70              <label class="radio-inline">
71                <input id="00N10000007RbX6" class="form_input" type="radio" value="デモ実施" name="00N10000007RbX6" required="required">デモ実施
72              </label>
73              <label class="radio-inline">
74                <input id="00N10000007RbXB" class="form_input" type="radio" value="デモID発行" name="00N10000007RbXB" required="required">デモID発行
75              </label>
76              <label class="radio-inline">
77                <input id="00N10000007RbXG" class="form_input" type="radio" value="資料請求" name="00N10000007RbXG" required="required">資料請求
78              </label>
79              <label class="radio-inline">
80                <input id="00N10000007RbXL" class="form_input" type="radio" value="その他" name="00N10000007RbXL" required="required">その他
81              </label>
82            </div>
83          </div>
84          <div class="form-group" data-elem-name="formInputCustomText">
85            <label class="col-sm-3 control-label customFormGroup_ttl">お問合せの詳細</label>
86            <div class="col-sm-8 form_inputs">
87              <textarea id="00N10000007RA0L" rows="4" cols="40" class="col-sm-8 form_input form-control" placeholder="詳細をご記入ください" name="00N10000007RA0L" style="font-family: fontplus-unused;"></textarea>
88            </div>
89          </div>
90          <input type="submit" name="submit" class="btn btn-primary btn-customform-submit pera1-editable col-sm-offset-3 col-sm-8">
91        </div>
92      </div>
93    </form>
94

投稿2018/11/16 02:18

総合スコア955

2018/11/16 02:20

悪魔のようなミスでした。ありがとうございました

2018/11/16 02:21

エディタの設定やフォントなどで全角スペースを文字として表示する方法もありますので、やっておくといいかもしれません。

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

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.48%

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

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

関連した質問

トップ CSS3に関する質問

input　type="text"で入力できる項目とできない項目があります。原因はなんでしょうか？

関連した質問

同じタグがついた質問を見る

運営からのお知らせ

【サポート業務のお知らせ】ゴールデンウィーク休業につき下記の日程で、お問い合わせ等のサポート業務をお休みいたします。 2024/04/27(土)~2024/04/29(月) 2024/05/03(金)〜2024/05/06(月) なお期間中もサポートへのお問い合わせは受け付けております。

【重要なお知らせ】いつもteratailをご利用いただきありがとうございます。現在、認証システムの修正により、一部のユーザーが強制的にログアウトされる可能性がございます。お手数おかけしますが、再度ログインを行なっていただきますよう宜しくお願いいたします。ご不便をおかけし申し訳ございません。

過去のお知らせを見る