[HTML] <button> 태그 type / value, readonly, disable, hidden, image

[HTML]
<button> 태그 type / value, readonly, disable, hidden, image

---

✔️ <button> ~ </button> 태그

: 폼 버튼 태그로 버튼을 나타낸다.

 

📓 속성

- autofocus : 페이지를 로드할 때 요소가 자동으로 포커스를 받는다.

- disabled : 버튼을 비활성화 시킴

- form : 폼 소유자를 명시적으로 지정한다.

- formaction : 폼을 제출할 서버의 url!

- formenctype : 제출하는 폼 데이터를 인코딩한다.

- formmethod : 폼 제출시 사용되는 HTTP 메소드 (속성값 : get, post)

- formnovalidate : 폼 제출시 데이터의 유효성 검사여부 결정

- formtarget : 폼 제출 후 결과를 표시할 브라우징을 정의

- name : 폼 제출시에 사용되는 폼 컨트롤의 이름

- type : 동작을 제어한다.

(submit / reset / button) 

- value : 폼 제출시 사용되게 하는 이름!

 

<p style="text-align: center; ">
		<button type="submit" name="sendButton">회원가입</button>
		<button type="reset">다시입력</button>
		<button type="button">가입취소</button>
</p>

💡 주의!! submit 버튼과 reset 버튼은 form 태그 안에 있어야 적용된다.
submit 버튼은 form 태그가 지정한 서버로 데이터를 전송하는 기능을 가지고 있다.
reset 버튼은 양식태그의 상태를 초기값 으로 설정한다.

 

 

✔️ value 속성

: 초기값을 나타낸다.

	<p>
		<!-- value 속성 : 초기값  -->
		value 속성 : <input type="text" name="input1" value="10">
	</p>

 

 

✔️ readonly 속성

: 값을 변경할 수 없으며 서버로 전송된다.

	<p>
		<!-- readonly 속성 : 값을 변경할 수 없으며 서버로 전송된다. -->
		readonly 속성 : <input type="text" name="input2" value="20" readonly="readonly">
	</p>

 

 

✔️ disable 속성

: 값을 변경할 수 없으며 서버로 전송되지 않는다.

	<p>
		<!-- disable 속성 : 값을 변경할 수 없으며 서버로 전송되지 않는다. -->
		disable 속성 : <input type="text" name="input3" value="30" disabled="disabled">
	</p>

 

 

✔️ disable 속성

: type="hidden" 은 화면에 표시되지 않지만 서버로 전송해야 하는 경우 사용한다.

	<p>
		<!-- type="hidden" : type="text" 와 유사하지만 화면에 표시되지 않는다. -->
		<!--  type="hidden" 은 화면에 표시되지 않지만 서버로 전송해야 하는 경우 사용한다.  -->
		<input type="hidden" name="num" value="100">
	</p>

 

 

✔️ image 속성

: image 버튼, submit 버튼은 서버로 데이터를 전송할 수 있는 기능을 가진다.

: image 버튼, submit 버튼은 form 태그 안에 있어야 적용된다.

	<p>
		<!-- image 버튼, submit 버튼은 서버로 데이터를 전송할 수 있는 기능을 가진다. -->
		<!-- image 버튼, submit 버튼은 form 태그 안에 있어야 적용된다. -->
		<input type="image" src= "btn_submit.gif" style="vertical-align: top;">
		<button type="submit" style="vertical-align: top;">등록하기</button>
		<input type="submit" style="vertical-align: top;" value="등록하기">
		
		<!-- 일반 버튼은 서버로 전송할 수 있는 기능이 없다.  껍데기-->
		<button type="button" style="vertical-align: top;">일반버튼</button>
	</p>