freeCodeCamp 웹 디자인 – Registration Form

Responsive Web Design Certification – a Registration Form

<fieldset>
    <label for="first-name">Enter Your First Name: <input id="first-name" name="first-name" type="text" required /></label>
    <label for="last-name">Enter Your Last Name: <input id="last-name" name="last-name" type="text" required /></label>
    <label for="email">Enter Your Email: <input id="email" name="email" type="email" required /></label>
    <label for="new-password">Create a New Password: <input id="new-password" name="new-password" type="password" pattern="[a-z0-5]{8,}" required /></label>
</fieldset>

• action에 타겟 URL, method에 GET, POST 등의 HTTP 메서드
  • <form action='https://register-demo.freecodecamp.org' method="POST"></form>
• fieldset: form 내부에서 섹션을 나누기 위한 태그
• label: fieldset 내부에서 문항을 나누기 위한 태그
• label 태그에 for 속성, input 태그에 id 속성에 같은 텍스트를 넣어 결합
• input 타입의 태그에는 유니크한 name을 붙여 submit 된 값을 분류하는데 사용

<fieldset>
    <legend>Account type (required)</legend>
    <label for="personal-account"><input id="personal-account" type="radio" name="account-type" checked /> Personal</label>
    <label for="business-account"><input id="business-account" type="radio" name="account-type" /> Business</label></fieldset>

• name 속성으로 radio 버튼 결합
• legend 태그로 섹션(fieldset) 설명 문구 추가

<fieldset>
    <label for="profile-picture">Upload a profile picture: <input id="profile-picture" type="file" name="file" /></label>
    <label for="age">Input your age (years): <input id="age" type="number" name="age" min="13" max="120" /></label>
    <label for="referrer">How did you hear about us?
      <select id="referrer" name="referrer">
        <option value="">(select one)</option>
        <option value="1">freeCodeCamp News</option>
        <option value="2">freeCodeCamp YouTube Channel</option>
        <option value="3">freeCodeCamp Forum</option>
        <option value="4">Other</option>
      </select>
    </label>
    <label for="bio">Provide a bio:
          <textarea id="bio" name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
    </label>
</fieldset>

• option 선택으로 서버로 보낼 값은 value 속성에 명시

CSS

• selector
  • fieldset:last-of-type
  • input[type="submit"]

.inline {
  width: unset;
  margin: 0 0.5em 0 0;
  vertical-align: middle;
}

• unset resets a property to its inherited value if the property naturally inherits from its parent, and to its initial value if not