<button>을 알아보자! > 웹개발

본문 바로가기

회원메뉴

  

쇼핑몰 검색

회원로그인

오늘 본 상품

없음

웹개발

HTML | <button>을 알아보자!

페이지 정보

작성자 인셀러 작성일19-04-02 16:15 조회27회 댓글0건

본문

<button> 


클릭할 수 있는 버튼을 나타냅니다.




컨텐츠 범주 : 플로우 컨텐츠, 구문 컨텐츠, 대화형 컨텐츠, listed, labelable, and submittable form-associated element, palpable 컨텐츠.

허용된 컨텐츠 : 구문 컨텐츠. 대화형 컨텐츠는 불가능.

태그 생략 : 없음

허용된 부모 : 요소구문 컨텐츠를 허용하는 모든 요소.

허용된 ARIA 역할 : checkbox, link, menuitem, menuitemcheckbox, menuitemradio, radio, switch, tab



----------------------------------------------------


속성

이 요소는  전역 속성을 포함합니다.



autofocus

예로, 사용자가 페이지를 재정의하지 않는 한 페이지가 로드될 때 알아야 할 특성 문자로 문서에서 오직 하나의 형태 관련 요소만이 이 속성을 지정할 수 있다.




autocomplete 

<button>에서 이 속성을 사용하는 것은 비표준이며, 파이어폭스에 유한다. 기본적으로 다른 브라우저와 달리 Firefox는 페이지 로드에 걸쳐 <button>의 동적 비활성화 상태를 유지한다. 이 특성의 값을 꺼짐으로 설정(즉, autocomplete="off")하면 이 기능이 비활성화된다.

버그 654072를 참조하여야한다.




disabled

이 특성은 사용자가 버튼과 상호 작용할 수 없음을 나타낸다. 이 속성을 지정하지 않으면, 버튼은 포함 요소(예: <fieldset>)에서 설정을 이어받으며, 비활성화된 특성이 있는 포함 요소가 없는 경우 버튼이 활성화된다.

파이어폭스는 다른 브라우저와는 달리 기본적으로 페이지 로드에 걸쳐 <button>의 동적 비활성화 상태를 유지한다. 이 기능을 제어하려면 자동 완성 특성을 사용해야한다.



form 

버튼이 연결된 양식 요소(양식 소유자). 속성 값은 동일한 문서에 있는 <양식> 요소의 id 속성이어야 한다. 이 특성이 지정되지 않은 경우, <button> 요소는 양식 요소의 하위 요소여야 한다. 이 속성은 문서의 어느 곳에나 <button> 요소를 배치할 수 있도록 하며, 그 요소의 하위 항목으로서가 아니다.




formaction

버튼에서 제출한 정보를 처리하는 프로그램의 URI. 지정한 경우 버튼의 양식 소유자의 작업 속성을 무시한다.




formenctype

버튼이 제출 버튼인 경우, 이 속성은 서버에 양식을 제출하는 데 사용되는 컨텐츠 유형을 지정한다.

가능한 값:

- application/x-www-form-urlencoded: 속성이 지정되지 않은 경우 기본값.

- multipart/form-data: 타입 특성이 파일로 설정된 <input> 요소를 사용하는 경우 이 값을 사용하십시오.

- 텍스트/플레인


이 특성이 지정되면 버튼의 양식 소유자의 encctype 속성을 재정의한다.




formmethod

버튼이 제출 버튼인 경우, 이 속성은 브라우저가 양식을 제출하기 위해 사용하는 HTTP 방법을 지정한다.

가능한 값:

- 포스트 : 양식 본문에 포함된 데이터를 서버로 전송한다.

- get: 양식 속성 URI에 '?'를 구분 기호로 추가하고, 결과 URI를 서버로 전송한다. 양식에 부작용이 없고 ASCII 문자만 포함된 경우 이 방법을 사용하십시오.


이 특성이 지정되면 버튼의 양식 소유자의 메서드 속성이 무시된다.





formnovalidate

버튼이 제출 버튼인 경우, 이 특성은 제출 시 양식의 유효성을 검사하지 않음을 지정한다. 이 특성이 지정되면 버튼의 양식 소유자의 무효화 특성이 무시된다.


포멧 대상 HTML5

버튼이 제출 버튼인 경우, 이 속성은 양식을 제출한 후 수신되는 응답을 표시할 위치를 나타내는 이름 또는 키워드다. 이것은 검색 컨텍스트(예: 탭, 창 또는 인라인 프레임)의 이름 또는 키워드다. 이 특성이 지정되면 버튼의 양식 소유자의 대상 특성이 무시된다. 다음 키워드에는 특별한 의미가 있다.


_self : 반응을 현재와 동일한 검색 상황에 로드한다. 이 값은 속성을 지정하지 않은 경우 기본값이다.

_blank : 응답을 새로운 검색 컨텍스트에 로드한다.

_parent : 반응을 현재 부모 검색 상황에 로드한다. 부모가 없으면 이 옵션은 자기 자신처럼 행동한다.

_top : 응답을 최상위 검색 컨텍스트(즉, 현재 검색 컨텍스트의 상위 항목이며 상위 항목이 없는 검색 컨텍스트)로 로드한다. 부모가 없으면 이 옵션은 자기 자신처럼 행동한다.




name

폼 데이터와 함께 전송되는 버튼의 이름입니다.




type

버튼의 타입입니다. 아래와 같은 값이 올 수 있습니다.:

-submit :  이 버튼은 폼 데이터를 서버로 전송합니다.  만약에  속성을 지정하지 않았다면  이 값이 디폴트 값이고 다른 속성 값을 지정하였다면 빈 값에 동적으로 적용됩니다. 

-reset : 이 버튼은 모든 제어되고 있는 값을 초기 값으로 리셋합니다.

-button : 이 버튼에는 디폴트로 지정된 행위가 없습니다. 이는 이벤트를 실행시켰을때 발생되는 엘리먼트 이벤트와 연관되어있는 클라이언트 사이트 스크립트를 가질 수 있습니다. 




value

버튼의 초기값 입니다.








----------------------------------------------------


예제

<button name="button">Click me</button>


----------------------------------------------------


예제의 결과

4a24171eb9f815240ed558e39447f459_1554189352_526.jpg
 

댓글목록

등록된 댓글이 없습니다.

인셀터 파트너
회사소개 서비스이용약관 개인정보취급방침 공지사항 제휴문의 고객문의
  • 고객센터
    Tel : 070 - 4140 - 1302
    Time : am10:00 ~ pm6:00

    고객문의 게시판
    카카오톡 문의 : sopen
  • 입금계좌안내
    신한은행 : 110-450-941860
    하나은행 : 642-910643-16407
    예금주 : 에스오픈(신광태)
  • 사이트명 : 인셀러,     회사명 : 에스오픈
    사업자 등록번호 : 314-07-45623
    통신판매업신고번호 : 2018-대전중구-0441
    주소 : 대전광역시 중구 동서대로 1180, 2F (태평동 414-1)
    전화 : 070-4140-1302
    이메일 : sopen2011@naver.com
    대표&개인정보관리책임자 : 신광태