Front-End/HTML

[HTML] Ex07_Form.html

이뮨01 2023. 6. 10. 15:46

웹 페이지에서 클라이언트에게 입력값을 받을 입력폼을 생성하는 태그를 배우다.

<!DOCTYPE html>
<html lang="en">
<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>
    <!-- form 태그: 웹페이지에서 입력폼을 만들 때 사용하는 태그
                    사용자에게 정보를 받아주는 태그
                - 필수 속성: method(전달 방식), action(전달 위치)
                 #: 현재 위치 -->
    <form action="#" method="get">

        <!-- input 태그: 사용자가 입력할 수 있도록 한 공간
            *속성*
                1) name: 입력한 값을 구분하기 위해서 이름을 지정함.
                2) placeholder: 미리보기 텍스트 
                3) autofocus: 자동 커서 설정
                4) value: 기본값 설정
                5) readonly: 읽기 전용 지정, 수정 금지
                6) maxlength: 최대 글자 수 제한 -->
        <h3>입력</h3>
        ID <input type="text" name="id" placeholder="아이디"
            autofocus> <br>
        PW <input type="password" placeholder="비밀번호" maxlength="12"> <br>
        소속 <input type="text" name="lec"
            value="인공지능사관학교" readonly>

        <h3>선택</h3>
        <!-- 1. input 태그, type 속성이 checkbox
             2. input 태그, type 속성이 radio
             3. select 태그 -->
             <!-- checkbox와 radio 비교
            - 필수 속성이 2가지 존재
            - name: 어떤 설문인지?
            - value: 어떤 값인지? -->
             <!-- (1) checkbox: 중복 선택이 가능하다 -->
             <p>좋아하는 메뉴를 골라주세요.</p>
             마라탕 <input type="checkbox" name="menu" value="mara"/>
             마제소바 <input type="checkbox" name="menu" value="maje"/>
             <!-- (2) radio: 중복 선택이 불가능하다 
                             name을 사용해서 같은 주제로 묶어준다. -->
                             <hr>
             <p>성별을 골라주세요.</p>
             남성 <input type="radio" name="gender" value="man"/>
             여성 <input type="radio" name="gender" value="woman"/>
             <hr/>
             <!-- (3) select 태그:
            - option 태그가 필요하다 -->
             <input type="text"/>
             <select name="" id="">
                <option value="">@gmail.com</option>
                <option value="">naver.com</option>
                <option value="">daum.net</option>
             </select>

             <h3>그 외</h3>
             <input type="file"> <br>
             <input type="color"> <br>
             <input type="number"> <br>
             <input type="range"> <br>
             <input type="date"> <br>
             <input type="datetime-local">

             <h3>제출 및 초기화</h3>

             <!-- 제출 및 초기화된 정보는 무조건 form태그의 시작 ~ 끝 
                  제출 및 초기화하는 버튼의 위치는 무조건 form태그 안 쪽-->
            <input type="submit">
            <input type="reset">
    </form>
</body>
</html>

결과

비밀번호 입력에서 ***로 표시되게 type의 속성값을 password로 한다.

소속의 readonly 속성은 클라이언트가 수정할 수 없게 만드는 것이다.

 

form 안에 input 태그를 사용하여 input 태그의 typle 태그 속성값을 바꿔가며 입력받는 방식을 바꾼다.

checkbox 속성값은 클라이언트가 여러 값을 선택할 수 있다.

 

radio 속성값은 클라이언트에게 2개 이상의 선택지를 주지만 1가지만 선택할 수 있다. ex) 성별

radio 속성값을 사용할 때 주의사항은

input의 name 속성을 같게 하여 같은 설문으로 묶어서 1가지만 선택할 수 있게 만들어야 한다.

 

이메일 주소를 적는 칸에 주로 사용되는 select 태그는 속성값이 아니고 따로 태그를 만들어서 그 안에 option 태그들을 사용해야 한다.

저작자표시