요약 - 폼 #2
Coddy HTML 여정의 Fundamentals 섹션에 포함된 레슨 — 60개 중 47번째.
챌린지
쉬움아래 그림과 같은 간단한 회원가입 양식을 만들어 봅시다!
포함해야 할 내용은 다음과 같습니다:
- 모든 요소를 하나로 묶어줄
<form>태그. - 레이블과 텍스트 입력창이 있는 Username 필드. 레이블은
"Username:"이라고 표시하고 for="username"을 사용해야 합니다. 입력창은id="username",name="username",type="text", 그리고 placeholder"Enter your username"을 가져야 합니다. - 레이블과 이메일 입력창이 있는 Email 필드. 레이블은
"Email:"이라고 표시하고for="email"을 사용해야 합니다. 입력창은id="email",name="email",type="email", 그리고 placeholder"Enter your email"을 가져야 합니다. - 레이블과 비밀번호 입력창이 있는 Password 필드. 레이블은
"Password:"라고 표시하고for="userpassword"를 사용해야 합니다. 입력창은id="userpassword",name="userpassword",type="password", 그리고 placeholder"Enter your password"를 가져야 합니다. - 사용자가 유형을 선택할 수 있는 라디오 버튼 그룹:
"Student"또는"Teacher". 라디오 버튼 위에"User Type:"이라고 표시된 단락이나 제목을 추가하세요."Student"라디오 버튼은id="student",name="usertype",value="student"를 가져야 하며 레이블은"Student"라고 표시해야 합니다."Teacher"라디오 버튼은id="teacher",name="usertype",value="teacher"를 가져야 하며 레이블은"Teacher"라고 표시해야 합니다. 주의: 한 번에 하나만 선택할 수 있도록 두 라디오 버튼의 name 속성("usertype")이 같아야 합니다. - 사용자가 관심사를 선택할 수 있는 체크박스 그룹:
"Sports","Music","Technology". 체크박스 위에"Interests:"라고 표시된 단락이나 제목을 추가하세요."Sports"체크박스는id="sports",name="interests",value="sports"를 가져야 하며 레이블은"Sports"라고 표시해야 합니다."Music"체크박스는id="music",name="interests",value="music"를 가져야 하며 레이블은"Music"이라고 표시해야 합니다."Technology"체크박스는id="technology",name="interests",value="technology"를 가져야 하며 레이블은"Technology"라고 표시해야 합니다. 주의: 같은 그룹이므로 모든 체크박스의 name 속성("interests")이 같아야 합니다. - 양식 끝에 Sign Up 버튼과 Clear 버튼을 추가하세요. Sign Up 버튼은
type="submit"을, Clear 버튼은type="reset"을 가져야 합니다. Sign Up 버튼은 "Sign Up"이라는 텍스트를 표시해야 하고, Clear 버튼은 “Clear”라는 텍스트를 표시해야 합니다.
사용자 친화적인 경험을 위해 적절한 레이블과 제목을 포함해야 합니다!
입력창에는
type,id,name,value와 같은 중요한 속성들이 포함되어야 함을 기억하세요.
직접 해보기
<!DOCTYPE html>
<html>
<body>
<!-- 여기에 코드를 작성하세요 -->
</body>
</html>