HTML&&CSS

HTML 태그(4) - Form 관련 태그(2)

꽃달린감나무 2022. 5. 19. 18:43
728x90
  • File
<!-- type = "file" -->
<input type="file" name=""><br>
  • 컴퓨터에 있는 파일들을 올릴 때 사용하는 타입

 

  • 결과

 

 

 

  • submit / reset / Image/ button
메시지 : <input type="text" name="message"><br>
ID :<input type="text" placeholder="영문으로만 써주세요" id = "userid"><br>
Password :<input type="password" id = "userpw"><br>

<!-- submit, resrt --> 
<input type="submit" value="submit"> <input type="reset" value="cancle"> <br>
<!-- type = "button" , type = "image" -->
<input type="button" value="register"> 
<input type="image" src="./img/done.png" alt="done", width="100px", height="20px">
  • submit : form 값을 전송하는 버튼
  • reset : form 값을 초기화하는 버튼
  • image : 이미지를 삽입할 수 있는 버튼 
    • src를 통해 img가 있는 경로를 지정해줘야 한다.
    • alt를 통해 이미지가 안 나올 시 대체 텍스트 적어줘야한다.
    • width, height을 통해 버튼의 크기를 조정할 수 있음
  • button : 아무 기능이 없는 태그 ( 원하는 기능을 추가할 수 있음)
  • submit, reset, image, button 다 value  속성을 통해 버튼 안의 텍스트를 삽입/ 교체 가능.

 

 

  • 결과 ( 블로그에서 작동이 되지 않네요! 소스를 복사해서 작동을 보시는 것을 추천드려요!)
메시지 :
ID :
Password :

 

728x90