ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • HTML | 체크박스, 라디오버튼, range, dropdown
    코딩/HTML 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>
    

     

     

     

     

    '코딩 > HTML' 카테고리의 다른 글

    HTML | 시맨틱태그의 종류와 역할  (0) 2023.07.03
    HTML | 콤보박스, 데이터리스트, 번호, date, datetime  (0) 2023.05.02
    HTML | input, form, button  (0) 2023.04.30
    HTML | Table 태그  (0) 2023.04.29
    HTML | head, list, a href  (0) 2023.04.28
Designed by Tistory.