Q&A
連投失礼いたします。
こちら回答中に解決されたようで失礼いたしました。
回答を削除できそうでしたら、後ほど削除させていただきます。
どうぞ宜しくお願いいたします。
HTMLの<form>の表示についての質問です。
私は下のコードを書きました。
HTML
1<!DOCTYPE html> 2 <html lang="es"> 3 <head> 4 <meta charset ="utf-8"> 5 <title>pizza</title> 6 <style> 7 .feature { background-color:#eaeaea; 8 color: black; 9 font-family: Arial, sans-serif; 10 padding: 10px; } 11 label { float: left; 12 width: 100px; 13 clear: left; 14 text-align: right; 15 padding-right: 10px; 16 margin-top: 10px; } 17 input, textarea { margin-top: 10px; 18 display: block; } 19 #mySubmit { margin-left: 110px; } 20 </style> 21 </head> 22 <body> 23 <h2>Place a pizza order</h2> 24 <p>You can ring as on 9899 9999 or pick up at 2121 Toorak Road, South Yarra or simply place an order via our online booking form. What could be easier?</p> 25 <form> 26 name:<input type="text" name="name"> 27 28 Phone:<input type="tel" maxlength="10" > 29 <br> 30 size: 31 <br> 32 <input type="radio" name="length" id="length1" value="Family">Family<br> 33 <input type="radio" name="length" id="length2" value="Large">Lange<br> 34 <input type="radio" name="length" id="length3" value="Small">Small<br> 35 How many?<input type="number" size="4"> 36 <br> 37 Type?<br> 38 <select name="type"> 39 <option value="salmon">Smoked Salmon</option> 40 <option value="Pesto">Pesto</option> 41 <option value="tropical">Tropical</option> 42 <option value="mexican">Mexican</option> 43 </select> 44 <input type="radio" name="receive" id="recieve1" value="pickup">Pick up<br> 45 <input type="radio" name="receive" id="receive2" value="deliver">Deliver<br> 46 <b>Dlivery Inf</b><br> 47 Delivery Time 48 <select name="time"> 49 <option value="6.00pm">6.00pm</option> 50 <option value="7.oopm">7.00pm</option> 51 <option value="8.00pm">8.00pm</option> 52 <option value="9.oopm">9.00pm</option> 53 <option value="10.oopm">10.00pm</option> 54 <option value="11.00pm">11.00pm</option> 55 <option value="midnight">midnight</option> 56 </select> 57 <br><i>Please allow 30 minites delivery</i><br> 58 <textarea name="comment" id="comment" cols="40" rows="5">Please tell us your adress or any additional requests. </textarea> 59 <br>Do you want to receive special offers in the mail? 60 <input type="checkbox" name="special_offer" id="special_offer" value="special_offer"> 61 <br> 62 <input type="submit" value="Submit Order"> <input type="submit" value="Reset Order"> 63 </form> 64 <h1><b>Your Comments on Our Business</b></h1> 65 <p>Required fields are marked with an asterisk*</p> 66 <form class="feature"> 67 <label for="myName">*Name:</label> 68 <input type="text" name="name" placeholder="your first and last name" required><br> 69 <label for="myEmail">*E-mail:</label> 70 <input type="text" name="email" placeholder="your@yourdomain.com" required ><br> 71 <label for="rating">Rating(1-10):</label> 72 <input type="range" name="mychoice" id="mychoice" min="1" max="10" required><br> 73 <label for="comment">*Comments</label> 74 <textarea name="comment" id=comment2 cols="40" rowa="4" required> </textarea><br> 75 <input type="checkbox" name="agreement" id="agreement" value="agreement" required >Agree the conditions<br> 76 <input type="submit" value="submit"> <input type="reset" value="Reset" required> 77 </form> 78 </body> 79
このコードを実行すると下のようになります。
私のコードでは上のように入力フォームが指示文の下にくるようになってしまいます。
どうすれば指示文の横に入力ホームを表示させることができるのしょうか。
よろしくおねがいします。
回答2件
0
ベストアンサー
input, textareaのdisplayの指定がblockになっているからだと思います。
ブロック要素なので単純に横並びにはなりません。
ひとまずdisplayの指定をなしにしてみては。
投稿2019/04/19 06:45
総合スコア80850
0
見た目のレイアウトを整えるには、CSS(スタイルシート)で設定します。
以下のコードではいかがでしょうか？
HTML
1 <form> 2 <div class="box"> 3 <div class="name">name:</div> 4 <div class="detail"><input type="text" name="name"></div> 5 </div> 6 7 <div class="box"> 8 <div class="name">Phone:</div> 9 <div class="detail"><input type="tel" maxlength="10" ></div> 10 </div> 11 12 <div class="box"> 13 <div class="name">size:</div> 14 <div class="detail"> 15 <input type="radio" name="length" id="length1" value="Family">Family<br> 16 <input type="radio" name="length" id="length2" value="Large">Lange<br> 17 <input type="radio" name="length" id="length3" value="Small">Small<br> 18 </div> 19 </div> 20 21 <div class="box"> 22 <div class="name">How many?</div> 23 <div class="detail"><input type="number" size="4"></div> 24 </div> 25 26 <div class="box"> 27 <div class="name">Type?</div> 28 <div class="detail"> 29 <select name="type"> 30 <option value="salmon">Smoked Salmon</option> 31 <option value="Pesto">Pesto</option> 32 <option value="tropical">Tropical</option> 33 <option value="mexican">Mexican</option> 34 </select> 35 <input type="radio" name="receive" id="recieve1" value="pickup">Pick up 36 <input type="radio" name="receive" id="receive2" value="deliver">Deliver 37 </div> 38 </div> 39 40 <div class="box"> 41 <div class="name"><b>Dlivery Inf</b><br>Delivery Time</div> 42 <div class="detail"> 43 <select name="time"> 44 <option value="6.00pm">6.00pm</option> 45 <option value="7.oopm">7.00pm</option> 46 <option value="8.00pm">8.00pm</option> 47 <option value="9.oopm">9.00pm</option> 48 <option value="10.oopm">10.00pm</option> 49 <option value="11.00pm">11.00pm</option> 50 <option value="midnight">midnight</option> 51 </select> 52 </div> 53 </div> 54 55 <div class="box"> 56 <div class="name">How many?</div> 57 <div class="detail"><input type="number" size="4"></div> 58 </div> 59 60 <div class="box"> 61 <div class="name"><i>Please allow 30 minites delivery</i></div> 62 <div class="detail"><textarea name="comment" id="comment" cols="40" rows="5">Please tell us your adress or any additional requests. </textarea></div> 63 </div> 64 65 <div class="Confirmation"> 66 <div class="inner">Do you want to receive special offers in the mail? <input type="checkbox" name="special_offer" id="special_offer" value="special_offer"></div> 67 </div> 68 69 <input type="submit" value="Submit Order"> <input type="submit" value="Reset Order"> 70 71 </form>
CSS
1form .box { 2 display: flex; 3} 4form input[type="text"] { 5 margin-top: 0; 6} 7.box { 8 padding-bottom: 30px; 9} 10form .name { 11 width: 280px; 12} 13form .detail { 14 width: calc(100% - 280px); 15} 16form .Confirmation input { 17 display: inline-block; 18}
まずHTMLは、formタグの中をdivタグでまとめました。
コードを簡潔にするもよいですが、レイアウトを整えるにはある程度タグで見やすくまとめることも大切です。
次にdivタグに付与したclassに対してCSSを書きます。
横並びにしているのは、一番上の
CSS
1form .box { 2 display: flex; 3}
の部分です。
少し見やすく横幅や余白を入れましたが、こちらは必要に応じて調整ください。
サンプルコード（codepen）
数日保存しておくので、お時間ありましたら合わせてご確認ください。
投稿2019/04/19 07:15
総合スコア281
削除ポリシー的に削除されないと思いますよ。
【投稿の削除ポリシー｜teratail（テラテイル）】
https://teratail.com/help/delete-policy
私も確認したのですが、やはり難しそうですよね。
使用し始めたばかりで勝手が分からず…ご丁寧に教えてくださり誠にありがとうございます。
大変恐縮ですが、回答はこのままにさせていただきます。
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/04/19 06:51
2019/04/19 06:55
2019/04/19 06:57