通过编写注册表单学习 HTML 表单 - Step 37

告诉我们发生了什么:
在此详细描述你的问题。
What’s the right thing to do? :sob:
你目前的代码

/* file: index.html */
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Registration Form</title>
  <link rel="stylesheet" href="styles.css" />
</head>
<body>
  <h1>Registration Form</h1>
  <p>Please fill out this form with the required information</p>
  <form action='https://register-demo.freecodecamp.org'>
    <fieldset>
      <label>Enter Your First Name: <input type="text" required /></label>
      <label>Enter Your Last Name: <input type="text" required /></label>
      <label>Enter Your Email: <input type="email" required /></label>
      <label>Create a New Password: <input type="password" pattern="[a-z0-5]{8,}" required /></label>
    </fieldset>
    <fieldset>
      <label><input type="radio" name="account-type" /> Personal Account</label>
      <label><input type="radio" name="account-type" /> Business Account</label>
      <label>
        <input type="checkbox" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
      </label>
    </fieldset>
    <fieldset>
      <label>Upload a profile picture: <input type="file" /></label>
      <label>Input your age (years): <input type="number" min="13" max="120" />
      </label>
      <label>How did you hear about us?
        <select>
          <option value="" first-name="0">(select one)</option>
          <option value="1"first-name="1">freeCodeCamp News</option>
          <option value="2"first-name="2">freeCodeCamp YouTube Channel</option>
          <option value="3"first-name="3">freeCodeCamp Forum</option>
          <option value="4"first-name="4">Other</option>
        </select>
      </label>
      <label>Provide a bio:
        <textarea rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
      </label>
    </fieldset>
    <input type="submit" value="Submit" />
  </form>
</body>
</html>
/* file: styles.css */
body {
width: 100%;
height: 100vh;
margin: 0;
background-color: #1b1b32;
color: #f5f6f7;
}

label {
display: block;
margin: 0.5rem 0;
}

  **你的浏览器信息:**

用户代理是: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.6 Safari/605.1.15

挑战: 通过编写注册表单学习 HTML 表单 - Step 37

挑战的链接:

给每个表单控件加个name属性以及属性值。

first-name=“0” 我试了这样写不对,我不知道怎么修改了? :sob:希望能得到您的帮助 :blush:

你应该这样写,就是给input控件添加一个name属性,属性的值最好是具有语义性或标识性的内容。
比如:我想准备一个用户登录页面,里面有两个输入框。第一个输入框是用来输入用户账号的,那么我就可以添加name属性以及属性值为userAccount,代表这是一个输入用户账号的输入框。第二个是一个密码输入框,添加name属性以及属性值为password,代表这是一个密码输入框。

<input type="text" name="userAccount" />
<input type="password" name="password" />

值得注意的是type="radio"单选按钮,可以通过把两个及其以上name属性值设置成一致,从而将其划分成一组并具有关联性。

<label for="man">男</label>
<input type="radio" id=“man” name="sex" value="man">
<label for="woman">女</label>
<input type="radio" id=“woman” name="sex" value="woman">
2 Likes

太感谢您了,您将的很详细,我看一下,按照您的方法尝试一下 谢谢您 :heart:

我试着理解您的逻辑,但是我没有尝试成功 :sob:

题干要求是给区域内的表单控件添加name属性,所以可能你漏了一些表单控件,select以及textarea也属于表单控件,也就是说select标签跟textarea也需要添加name属性。

<select name="select"></select>
<textarea name="textarea"></textarea>
1 Like

成功了 谢谢您呀 哈哈 原来是这样 :blush: :sparkling_heart: :heartpulse: :heartbeat: :revolving_hearts: :two_hearts: :heart_decoration: :boom: