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

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

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Q&A

解決済

1回答

393閲覧

お問い合わせフォームのメールアドレスの入力欄が表示されない

Toshihisa

総合スコア3

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

0グッド

0クリップ

投稿2022/08/27 01:17

前提

HTML/CSSで「お問い合わせフォーム」を作っています。
「お名前」「メールアドレス」「メッセージ」の入力欄を作成したのですが、「メールアドレス」の入力欄が表示されずに困っています。

実現したいこと

ここに実現したいことを箇条書きで書いてください。
-「メールアドレス」の入力欄を表示させたい。

発生している問題・エラーメッセージ

現在、「メールアドレス」の入力欄が表示されません。
イメージ説明

該当のソースコード

contact.html

1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 <title>WCB Cafe - CONTACT</title> 7 <meta name="description" content="ブレンドコーヒーとヘルシーなオーガニックフードを提供するカフェ"> 8 9 <!-- CSS --> 10 <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css"> 11 <link href="https://fonts.googleapis.com/css?family=Philosopher" rel="stylesheet"> 12 <link href="css/style.css" rel="stylesheet"> 13 <link rel="icon" type="image/png" href="img/favicon.png"> 14 </head> 15 16 <body> 17 <div id="contact" class="big-bg"> 18 <header class="page-header wrapper"> 19 <h1><a href="index.html"><img class="logo" src="img/logo.svg" alt="WCBカフェ ホーム"></a></h1> 20 <nav> 21 <ul class="main-nav"> 22 <li><a href="news.html">News</a></li> 23 <li><a href="menu.html">Menu</a></li> 24 <li><a href="contact.html">Contact</a></li> 25 </ul> 26 </nav> 27 </header> 28 <div class="wrapper"> 29 <h2 class="page-title">Contact</h2> 30 <form action="#"> 31 <div> 32 <label for="name">お名前</label> 33 <input type="text" id="name" name="your-name"> 34 </div> 35 36 <div> 37 <label for="email">メールアドレス</label> 38 </div> 39 40 <div> 41 <label for="message">メッセージ</label> 42 <textarea id="message" name="your-message"></textarea> 43 </div> 44 45 <input type="submit" class="button" value="送信"> 46 </form> 47 </div><!-- /.wrapper --> 48 </div> 49 50 51 52 <footer> 53 <div class="wrapper"> 54 <p><small>&copy; 2019 Manabox</small></p> 55 </div> 56 </footer> 57 </body> 58</html>

style.css

1@charset "UTF-8"; 2 3/* 共通部分 */ 4 5html { 6 font-size: 100%; 7} 8 9body { 10 font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", sans-serif; 11 line-height: 1.7; 12 color: #432; 13} 14 15a { 16 text-decoration: none; 17} 18 19img { 20 max-width: 100%; 21} 22 23/* HEADER */ 24 25.logo { 26 width: 210px; 27 margin-top: 14px; 28} 29 30.main-nav { 31 display: flex; 32 font-size: 1.25rem; 33 text-transform: uppercase; 34 margin-top: 34px; 35 list-style: none; 36} 37 38.main-nav li { 39 margin-left: 36px; 40} 41 42.main-nav a { 43 color: #432; 44} 45 46.main-nav a:hover { 47 color: #0bd; 48} 49 50.page-header { 51 display: flex; 52 justify-content: space-between; 53} 54 55.wrapper { 56 max-width: 1100px; 57 margin: 0 auto; 58 padding: 0 4%; 59} 60 61/* HOME */ 62 63.home-content { 64 text-align: center; 65 margin-top: 10%; 66} 67 68.home-content p { 69 font-size: 1.125rem; 70 margin: 10px 0 42px; 71} 72 73/* 見出し */ 74 75.page-title { 76 font-size: 5rem; 77 font-family: 'Philosopher', serif; 78 text-transform: uppercase; 79 font-weight: normal; 80} 81 82/* ボタン */ 83 84.button { 85 font-size: 1.375rem; 86 background: #0bd; 87 color: #fff; 88 border-radius: 5px; 89 padding: 18px 32px; 90} 91 92.button:hover { 93 background: #0090aa; 94} 95 96/* 大きな背景画像 */ 97.big-bg { 98 background-size: cover; 99 background-position: center top; 100} 101 102#home { 103 background-image: url(../img/main-bg.jpg); 104 min-height: 100vh; 105} 106 107#home .page-title { 108 text-transform: none; 109} 110 111/* NEWS */ 112 113#news { 114 background-image: url(../img/news-bg.jpg); 115 height: 270px; 116 margin-bottom: 40px; 117} 118 119#news .page-title { 120 text-align: center; 121} 122 123/* フッター */ 124 125footer { 126 background: #432; 127 text-align: center; 128 padding: 26px 0; 129} 130 131footer p { 132 color: #fff; 133 font-size: 0.875rem; 134} 135 136/* 記事部分 */ 137article { 138 /*width: 74%;*/ 139 width: 60%; 140 order: 2; 141} 142 143/* サイドバー */ 144aside { 145 width: 22%; 146 order: 3; 147} 148 149.ad { 150 order: 1; 151} 152 153.news-contents { 154 display: flex; 155 justify-content: space-between; 156 margin-bottom: 50px; 157} 158 159.post-info { 160 position: relative; 161 padding-top: 4px; 162 margin-bottom: 40px; 163} 164 165.post-date { 166 background: #0bd; 167 border-radius: 50%; 168 color: #fff; 169 width: 100px; 170 height: 100px; 171 font-size: 1.625rem; 172 text-align: center; 173 position: absolute; 174 top: 0; 175 padding-top: 10px; 176} 177 178.post-date span { 179 font-size: 1rem; 180 border-top: 1px rgba(255,255,255,.5) solid; 181 padding-top: 6px; 182 display: block; 183 width: 60%; 184 margin: 0 auto; 185} 186 187.post-title { 188 font-family: "Yu Mincho", "YuMincho", serif; 189 font-size: 2rem; 190 font-weight: normal; 191} 192 193.post-title, 194.post-cat { 195 margin-left: 120px; 196} 197 198article img { 199 margin-bottom: 20px; 200} 201 202article p { 203 margin-bottom: 1rem; 204} 205 206.sub-title { 207 font-size: 1.375rem; 208 padding: 0 8px 8px; 209 border-bottom: 2px #0bd solid; 210 font-weight: normal; 211} 212 213aside p { 214 padding: 12px 10px; 215} 216 217.sub-menu { 218 margin-bottom: 60px; 219 list-style: none; 220} 221 222.sub-menu li { 223 border-bottom: 1px #ddd solid; 224} 225 226.sub-menu a { 227 color: #432; 228 padding: 10px; 229 display: block; 230} 231 232.sub-menu a:hover { 233 color: #0bd; 234} 235 236/* MENU */ 237 238#menu { 239 background-image: url(../img/menu-bg.jpg); 240 min-height: 100vh; 241} 242 243.menu-content { 244 max-width: 560px; 245 margin-top: 10%; 246} 247 248.menu-content .page-title { 249 text-align: center; 250} 251 252.menu-content p { 253 font-size: 1.125rem; 254 margin: 10px 0 0; 255} 256 257.grid { 258 display: grid; 259 gap: 26px; 260 grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); 261 margin-top: 6%; 262 margin-bottom: 50px; 263} 264 265.big-box { 266 grid-column: 1 / 3; 267 grid-row: 1 / 3; 268} 269 270.big-box img { 271 height: 94%; 272 width: 100%; 273 object-fit: cover; 274} 275 276/* CONTACT */ 277#contact { 278 background-image: url(../img/contact-bg.jpg); 279 min-height: 100vh; 280} 281 282/* フォーム */ 283form div { 284 margin-bottom: 14px; 285} 286 287label { 288 font-size: 1.125rem; 289 margin-bottom: 10px; 290 display: block; 291} 292 293input[type="text"], 294input[type="email"], 295textarea { 296 background: rgba(255,255,255,.5); 297 border: 1px #fff solid; 298 border-radius: 5px; 299 padding: 10px; 300 font-size: 1rem; 301} 302input[type="text"], 303input[type="email"] { 304 width: 100%; 305 max-width: 240px; 306} 307textarea { 308 width: 100%; 309 max-width: 480px; 310 height: 6rem; 311} 312input[type="submit"] { 313 border: none; 314 cursor: pointer; 315 line-height: 1; 316} 317 318/* モバイル版 */ 319 320@media (max-width: 600px) { 321 .page-title { 322 font-size: 2.5rem; 323 } 324 325 .page-header { 326 flex-direction: column; 327 align-items: center; 328 } 329 330 /* HEADER */ 331 .main-nav { 332 font-size: 1rem; 333 margin-top: 10px; 334 } 335 .main-nav li { 336 margin: 0 20px; 337 } 338 339 /* HOME */ 340 .home-content { 341 margin-top: 20%; 342 } 343 344 /* NEWS */ 345 .news-contents { 346 flex-direction: column; 347 } 348 article, 349 aside { 350 width: 100%; 351 } 352 353 #news .page-title { 354 margin-top: 30px; 355 } 356 357 aside { 358 margin-top: 60px; 359 } 360 361 .post-info { 362 margin-bottom: 30px; 363 } 364 365 .post-date { 366 width: 70px; 367 height: 70px; 368 font-size: 1rem; 369 } 370 371 .post-date span { 372 font-size: 0.875rem; 373 padding-top: 2px; 374 } 375 376 .post-title { 377 font-size: 1.375rem; 378 } 379 380 .post-cat { 381 font-size: 0.875rem; 382 margin-top: 10px; 383 } 384 .post-title, 385 .post-cat { 386 margin-left: 80px; 387 } 388 389 .ad { 390 display: none; 391 } 392 393 /* MENU */ 394 .menu-content { 395 margin-top: 20%; 396 } 397 398 .big-box { 399 grid-column: auto; 400 grid-row: auto; 401 } 402 403 .big-box img { 404 height: auto; 405 } 406 407 /*CONTACT*/ 408 #contact .page-title { 409 margin-top: 40px; 410 } 411 412 /*フォーム*/ 413 input[type="text"], 414 input[type="email"], 415 textarea { 416 max-width: 100%; 417 } 418}

試したこと

Google検索、タイプミスチェック

補足情報(FW/ツールのバージョンなど)

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

HTMLに入力欄(input type="text")がありません。
追加してください。

html

1 <label for="email">メールアドレス</label> 2 <input type="text" id="mail" name="mail-address">

投稿2022/08/27 01:34

編集2022/08/27 01:35
hatena19

総合スコア33620

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Toshihisa

2022/08/27 01:37

ありがとうございます!! 無事、表示されました!!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問