HTML元素對齊問題和標籤和輸入

Question

民間： 我想的HTML演習，以建立在一個交友網站， https://www.coursera.org/learn/html-css-javascript/peer/biy2Z/dating-web-site-assessment

1）標籤「電子郵件」，「移動」和「地址」 「您的聯繫信息」與其對應的輸入元素不在同一行。造成這種情況的代碼中可能存在什麼問題？

2）在「與您聯繫的方法：電子郵件WhatsApp應用內聊天」中，「應用內聊天」放在第二行。

下面

是代碼：

fieldset { 
 
       background:lightyellow; 
 
       border:10px solid yellow; 
 
       margin-bottom:10px; 
 
       width:720px; 
 
      } 
 
    label { 
 
      width:180px; 
 
      display:inline-block; 
 
      text-align:right; 
 
      vertical-align:top; 
 
     } 
 
    .widthclass{ width:auto; } 
 

 
    .rangeLow, .rangeHigh{ 
 
      text-align:center; 
 
      width:40px; 
 
      display:inline-block; 
 
      vertical-align:top; 
 
      color:white; 
 
     } 
 

 
     .rangeLow{ background-color:red;} 
 
     .rangeHigh{background-color:blue;} 
 

 
    .textareaFormat{width:360px; height:50px;} 
 

 
    label:hover{font-size:20px} 
 
    input: hover{font-size:20px}

<FORM action="http://ihome.ust.hk/~rossiter/cgi- 
 

 
bin/show_everything.php " method="post" 
 

 
enctype="multipart/form-data" > 
 

 
<h1> 
 
Please Enter Your Details For Our Dating Websites! 
 
</h1> 
 

 
<fieldset> 
 
<legend> Your face </legend> 
 
<label for="yourimage"> Your image </label> 
 
<input type="file" id="yourimage" name="avatar" 
 

 
required> 
 
<br> 
 
<label for="imagePreview" > Image preview:</label><img 
 

 
src="" id="preview"> 
 
</fieldset> 
 

 

 
<fieldset> 
 
<legend> Your General Details </legend> 
 
<label for="tname"> Name: </label> 
 
<input type="text" id="tname" name="tname" 
 

 
placeholder="Your Full Name" required> 
 

 

 
<br> 
 
<label for="gender" > Gender: </label> 
 

 

 
<input type="radio" name="malegender" id="male" required 
 

 
> 
 
<label for="male" class=widthclass> Male </label> 
 

 
<input type="radio" name="femalegender" id="female" 
 

 
required> 
 
<label for="female" class=widthclass > Female </label> 
 

 

 
<br> 
 
<label for="age" >Age: </label> 
 
<input type="number" id="age" name="age" required> 
 

 

 
<br> 
 
<label for="birthday"> Date of birth: </label> <input 
 

 
type="date" name="birthday" id="birthday" required> 
 

 
<br> 
 
<label for="favoriteColor"> Favorite color: </label> 
 
<input type="color" name="color" id="color"> 
 

 
<br> 
 
<label for="whichCountry"> Which country: </label> 
 
    <select name="country"> 
 
    <option></option> 
 
    <option value="noSelection"> no selection </option> 
 
    <option value="u.s." > United States </option> 
 
    <option value="france"> France </option> 
 
    <option value="germany"> Germany </option> 
 
    <option value="england"> England </option> 
 
    <option value="china"> China </option> 
 
    <option value="japan"> Japan </option>    
 
    </select> 
 

 
</fieldset> 
 

 
<fieldset> 
 

 
<lengend>Your indicators</lengend> 
 
<br> 
 

 
<label for="height" > Height:</label> 
 
<div class="rangeLow"> Short </div> 
 

 
<input type="range" min="0" max="100" step="5" 
 

 
name="height id=height" > 
 
<div class="rangeHigh"> Tall </div> 
 

 

 

 
<br> 
 
<label for="salary" > Salary:</label> 
 
<div class="rangeLow"> Poor </div> 
 
<input type="range" min="0" max="100" step="5" 
 

 
name="height" id=salary" > 
 
<div class="rangeHigh"> Rich </div> 
 

 
</fieldset> 
 

 
<fieldset> 
 
<lengend>Your contact information</lengend> 
 

 
<br> 
 
<label for="email" > Email: <label> <input type="email" 
 

 
id="email" name="email" required> 
 

 
<br> 
 
<label for="mobile"> Mobile: </label> 
 
<input type="tel" id="mobile" name="mobile" > 
 

 
<br> 
 
<label for="address" > Address </label> 
 
<textarea rows="3" cols="60" id="address" 
 

 
name="address"class="textareaFormat"> 
 
</textarea> 
 
<br> 
 

 

 
<label for="contact_method"> Method to contact you: 
 

 
</label> 
 

 
<input type="checkbox" name="contactmethod" 
 

 
value="email" id="checkboxemail"> 
 
<label for="checkboxemail" class="widthclass"> Email 
 

 
</label> 
 

 

 
<input type="checkbox" name="contactmethod" 
 

 
value="Whatsapp" > 
 

 
<label for="checkboxwhatsapp" class="widthclass" > 
 

 
Whatsapp </label> 
 

 
<input type="checkbox" name="contactmethod" 
 

 
value="inappchat" > 
 

 
<label for="checkboxinappchat" class="widthclass" > 
 

 
In-app chat </label> 
 

 
</fieldset> 
 

 
<input type="submit" value=Submit" > 
 

 
</FORM> 
 

 
<script 
 

 
src="https://www.cse.ust.hk/~rossiter/dating_web_site.js 
 

 
"></script>

Answer 1

你做了錯誤的電子郵件不會關閉標籤標記，以便它是開放的，以文件結束作爲內聯塊：

錯誤：

<label for="email" > Email: <label> 

correct：

<label for="email" > Email: </label> 

Answer 2

您的代碼充滿了錯誤。

比如你有這樣的多標籤開口......

<label for="email" > Email: <label> <input type="email" 

id="email" name="email" required> 

<br> 
<label for="mobile"> Mobile: </label> 

...你不要在任何地方關閉它。

你也有這樣的事情：

<input type="range" min="0" max="100" step="5" 

name="height id=height" > <!-- it should be name="height" id="height" --> 

這裏是固定碼https://jsfiddle.net/3cxgb00g/

嘗試使用標記驗證器和先進的文本編輯器，它會顯示在你的代碼中的錯誤。