<HTML5+CSS3> 사용자가 정보를 입력하는 input 태그 (3) 파일첨부,서버전송 리셋버튼

2018년 10월 10일 by Xion

    <HTML5+CSS3> 사용자가 정보를 입력하는 input 태그 (3) 파일첨부,서버전송 리셋버튼 목차

type="file"-파일첨부하기

-폼에 파일을 첨부하려고 할 때 사용하는 유형입니다. 파일선택 ,찾아보기 , 선택 등으로 표시가 됩니다

ex)<input type="file" 속성="속성값">

ex)<label> 첨부파일 선택: <input type="file" ></label>



type="submit"-서버 전송 버튼 넣기

-사용자가 폼에 입력한 정보를 서버로 전송하는 submit 버튼을 넣어주는 역할을 합니다. 이때 , value 속성을 이용해 '전송'이나 '보내기'등

submit버튼에 표시할 내용을 지정할 수 있습니다. submit 버튼으로 전송된 정보는 처음에 <form>태그에서 지정한 폼 처리 프로그램에 넘겨집니다.


ex)<input type="submit" value="버튼내용" 속성=속성값>

ex)<input type="submit" value="제출>


type="reset"-리셋 버튼 넣기

-이 버튼은 <input>요소에 입력된 정보들을 모두 리셋하여 사용자가 입력한 내용을 전부 지울 수 있습니다. value속성을 사용해 버튼에 표시할 내용을  지정합니다.

ex) <input type="reset" value="버튼내용" 속성="속성값">

ex) <intput type="reset value="다시입력" >


type="image" - 이미지 버튼 넣기

-submit 버튼 대신에 사용할 이미지가 준비되어 있다면 type="image"를 사용해 전송 이미지를 넣을 수 있습니다.


ex)<input type="image" src="경로" alt="대체 텍스트" 속성="속성값">

ex)<input type="image" id="butt" src="login.png">


266p 참고


type="button"-버튼 넣기

-폼 안에 버튼 형태를 만듭니다. 이 버튼은 submit이나 reset같은 자체 기능을 가지고 있지 않고 오직 버튼만 넣기 때문에 스크립트 함수 등을 연결해서 사용합니다. value속성을 사용하여 버튼에 표시할 내용을 지정합니다.

ex) <input type="button" value="버튼 내용" 속성="속성값">


ex)<input type="button" value="로그인" onclick="login.php">

->버튼 형태를 만든후 벨류 속성으로 로그인이라는 내용을 지정후에 onclick이벤트를 통해 실행할 함수까지 직접 지정한 것입니다. 버튼을 클릭할 때 실행할함수가 있다면 직접 함수를 지정해야 합니다.


%submit과 button의 차이점 : submit은 서버로 전송될 정보를 프로그램으로 넘겨주는 것까지 함께 처리 

    button은 단순히 버튼만 생성 그후 onclick 속성값으로 함수연동을 해야함.