코딩/HTML

HTML | 체크박스, 라디오버튼, range, dropdown

고냉씨 2023. 5. 1. 18:02

		<form>

		입력창 <input>

    
    <h2>checkbox</h2>
    과일선택:
    <input type = "checkbox" checked> APPLE    // 기본값으로 체크선택 chacked 
    <input type = "checkbox" > GRAPE
    <input type = "checkbox"> ORANGE
   

     //라디오버튼은 1개 선택가능
     <h2>radio</h2>
     성별
     <input type="radio" name="gender" value="male"> 남성
     <input type="radio" name="gender" value="female"> 여성

     이메일
     <input type="email" required>
     <input type="submit" value="전송하기">

     
     <h2>color</h2>
     <input type="color" name="mycolor">

    //text 태그 size = ""  maxlength = ""
		텍스트 창 너비, 높이 지정가능 
		 html 행 열 / css 너비 높이

    <h2>textbox size 지정</h2>
    물품 가격:
    <input type="text" size="10"><br>
    물품 수량:
    <input type="text"><br>
    물품 재고:
    <input type="text"><br>

    <input type="button" value="확인" onclick="alert('확인완료')">

    </form>

 

		
<h2>조절바</h2>
    <input type="number" min="230" max="260" step="5" value="260"><br>
    <input type="range" min="1" max="10" value="10"><br>
       
    

<h2>드롭다운</h2>
    <select name="cars">
        <option value="bmw">BMW</option>
        <option value="benz">Benz</option>
        <option value="hyundai" selected>현대자동차</option>
        <option value="kia">기아자동차</option>
        <option value="porsche" disabled> 포르쉐</option>
    </select>
    
<h2>라벨 웹 글자 표현 태그 </h2>
레이블 태그를 클릭하면 텍스트 컨트롤에 초점에 맞춰서 
사용이 가능 <br>모바일나 태블릿 환경에서 강점 발휘<br>  
      
<label for="pet-select">Choose a pet:</label><br />
<!-- 목록 사이즈가 4줄 + shift로 다중 선택 -->
<select name="pets" id="pet-select" size=4 multiple>
    <option value="dog">Dog</option>
    <option value="cat">Cat</option>
    <option value="hamster">Hamster</option>
    <option value="parrot">Parrot</option>
    <option value="spider">Spider</option>
    <option value="goldfish">Goldfish</option>
</select>