[Html] input type 종류 & 예제 총정리

    1. input type = "text" , input type = "password" 

    text,password

    이름 : <input type="text" name="my_name" size="20">
    비밀번호 : <input type="password" name="my_password" size="20">
    
    <input type="text" name="my_name" size="20" value="수정불가" readonly>

     

     

    2. input type = "radio" 

    radio

    <input type="radio" name="food" value="치킨" checked>치킨
    <input type="radio" name="food" value="피자">피자
    <input type="radio" name="food" value="짜장면">짜장면
    <input type="radio" name="food" value="짬뽕">짬뽕

     

     

    3. input type = "checkbox" 

    checkbox

    <input type="checkbox" name="computer" value="CPU" checked>CPU
    <input type="checkbox" name="computer" value="Memory">Memory
    <input type="checkbox" name="computer" value="HDD">하드디스크
    <input type="checkbox" name="computer" value="CDROM">CDROM
    <input type="checkbox" name="computer" value="GRAPIC_CARD">GRAPIC_CARD

     

     

    4. select option 

    select

    <table>
        <tr>
    	<td colspan="2">
    		<h2>가장 재미있는 것을 선택해 주세요.</h2>
    	</td>
        </tr>
        <tr>
    	<td valgn="top">
    		<select name="items1">
    			<option value="HTML">HTML</option>
    			<option value="자바스크립트">자바스크립트</option>
    			<option value="CSS">CSS</option>
    		</select>
    	</td>
        </tr>
        <tr>
    	<td valign="top">
    		<select name="items2" size="3">
    			<option value="HTML">HTML</option>
    			<option value="자바스크립트">자바스크립트</option>
    			<option value="CSS">CSS</option>
    		</select>
    	</td>
        </tr>
    </table>

     

     

    5. input type ="button" ,input type = "submit", input type = "reset" 

    button

    <input type="button" value="로그인화면">
    <input type="submit" value="회원 가입">
    <input type="reset" value="다시 입력">

     

     

    6. input type ="image" 

    image

    이미지:<input type="image" src="aaa.gif">

     

     

    7. input type ="file" 

    file
    파일명:<input type="file" name="fileName">

     

    댓글(1)

    • 아모네
      2020.07.19 10:25

      깔끔한 정리 감사합니다! 코린이 잘 배우고 가요!

    Designed by JB FACTORY