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>

正确的：

<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/

尝试使用标记验证程序和高级文本编辑器，它们会在代码中显示错误。

HTML元素对齐问题以及标签和输入

2 个答案: