textareaのフォーム内のplaceholderの文字が表示されないです。

実現したいこと
入力フォームのテキストエリアのフォームの中の

該当箇所はphpコードの下の方にある

<textarea name="question" class="question" id="question" cols="40" rows="10"　placeholder="20文字以内にして下ください。"> のコードなのですが、入力フォームに薄い文字が表示されなくて困っています。コードはあっていると思うのですが、原因が分からずにいます。一応ｃｓｓのコードもすべて記載しています。 **付属画像のように文字がありません。２０文字に変更しています。** ![イメージ説明](a87663e638ffd4bc61049abade4cb554.png) ```php <?php session_start(); $errors = array(); if(isset($_POST['submit'])) { $plan = $_POST['plan']; $plan2 = $_POST['plan2']; $name = $_POST['name']; $furigana = $_POST['furigana']; $tel = $_POST['tel']; $email = $_POST['email']; $emailss = $_POST['emailss']; $question = $_POST['question']; if($plan === "") { $errors['plan'] ="お問い合わせ内容を選択して下さい。 "; } if($plan2 === "") { $errors['plan2'] =" 業種の選択するを選択して下さい。 "; } if($name === "") { $errors['name'] ="名前が入力されていません。 "; } if($furigana === "") { $errors['furigana'] ="フリガナが入力されていません。 "; } if($tel === "") { $errors['tel'] ="電話番号が入力されていません。 "; } if($email === "") { $errors['email'] ="メールアドレスが入力されていません。 "; } if($emailss === "") { $errors['emailss'] ="メールアドレス（確認用）が入力されていません。 "; } if($question === "") { $errors['question'] ="お問い合わせ内容入力（20文字以内）が入力されていません。 "; } if(count($errors) === 0) { $_SESSION['plan'] = $plan; $_SESSION['plan2'] = $plan2; $_SESSION['name'] = $name; $_SESSION['furigana'] = $furigana; $_SESSION['tel'] = $tel; $_SESSION['email'] = $email; $_SESSION['emailss'] = $emailss; $_SESSION['question'] = $question; /* 確認画面の表示， */ header('Location:http://▽▽▽'); exit(); } } if(isset($_GET['action']) && $_GET['action'] === 'edit'){ $plan = $_SESSION['plan']; $plan2 = $_SESSION['plan2']; $name = $_SESSION['name']; $furigana = $_SESSION['furigana']; $tel = $_SESSION['tel']; $email = $_SESSION['email']; $emailss = $_SESSION['emailss']; $question = $_SESSION['question']; } ?> <!DOCTYPE html> <html lang="ja"> <head> <meta content="text/html; charset=utf-8" /> <title></title> <link rel="stylesheet" href="companyhp6form1.css"> <style type="text/css"> /* 入力フォームの位置 */ .auto-style1 { text-align: center; } /* セレクトボックスの位置 */ .auto-style2 { text-align: center; /* セレクトボックス中央に配置 */ margin-top: 30px; } </style> <?php echo "<ul>";foreach($errors as $value) { echo "<li>"; echo $value; echo "</li>"; } echo "</ul>"; ?> </head> <body>

<form action="companyhp6form1.php" method="post">

    <div class="auto-style2">

        <p class="tel-titile14">
            お問い合わせ内容を選択する：※
        </p>



        <span class="selectbox">
            <select id="plan" class="plan" name="plan">
                <option value="">お問い合わせ内容選択</option>
               <option value="事業内容について" <?php if(isset($plan) && $plan==="事業内容について" ) { echo "selected" ;} ?>>事業内容について
                </option>
                <option value="サポートについて" <?php if(isset($plan) && $plan==="サポートについて" ) { echo "selected" ;} ?>
                    >サポートについて</option>
                <option value="その他弊社にお問い合わせ" <?php if(isset($plan) && $plan==="その他弊社にお問い合わせ" ) { echo "selected" ;} ?>>その他弊社にお問い合わせ
                </option>
               
            </select>
        </span>
    </div>



    <div class="auto-style2">

        <p class="tel-titile15">
            業種を選択する：※
        </p>



        <span class="selectbox">
            <select id="plan2" class="plan2" name="plan2">
                <option value="">業種の選択</option>
                <option value="法人のお客様" <?php if(isset($plan2) && $plan2==="法人のお客様" ) { echo "selected" ;} ?>>法人のお客様
                </option>
                <option value="個人のお客様" <?php if(isset($plan2) && $plan2==="個人のお客様" ) { echo "selected" ;} ?>
                    >個人のお客様</option>
                
               
            </select>
        </span>
    </div>

    <div class="auto-style1">

        <p class="tel-titile">
            名前：※
        </p>
        <input type="text" class="name" name="name" id="name" value="<?php if(isset($name)){ echo $name; } ?>" />
    </div>
    <div class="auto-style1">

        <p class="tel-titile">
            フリガナ：※
        </p>
        <input type="text" class="furigana" name="furigana" id="furigana"
            value="<?php if(isset($furigana)){ echo $furigana; } ?>" />

    </div>

    <div class="auto-style1">

        <p class="tel-titile">
            電話番号：※
        </p>
        <input type="text" class="tel" name="tel" id="tel" value="<?php if(isset($tel)){ echo $tel; } ?>" />
    </div>
    <div class="auto-style1">

        <p class="tel-titile">
            メールアドレス：※
        </p>

        <input type="text" class="email" name="email" id="email"
            value="<?php if(isset($email)){ echo $email; } ?>" />

    </div>
    <div class="auto-style1">


    <p class="tel-titile">
        メールアドレス（確認用）：※
    </p>

    <input type="text" class="emailss" name="emailss" id="emailss"
        value="<?php if(isset($emailss)){ echo $emailss; } ?>" />

    </div>

        
    <div class="auto-style1">
        <p class="tel-titile">
            お問い合わせ内容入力（150文字）：
        </p>
            <textarea name="question" class="question" id="question" cols="40" rows="10"　placeholder="20文字以内にして下ください。">
                <?php if(isset($question)){ echo $question; } ?></textarea>
            </div>
        

    <div class="auto-style1">

        <button type="submit" id="submit" name="submit" class="auto-style4">
           送信</button>
    </div>
   
</form>

</body> </html> ```

css
1
2
3
4/* セレクトボックスのデザイン1 */
5#plan{
6vertical-align: middle;
7box-sizing: border-box;
8border: 2px solid #4e4e4e;  /* 枠線 */
9background-color: snow;  /* 背景色 */
10width: 27.1em;             /* 横幅 */
11height: 53px;           /* 高さ */
12font-size: 1.0em;          /* テキスト内の表示文字サイズ */
13color: #000000;
14line-height: 1.2;  /* 行の高さ */
15
16}
17
18
19
20
21
22
23#plan2{
24  vertical-align: middle;
25  box-sizing: border-box;
26  border: 2px solid #4e4e4e;  /* 枠線 */
27  background-color: snow;  /* 背景色 */
28  width: 27.1em;             /* 横幅 */
29  height: 53px;           /* 高さ */
30  font-size: 1.0em;          /* テキスト内の表示文字サイズ */
31  color: #000000;
32  line-height: 1.2;  /* 行の高さ */
33  margin-bottom: 20px;/* フォームの縦位置調節のため */
34  }
35  
36
37
38/* 入力フォームのスタイル */   
39
40
41#name {
42  
43  border: 2px solid #4e4e4e;  /* 枠線 */
44  padding: 0.5em;          /* 内側の余白量 */
45  background-color: snow;  /* 背景色 */
46  width: 25.5em;             /* 横幅 */
47  height: 30px;           /* 高さ */
48  font-size: 1em;          /* テキスト内の表示文字サイズ */
49  line-height: 1.2;         /* 行の高さ */
50
51}
52
53#furigana {
54  
55  border: 2px solid #4e4e4e;  /* 枠線 */
56  padding: 0.5em;          /* 内側の余白量 */
57  background-color: snow;  /* 背景色 */
58  width: 25.5em;             /* 横幅 */
59  height: 30px;           /* 高さ */
60  font-size: 1em;          /* テキスト内の表示文字サイズ */
61  line-height: 1.2;        /* 行の高さ */
62  
63}
64
65#tel {
66  
67  border: 2px solid #4e4e4e;  /* 枠線 */
68  padding: 0.5em;          /* 内側の余白量 */
69  background-color: snow;  /* 背景色 */
70  width: 25.5em;             /* 横幅 */
71  height: 30px;           /* 高さ */
72  font-size: 1em;          /* テキスト内の表示文字サイズ */
73  line-height: 1.2;        /* 行の高さ */
74}
75
76#email {
77  
78  border: 2px solid #4e4e4e;  /* 枠線 */
79  padding: 0.5em;          /* 内側の余白量 */
80  background-color: snow;  /* 背景色 */
81  width: 25.5em;             /* 横幅 */
82  height: 30px;           /* 高さ */
83  font-size: 1em;          /* テキスト内の表示文字サイズ */
84  line-height: 1.2;        /* 行の高さ */
85}
86
87#emailss{
88
89  
90  border: 2px solid #4e4e4e;  /* 枠線 */
91  padding: 0.5em;          /* 内側の余白量 */
92  background-color: snow;  /* 背景色 */
93  width: 25.5em;             /* 横幅 */
94  height: 30px;           /* 高さ */
95  font-size: 1em;          /* テキスト内の表示文字サイズ */
96  line-height: 1.2;        /* 行の高さ */
97}
98
99#question {
100  
101  border: 2px solid #4e4e4e;  /* 枠線 */
102  padding: 0.5em;          /* 内側の余白量 */
103  background-color: snow;  /* 背景色 */
104  width: 31.6em;             /* 横幅 */
105  height: 170px;           /* 高さ */
106  font-size: 1em;          /* テキスト内の表示文字サイズ */
107  line-height: 1.2;         /* 行の高さ */
108margin-top: 25px; /* フォームの縦位置調節のため */
109}
110
111
112
113/* 入力フォームとフォーム間の上下の余白， */
114
115
116
117input.question{margin:21px 0px;}
118input.name{margin:21px 0px;}
119input.furigana{margin:21px 0px;}
120input.tel{margin:21px 0px;}
121input.email{margin:21px 0px;}
122input.emailss{margin:21px 0px;}
123
124
125
126
127
128/* pxで指定 入力フォーム、セレクトボックスの上の文字タイトルの行間の大きさ、文字サイズ、太さ*/
129.tel-titile{
130  line-height: 0px;/* 文字の行間 */
131  font-size: 22px;/* 文字の大さ */
132  font-weight: 900;/* 文字の太さ */
133  text-align: center;/* 文字を中央に配置 */
134  color: #4e4e4e;
135}
136
137.tel-titile14{
138
139 
140  font-size: 22px;/* 文字の大さ */
141  font-weight: 900;/* 文字の太さ */
142  text-align: center;/* 文字を中央に配置 */
143  color: #4e4e4e;
144  vertical-align: 17px;
145  display: inline-block;
146  width: 100%;
147text-align: center;
148}
149
150
151
152
153.tel-titile15{
154
155  
156  font-size: 22px;
157  font-weight: 900;
158  text-align: center;
159 
160  vertical-align: 10px;
161  display: inline-block;
162  width: 100%;
163text-align: center;
164}
165

ドラッグしたフォームの画像
このドラッグして消すと何故か文字が表示される。

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

回答1件

ベストアンサー

全角空白が入っています。

HTML
1<!--                                                                全角空白 ↓ -->
2<textarea name="question" class="question" id="question" cols="40" rows="10"　placeholder="20文字以内にして下ください。">

投稿2021/08/14 03:12

kei344

総合スコア69606

gujhufiugho

2021/08/14 04:38

回答ありがとうございます。 <textarea name="question" class="question" id="question" cols="40" rows="10"　placeholder="20文字以内にして下ください。">　placeholder="20文字以内にして下ください。"> 空白を消しても表示されないです。半角にしても表示されません。ただ、空白で何も書いていない入力フォームにマウスで何文字か、何故かドラックできて、それをドラッグして、消去すると、placeholderの文字がちゃんと表示されます。原因はなんでしょうか？

gujhufiugho

2021/08/14 04:42

ドラッグした画像を追加しました。