티스토리 뷰

HTML_CSS

HTML - 2 (2021.03.05)

LHOIKTN 2021. 3. 5. 11:35

first.html
0.00MB

<html>
    <head>
        <title>Site</title>
        <meta charset="utf-8">

    </head>
    <body>
        <p>아이디: <input type = "text" placeholder = "아이디를 입력하세요" /></p>
        <p>패스워드: <input type = "password" placeholder = "패스워드를 입력하세요" /></p>
        <p>패스워드 확인: <input type = "password" placeholder = "다시 패스워드를 입력하세요" /></p>
        <p>생년월일: <input type = "date" placeholder = "생년월일을 입력하세요." /></p>
        <p>성별: <input type ="radio" name="gender">남자  <input type="radio" name="gender"> 여자 </p>
        <p>전화번호: <input type = "text" required  maxlength="3" size="1"/> - <input type = "text" required  maxlength="4" size="2"/> -<input type = "text" required  maxlength="4" size="2"/></p>
        <p>취미생활: <input type="checkbox"/>독서<input type="checkbox"/>산책<input type="checkbox"/>TV시청 </p>
        <button>회원가입하기</button>
    
    
    </body>
</html>

*성별에 대한 radio box를 만들 때

남자, 여자 둘 중 하나만 선택해야하기 때문에

<input type ="radio" name="gender">를 통해 묶어서 하나만 선택할 수 있게 한다. 

 

취미생활도 하나만 선택하게 하고 싶었는데 name ="hobby"로 묶어줘도 전부 선택할 수 있었다.

라디오 박스와 체크 박스의 차이를 알지 못해 이런 시도를 했던 것이다. 

라디오 박스와 체크 박스에 대한 설명은 다음과 같다.  

 

라디오 단추 또는 옵션 단추는 그래픽 사용자 인터페이스의 요소 가운데 하나로, 사용자가 미리 정의된 선택 사항의 모임 중 하나만 선택할 수 있게 한다.

 

체크 상자 또는 체크 박스(check box)는 컴퓨팅에서 그래픽 사용자 인터페이스 요소의 하나이다. 사용자가 수많은 선택 사항에서 여러 개를 선택할 수 있게 한다.

 

취미생활도 하나만 선택하게 만들고 싶다면 라디오 박스를 활용해야 한다. 

 

 

728x90

'HTML_CSS' 카테고리의 다른 글

HTML / CSS - 5 (2021.03.10)  (0) 2021.03.10
HTML / CSS - 4 (2021.03.09)  (0) 2021.03.10
HTML/CSS -3 (2021.03.08)  (0) 2021.03.08
html/css 과제 - 회원가입 화면 css적용. (2021.03.07)  (0) 2021.03.05
HTML - 1 (2021.03.05)  (0) 2021.03.05
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/11   »
일 월 화 수 목 금 토
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
글 보관함