프론트앤드/HTML

[포스코x코딩온] 웹개발자 입문 과정 1주차 회고-05 | HTML 실습2

영최 2023. 3. 3. 12:25
728x90

실습2, 설문조사  작성

-<h3>태그로 설문조사 제목 

-각 설문의 소제목인 '나이'와 '원하는 강의'는 <h4>태그를 이용

  - 나이는 여러개의 선택지 중 하나만 선택

  - 강의는 여러개 선택 가능

 

 

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h3>설문조사</h3>
    <label for="txtinput">이름</label>l
    <input type="text" id="txtinput">
    <br/>
    <label for="emailinput">이메일</label>
    <input type="email" id="emailinput" placeholder="love@example.com">
    <br/>
    <h4>나이</h4>
    <input type="radio" name="age" id="10대"><label for="10대">10대</label>
    <input type="radio" name="age" id="20대"><label for="20대">20대</label>
    <input type="radio" name="age" id="30대"><label for="30대">30대</label>
    <input type="radio" name="age" id="40대"><label for="40대">40대</label>
    <input type="radio" name="age" id="50대"><label for="50대">50대</label>
    <input type="radio" name="age" id="60대 이상"><label for="60대 이상">60대 이상</label>
    <br/>
    <h4>원하는 강의(복수응답가능합니다.)</h4>
    <input type="checkbox" name="courses">html
    <input type="checkbox" name="courses">javascript
    <input type="checkbox" name="courses">css
    <br/>
    <br/>
    <textarea cols="60" rows="10" placeholder="하고 싶은 말을 써주세요 :)"></textarea>
    <input type="submit" value="제출">
</body>
</html>

 

여기서  잘못된 점은 id 와 for 속성에서 한글과 숫자를 시작으로 사용했다는 점을 알 수 있었다.

다음부터는 영어로 작성하고 class 속성도 영어로 작성해야하겠다.

또한 class 와 달리 id 속성은 한 html당 한개를 사용하기로 한다.

728x90