HTML 버튼 태그는 HTML 양식 내에서 클릭 가능한 버튼을 만드는 데 사용됩니다. 그것은 사용자가 웹사이트에 형태로 정보를 제출할 수 있습니다. 버튼의 스타일은 CSS로 제어할 수 있습니다.
웹 페이지에서 양식을 만들 때 사용자가 양식을 제출할 수 있도록 클릭 가능한 버튼을 만들어야 합니다. 예를 들어 사용자로부터 배달 정보를 수집하는 전자 상거래 사이트에 주문 양식이 있을 수 있습니다. 사용자가 양식을 작성한 후 정보를 제출하기 위해 클릭할 수 있는 버튼이 있어야 합니다.
HTML <button> 태그가 들어옵니다. 버튼 태그는 HTML 양식 내에서 클릭 가능한 버튼을 만들기 위해 HTML에서 사용되며 사용자가 양식의 정보를 웹사이트에 제출할 수 있도록 합니다.
이 튜토리얼에서는 <button>를 사용하는 방법에 대해 논의할 것입니다. HTML의 태그 . 또한 맞춤 버튼을 만드는 데 사용할 수 있는 속성에 대해 논의하고 이러한 속성이 실제로 작동하는 몇 가지 예를 살펴보겠습니다.
HTML 양식 새로고침
HTML 양식은 웹페이지에서 이름, 전화번호 또는 주소와 같은 다양한 유형의 사용자 입력을 수집하는 데 사용됩니다.
각 양식에는 사용자가 웹사이트에 정보를 제출할 수 있는 입력 요소가 포함되어 있습니다. 예를 들어 웹 페이지에는 사용자 이름, 생년월일, 신용 카드 정보 등을 수집하기 위한 양식 요소가 포함된 주문 양식이 있을 수 있습니다.
<form> 태그는 HTML에서 양식을 만드는 데 사용됩니다. . 다음은 <form>의 간단한 예입니다. 사용자 이름을 수집하는 양식을 만드는 데 사용되는 태그:
양식 태그에는 여러 <input>이 포함될 수 있습니다. 태그 또는 선택 상자와 같은 기타 사용자 입력 요소. 또한 양식에는 <button>이(가) 포함되어야 합니다. 태그를 클릭하면 웹사이트에 사용자 정보가 제출됩니다.
참가자의 81%는 부트캠프에 참석한 후 기술 직업 전망에 대해 더 자신감을 느꼈다고 말했습니다. 지금 부트캠프에 참여하십시오.
부트캠프 졸업생은 부트캠프 시작부터 첫 직장을 찾는 데까지 6개월도 채 걸리지 않았습니다.
HTML 버튼
<button> 태그를 사용하면 HTML 내에서 클릭 가능한 버튼을 만들 수 있습니다. 형태. 예를 들어 결제 정보를 수집하는 양식이 있는 경우 <button> 사용자가 해당 데이터를 귀하의 사이트에 제출할 수 있도록 양식 끝에 추가하십시오.
<button> 태그에는 시작 및 종료 태그가 있어야 하며 type 값도 포함해야 합니다. 기인하다. type 속성은 나중에 논의하겠지만 어떤 유형의 버튼을 렌더링해야 하는지 폼에 알려줍니다.
다음은 HTML의 예입니다. <button> 태그 실행:
버튼이 웹페이지에 표시되는 방식은 다음과 같습니다.
이제 웹 페이지에 버튼이 생겼으므로 사용자는 작성한 양식에 입력한 정보를 제출할 수 있습니다.
<button> 태그는 모든 주요 브라우저에서 지원되므로 브라우저 호환성에 대해 걱정하지 않고 사용할 수 있습니다. 그러나 다른 브라우저가 <button>를 해석한다는 점은 주목할 가치가 있습니다. 다르게 태그를 지정합니다. 예를 들어 버전 9 이전의 Internet Explorer는 <button>의 여는 태그와 닫는 태그 사이에 텍스트를 제출합니다. 요소인 반면 다른 브라우저는 value의 내용을 보냅니다. 속성.
HTML 버튼 태그 속성
HTML <button> 태그에는 사용자 정의 버튼을 만드는 데 사용할 수 있는 여러 속성이 포함되어 있습니다. 또한 <button> 태그는 HTML5의 전역 속성을 지원합니다. . 주요 HTML을 살펴보겠습니다. <button> 태그 속성에 대해 자세히 알아보세요.
자동 초점
autofocus 속성은 웹 페이지가 로드될 때 버튼이 자동으로 포커스를 받아야 함을 지정하는 데 사용됩니다. autofocus 구문은 다음과 같습니다. 속성:
비활성화됨
disabled 속성은 버튼을 비활성화합니다. 즉, 사용자가 요소와 상호 작용할 수 없습니다. 다음은 disabled에 대한 구문입니다. 속성:
아래에서 볼 수 있듯이 버튼이 회색으로 표시되어 클릭할 수 없습니다.
양식
form 속성은 버튼 요소를 양식에 연결하는 데 사용됩니다. form의 값 속성은 id와 같아야 합니다. 양식과 관련된 양식. 다음은 제출 버튼을 pizza에 연결하는 form 속성의 예입니다. 형식:
form 속성은 id 값이 pizza인 양식에 버튼을 연결했습니다. . 따라서 버튼을 클릭하면 ID가 pizza인 양식이 제출됩니다.
형성
formaction 버튼에 의해 제출된 정보를 처리할 프로그램의 URL을 지정합니다. 이 속성은 type 버튼의 속성이 submit와 같습니다. .
다음은 formaction의 예입니다. 사용 중인 속성:
포먼타입
formenctype 속성은 양식 데이터가 서버에 제출될 때 인코딩되는 방법을 지정합니다. 이 속성은 "method=’post’를 사용할 때만 사용해야 합니다. ” 속성.
다음은 formenctype의 예입니다. 버튼을 클릭할 때 일반 텍스트를 서버로 보내는 데 사용되는 속성:
양식
formmethod HTTP를 지정하는 데 사용됩니다. 브라우저가 양식을 제출하는 데 사용할 방법입니다. 이 속성은 "type=’submit’에만 사용해야 합니다. ” 속성.
formmethod에 허용되는 두 값 속성은 get입니다. 및 post . 정보를 검색하거나 HTTP를 실행하려는 경우 GET 함수를 사용하려면 get을 사용해야 합니다.; 정보를 보내거나 HTTP를 실행하려는 경우 post 기능을 사용하려면 post를 사용해야 합니다. .
formmethod 구문은 다음과 같습니다. 속성:
양식 수정
formnovalidate 양식 데이터가 제출될 때 유효성이 검사되지 않아야 함을 지정하는 데 사용됩니다. 예를 들어 사용자가 모든 필드를 채우지 않은 경우에도 입력을 수락하려면 formnovalidate를 사용해야 합니다. 속성.
다음은 formnovalidate의 예입니다. 실행 중:
폼타겟
formtarget 양식이 제출된 후 서버가 보내는 응답의 대상 위치를 설정합니다. 이 속성에 허용되는 값은 다음과 같습니다. _blank , _self , _parent , _top , 또는 uframe의 이름입니다.
formtarget 구문은 다음과 같습니다. 속성:
이름
name 태그는 버튼의 이름(다른 모든 양식 요소 이름에서 고유해야 함)을 지정하는 데 사용되며 다음 구문을 사용합니다.
유형
type 태그는 버튼의 유형을 지정합니다. 다음 세 가지 버튼 유형을 사용할 수 있습니다. button , submit 및 reset . type 구문은 다음과 같습니다. 태그:
가치
value 태그는 버튼의 초기 값을 지정합니다. value 구문은 다음과 같습니다. 태그:
결론
<button> 태그는 HTML에서 클릭 가능한 버튼을 만드는 데 사용할 수 있습니다. 형태. 예를 들어 사용자가 피자를 주문할 수 있는 양식이 있는 경우 <button> 사용자가 준비가 되었을 때 주문에 대한 정보를 제출할 수 있도록 하는 태그입니다.
이 자습서에서는 <button> 사용 방법을 살펴보았습니다. HTML의 태그 . 또한 태그와 함께 사용하여 맞춤 버튼을 생성할 수 있는 주요 속성에 대해 논의하고 이러한 속성을 사용하는 방법에 대한 몇 가지 예를 살펴보았습니다.
이제 HTML을 사용하여 버튼을 만들 준비가 되었습니다. <button> 전문가처럼 태그하세요!