본문 바로가기

자바스프링웹공부(2024)/HTML, CSS

2024.08.21. HTML - input 타입속성

반응형

9) input type 속성 : file 속성값(파일 첨부할 때 사용하는 업로드 창을 삽입) 
   <input type="file">   
10) input tag 주요속성</h3>
   1. autocomplete 속성 : 폼이나 요소에 자동완성 기능의 지원여부를 지정.
      형식) autocomplete = "on/off"
   2. autofocus 속성 : 페이지가 로드 될 때 특정 폼 요소에 자동으로 커서가 표시(get focus)디도록 지정
   3. placeholder 속성
   4. readonly 속성
   5. required 속성
11) textarea tag : 여러 줄을 입력하는 텍스트 영역을 만듦
     <textarea cols="40" rows="4" placeholder="메모를 남기세요"></textarea>
     <!-- textarea 사자의 크기를 조절할 수 없도록 CSS로 지정하는 방법 resize 속성 사용-->
     <textarea cols="40" rows="4" placeholder="메모를 남기세요(1)" style="resize: none;"></textarea>
12) select, option 태그 : 드롭다운목록(drop down list)을 만들 때 사용
- option 태그 속성 
- value 속성 꼭 지정하기 : 서버로 넘겨주는 값, 
- selected : 기본적으로 선택되어 있는 값을 설정.
- size 속성 : 화면에 표시할 목록 개수, <br>
- multiple 속성 : 2개 이상의 항목을 동시에 선택 가능(ctrl+클릭, shift+클릭) 

<select size="3" multiple>
<option value="s3">선물용 3kg</option>
<option value="s5" selected>선물용 5kg</option>
<option value="h3">가정용 3kg</option>
<option value="h5">가정용 5kg</option>
</select>

- button 태그 : 클릭할 수 있는 버튼(button) 만들기
  button type = "submit, reset, button" 3가지로 지정 가능 

<!-- input 버튼은 글자만 지정가능하나, button은 이미지나 기타 다른 것들도 지정가능함. -->
<button>버튼</button><br>
<button type="submit">전송</button>
<button type="reset">취소</button>
<button type="reset"><img src="image2/login.png" width="50"></button>
<button type="button" onclick="alert('클릭하셨습니다.')">클릭해 보세요.</button>
반응형