因此,我正在上在线课程,该项目只是通过查看来创建一个重复页面。我的看起来一样,但是源代码不同。我想弄清楚我做错了与否。只要最终结果是相同的,我不认为只有一种处理方法,但是我最终还是想找到一份工作,我不确定是否有像“行业标准”那样将id视为该集团的白痴。我对此有任何想法。
矿井
<!DOCTYPE html>
<html>
<head>
<title>Register</title>
</head>
<body>
<h1>Register</h1>
<form>
<div>
<label for="First Name">First Name:</label>
<input id="First Name" type="text" placeholder="John" required>
<label for="Last Name">Last Name:</label>
<input id="Last Name" type="text" placeholder="Smith" required>
</div>
<div>
<label for="Male">Male:</label>
<input name="Gender" id="Male" type="radio" value="Male" required>
<label for="Female">Female:</label>
<input name="Gender" id="Female" type="radio" value="Female" required>
</div>
<div>
<label for="Email">Email:</label>
<input id="Email" type="Email" placeholder="Email" required>
<label id="Password">Password:</label>
<input id="Password" type="Password" minlength="5" maxlength="10" placeholder="Password" required>
</div>
<div>
<label for="Birthday">Birthday:</label>
<select id="Birthday">
<option value="">Month:</option>
<option value="January">January</option>
<option value="February">February</option>
<option value="March">March</option>
<option value="April">April</option>
<option value="May">May</option>
</select>
<select id="Birthday">
<option value="">Day:</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<select>
<option value="">Year</option>
<option value="1990">1990</option>
<option value="1991">1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
<option value="1994">1994</option>
</select>
</div>
<div>
I agree to the terms and conditions <input type="checkbox" required>
</div>
<div>
<button>Submit</button>
</div>
</form>
</body>
</html>
课程:
<!DOCTYPE html>
<html>
<head>
<title>Complete Form Solution</title>
</head>
<body>
<h1>Register</h1>
<form>
<div>
<label for="first-name">First Name:</label>
<input type="text" name="first-name" id="first-name" placeholder="John" required />
<label for="last-name">Last Name:</label>
<input type="text" name="last-name" id="last-name" placeholder="Smith" required />
</div>
<div>
<label for="radio-choice-1">Male</label>
<input type="radio" name="radio-choice" id="radio-choice-1" value="choice-1" />
<label for="radio-choice-2">Female</label>
<input type="radio" name="radio-choice" id="radio-choice-2" value="choice-2" />
<label for="radio-choice-3">Other</label>
<input type="radio" name="radio-choice" id="radio-choice-3" value="choice-3" />
</div>
<div>
<label for="email">Email:</label>
<input type="email" name="email" id="email" required placeholder="your email">
<label for="password">Password:</label>
<input type="password" name="password" id="password" pattern=".{5,10}" placeholder="your password" required title="5 to 10 characters">
</div>
<!-- WARNING! DANGER! CAUTION! -->
<!-- DATE PICKER CRAZINESS BELOW!!!! -->
<div>
<!-- Normally we'd have a label for each field, but since these 3 select drop downs go together, we'll just use one and make it match up to the first select field (month) -->
<label for="select-choice">Birthday:</label>
<select name="select-choice" id="select-choice">
<option value="0" selected disabled>Month</option>
<option value="january">Jan</option>
<option value="february">Feb</option>
<option value="march">Mar</option>
<option value="april">Apr</option>
<option value="may">May</option>
<option value="june">Jun</option>
<option value="july">Jul</option>
<option value="august">Aug</option>
<option value="september">Sep</option>
<option value="october">Oct</option>
<option value="november">Nov</option>
<option value="december">Dec</option>
</select>
<select name="birthday-day" id="day">
<option value="0" selected disabled>Day</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<select name="birthday-year" id="year">
<option value="0" selected disabled>Year</option>
<option value="2015">2015</option>
<option value="2014">2014</option>
<option value="2013">2013</option>
<option value="2012">2012</option>
<option value="2011">2011</option>
<option value="2010">2010</option>
<option value="2009">2009</option>
<option value="2008">2008</option>
<option value="2007">2007</option>
<option value="2006">2006</option>
<option value="2005">2005</option>
<option value="2004">2004</option>
<option value="2003">2003</option>
<option value="2002">2002</option>
<option value="2001">2001</option>
<option value="2000">2000</option>
<option value="1999">1999</option>
<option value="1998">1998</option>
<option value="1997">1997</option>
<option value="1996">1996</option>
<option value="1995">1995</option>
<option value="1994">1994</option>
<option value="1993">1993</option>
<option value="1992">1992</option>
<option value="1991">1991</option>
<option value="1990">1990</option>
<option value="1989">1989</option>
<option value="1988">1988</option>
<option value="1987">1987</option>
<option value="1986">1986</option>
<option value="1985">1985</option>
<option value="1984">1984</option>
<option value="1983">1983</option>
<option value="1982">1982</option>
<option value="1981">1981</option>
<option value="1980">1980</option>
<option value="1979">1979</option>
<option value="1978">1978</option>
<option value="1977">1977</option>
<option value="1976">1976</option>
<option value="1975">1975</option>
<option value="1974">1974</option>
<option value="1973">1973</option>
<option value="1972">1972</option>
<option value="1971">1971</option>
<option value="1970">1970</option>
<option value="1969">1969</option>
<option value="1968">1968</option>
<option value="1967">1967</option>
<option value="1966">1966</option>
<option value="1965">1965</option>
<option value="1964">1964</option>
<option value="1963">1963</option>
<option value="1962">1962</option>
<option value="1961">1961</option>
<option value="1960">1960</option>
<option value="1959">1959</option>
<option value="1958">1958</option>
<option value="1957">1957</option>
<option value="1956">1956</option>
<option value="1955">1955</option>
<option value="1954">1954</option>
<option value="1953">1953</option>
<option value="1952">1952</option>
<option value="1951">1951</option>
<option value="1950">1950</option>
<option value="1949">1949</option>
<option value="1948">1948</option>
<option value="1947">1947</option>
<option value="1946">1946</option>
<option value="1945">1945</option>
<option value="1944">1944</option>
<option value="1943">1943</option>
<option value="1942">1942</option>
<option value="1941">1941</option>
<option value="1940">1940</option>
<option value="1939">1939</option>
<option value="1938">1938</option>
<option value="1937">1937</option>
<option value="1936">1936</option>
<option value="1935">1935</option>
<option value="1934">1934</option>
<option value="1933">1933</option>
<option value="1932">1932</option>
<option value="1931">1931</option>
<option value="1930">1930</option>
<option value="1929">1929</option>
<option value="1928">1928</option>
<option value="1927">1927</option>
<option value="1926">1926</option>
<option value="1925">1925</option>
<option value="1924">1924</option>
<option value="1923">1923</option>
<option value="1922">1922</option>
<option value="1921">1921</option>
<option value="1920">1920</option>
<option value="1919">1919</option>
<option value="1918">1918</option>
<option value="1917">1917</option>
<option value="1916">1916</option>
<option value="1915">1915</option>
<option value="1914">1914</option>
<option value="1913">1913</option>
<option value="1912">1912</option>
<option value="1911">1911</option>
<option value="1910">1910</option>
<option value="1909">1909</option>
<option value="1908">1908</option>
<option value="1907">1907</option>
<option value="1906">1906</option>
<option value="1905">1905</option>
</select>
</div>
<div>
<label for="checkbox">I agree to the terms and conditions</label>
<input type="checkbox" name="checkbox" id="checkbox" />
</div>
<div>
<input type="submit" value="Submit" />
</div>
</form>
</body>
</html>
答案 0 :(得分:1)
您已经猜到,布局表单元素没有正确或错误的方法。您只需要确保<form></form>
标签将属于此表单的输入括起来,并且确保每个标签都与正确的输入相关联(例如,“ First Name”标签与第一个-名称输入)。
我建议进行两项更改:
ID不能包含空格。该课程示例使用小写字母(这是可选的,但为简化和一致性起见,建议使用小写字母),但更重要的是,对连字符(而不是空格)使用连字符。因此,用“名字”代替“名字”。您需要相应地修改输入中的ID和标签中的for
属性。
div
可以改为p
个元素。这主要是风格上的,但是p
元素确实具有div
中不存在的 some 语义值,并且HTML规范在很大程度上使用了p
所有形式的示例。