freeCodeCamp/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-forms-by-buildin.../60f81167d0d4910809f88945.md

1.8 KiB
Raw Blame History

id title challengeType dashedName
60f81167d0d4910809f88945 步驟 17 0 step-17

--description--

距離父級 form 元素最近的第一個 typesubmitinput 元素會被當作提交按鈕。

爲了處理表單提交,在最後 fieldset 元素後添加一個 input 元素,其 type 屬性設置爲 submitvalue 屬性設置爲 Submit

--hints--

應該將 input 元素添加到最後一個 fieldset 元素後。

assert.exists(document.querySelectorAll('fieldset')?.[2]?.nextElementSibling?.tagName, 'input');

inputtype 屬性值應該爲 submit

assert.exists(document.querySelector('fieldset + input[type="submit"]'));

input 元素的 value 屬性值應該爲 Submit

assert.exists(document.querySelector('fieldset + input[value="Submit"]'));

--seed--

--seed-contents--

<!DOCTYPE html>
<html>
  <head>
    <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'>
--fcc-editable-region--
      <fieldset>
        <label>Enter Your First Name: <input type="text" /></label>
        <label>Enter Your Last Name: <input type="text" /></label>
        <label>Enter Your Email: <input type="email" /></label>
        <label>Create a New Password: <input type="password" /></label>
      </fieldset>
      <fieldset></fieldset>
      <fieldset></fieldset>

--fcc-editable-region--
    </form>
  </body>
</html>
body {
  width: 100%;
  height: 100vh;
  margin: 0;
  background-color: #1b1b32;
    color: #f5f6f7;
}

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