HTML - input (입력)

 

• input 태그를 사용해 사용자로부터 다양한 입력을 받는 웹 페이지를 만들 수 있다
• input 태그의 type 속성에 따라 입력받는 방식이 달라진다
• input 태그의 value 속성에 값을 설정해 놓으면 기본값이 설정된다
• input 태그의 placeholder 속성에 값을 설정해 놓으면 무엇을 입력해야 하는지 알려 줄 수 있다
• input 태그의 readonly 속성을 추가해 놓으면 수정이 불가능해진다 (읽기 전용)
• input 태그의 disabled 속성을 추가해 놓으면 비활성화된다

 

<table border="1">
    <tr>
        <th>타입</th>
        <th>예시</th>
        <th>설명</th>
        <th>용도</th>
    </tr>
    <tr>
        <td>type="text"</td>
        <td>
            <input type="text"> <br>
            <input type="text" value="안녕하세요!"> <br>
            <input type="text" placeholder="이름을 입력하세요 !"> <br>
            <input type="text" value="읽기 전용입니다." readonly> <br>
            <input type="text" value="비활성화입니다." disabled> <br>
        </td>
        <td>일반적인 텍스트 입력란</td>
        <td></td>
    </tr>
    <tr>
        <td>type="password"</td>
        <td><input type="password"></td>
        <td>비밀번호를 가려주는 비밀번호 입력란</td>
        <td>비밀번호, 글 비밀번호</td>
    </tr>
    <tr>
        <td>type="color"</td>
        <td><input type="color"></td>
        <td>색상 선택</td>
        <td></td>
    </tr>
    <tr>
        <td>type="rado"</td>
        <td>
            <b>종교를 고르세요</b>: <br>
            <input type="radio" name="religion" id="Christianity"> 
            <label for="Christianity">기독교</label> <br>
            <input type="radio" name="religion" id="Buddhism"> 
            <label for="Buddhism">불교</label> <br>
            <input type="radio" name="religion" id="no_religion"> 
            <label for="no_religion">무교</label> <br>
            <hr>
            <b>이동수단</b> <br>
            <input type="radio" name="transport" id="car">
            <label for="car">자동차</label> <br>
            <input type="radio" name="transport" id="public_transport">
            <label for="public_transport">대중교통</label> <br>
            <input type="radio" name="transport" id="walk">
            <label for="walk">도보</label> <br>
        </td>
        <td>
            여러개의 선택 중 하나만 선택해야하는 경우 <br>
            name 속성을 사용하여 하나의 카테고리로 묶어줘야 제대로 동작한다 <br>
            label 태그를 사용하여 해당 라벨을 클릭하면 버튼이 선택되도록 설정할 수 있다 <br>
            이 때 label의 for 속성을 해당 버튼의 id 속성값으로 설정해야 한다 <br>
        </td>
        <td>성별, 나이 등</td>
    </tr>
    <tr>
        <td>type="checkbox"</td>
        <td>
            <b>취미를 선택해주세요</b> <br>
            <input type="checkbox" name="hobbies" id="music"> 
            <label for="music">음악감상</label> <br>
            <input type="checkbox" name="hobbies" id="book"> 
            <label for="book">독서</label> <br>
            <input type="checkbox" name="hobbies" id="movie"> 
            <label for="movie">영화감상</label> <br>
            <input type="checkbox" name="hobbies" id="meditate"> 
            <label for="meditate">명상</label> <br>
        </td>
        <td>
            같은 카테고리 내에서 여러가지를 동시에 선택 할 수 있는 버튼 <br>
            radio랑 다르게 같은 name으로 묶어도 다중 선택 가능하다 <br>
        </td>
        <td>
            관심분야 등
        </td>
    </tr>
    <tr>
        <td>type="date"</td>
        <td><input type="date"></td>
        <td>날짜를 입력받을 수 있다</td>
        <td></td>
    </tr>
    <tr>
        <td>type="file"</td>
        <td><input type="file"></td>
        <td>사용자의 컴퓨터에서 파일을 선택 할 수 있다</td>
        <td>파일 첨부, 프로필 사진 등록 등</td>
    </tr>
    <tr>
        <td>type="hidden"</td>
        <td><input type="hidden" name="id" value="103"></td>
        <td>사용자에게는 보이지 않게 값을 숨겨 놓을 수 있다</td>
        <td>굳이 보여 줄 필요 없는 내용들을 숨길 때 사용</td>
    </tr>
    <tr>
        <td>&lt;textarea&gt;</td>
        <td>
            <textarea cols="35" rows="10"></textarea>
        </td>
        <td>
            많은 앙의 텍스트를 입력할 때 사용하는 태그 <br>
            input 태그와 다르게 value 속성을 사용하지 않고 요소의 내용이 value가 된다 <br>
        </td> 
        <td>글 내용</td>
    </tr>
    <tr>
        <td>&lt;select&gt;, &lt;option&gt;</td>
        <td>
            <b>Select your job!</b> <br>
            <select name="job_ID">
                <option value="IT_PROG">IT Programming</option>
                <option value="FI_ACCOUNT">Finace Account</option>
                <option value="ST_CLERK">Store Cleck</option>
            </select>

        </td>
        <td>주어진 여러 선택 중 하나를 선택 할 수 있는 태그</td>
        <td>주로 외래키 컬럼에 사용된다 (주어진 것 중 하나를 선택해야 하는 경우)</td>
    </tr>
</table>