Q&A
分かりやすく、説明していただき、具体的にコードを書いていただきありがとうございました。
HTMLの<form>についての質問があります。
まず、私は下のようにコードをかきました。
HTML
1<head> 2 <meta charset ="utf-8"> 3 <title>pizza</title> 4 <style> 5 .feature { background-color:#eaeaea; 6 color: black; 7 font-family: Arial, sans-serif; 8 padding: 10px; } 9 label { float: left; 10 width: 100px; 11 clear: left; 12 text-align: right; 13 padding-right: 10px; 14 margin-top: 10px; } 15 input, textarea { margin-top: 10px; 16 display: block; } 17 #mySubmit { margin-left: 110px; } 18 </style> 19 </head>
HTML
1 2 <form class="feature"> 3 <label for="myName">*Name:</label> 4 <input type="text" name="name" value="your firstname and lastname"><br> 5 <label for="myEmail">*E-mail:</label> 6 <input type="text" name="email" ><br> 7 <label for="rating">Rating(1-10):</label> 8 <input type="range" name="mychoice" id="mychoice" min="1" max="10"><br> 9 <label for="comment">*Comments</label> 10 <textarea name="comment" id=comment2 cols="40" rowa="4"> </textarea><br> 11 <input type="checkbox" name="agreement" id="agreement" value="agreement">Agree the conditions<br> 12 <input type="submit" value="submit"> <input type="reset" value="Reset"> 13 </form>
そして、上のコードによって、下の写真のような入力画面をつくりました。
そして、この入力画面をなにも入力せずに提出した場合に、下の写真のように表示させたいのですが、
そのように設定するにはどのようにコードを書けるのでしょうか。
よろしくお願いいたします。
回答2件
0
もう少し調べたら下記のような記事（ドキュメント）が出てくると思います。
- [フォームデータの検証
](https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Data_form_validation)
投稿2019/04/12 05:17
総合スコア80850
0
ベストアンサー
JS、CSSを用いて独自で実装するか、
以下のようにrequired属性を追加することでブラウザによりデザインは異なりますが、できます。
<input type="text" name="name" value="your firstname and lastname" required>
投稿2019/04/12 05:16
総合スコア304
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/04/12 23:16
2019/04/13 01:35