HTML 버튼 태그를 사용하면 HTML 문서를 사용하여 웹 페이지에 활성 버튼 컨트롤을 만들 수 있습니다. 이 <버튼> 요소는 body 태그 내에 선언됩니다. 버튼 요소가 왜 필요한가요? 일반적으로 사용자가 웹페이지에 액세스할 때 가장 흔히 하는 일은 웹사이트의 어딘가를 클릭하여 다음 URL 페이지로 이동하는 것입니다. 이렇게 하려면 Button 요소만으로는 이 작업을 수행할 수 없습니다. 이는 웹 양식에 기본 제출 버튼 클릭이 있는 양식 작업에 의해 생성됩니다.
버튼은
구문:
다른 HTML 태그와 마찬가지로 버튼 태그에도 여는 태그와 닫는 태그가 모두 있으며, 버튼 유형은 속성을 사용하여 정의됩니다.
<button>
// some stuff like content / image
</button>
로그인 후 복사
HTML 버튼 태그의 속성
필수 속성이 없으므로 특수 속성은 사용되지 않았습니다. 대신에 type=" 속성이 있는 일반 버튼으로 사용됩니다. “이 요소도 버튼 태그의 변경 사항을 변경하는 속성과 함께 CSS를 사용하여 스타일이 지정되었습니다. 이러한 속성은 CSS 글꼴 모음, 글꼴 가중치, 텍스트 장식 및 글꼴 스타일입니다. 배경색과 같은 색상 속성과 text-overflow 및 text-indent와 같은 레이아웃 속성
S.no
Attribute Name
Description
Example
1
autofocus
It is considered a Boolean attribute.
2
disabled
Making a button non-clickable.
3
Form
It Creates a form
4
formaction
It specifies the current location for submitting the form data.
5
formnovalidate
It appears in gray and gives non-validation features.
6
Formmethod
It specifies the methods while referring to the next web page(get the post of HTTP methods)
7
formtarget
It specifies the target path for the server response when a form action is done.
8
formenctype
It has been used when a form is submitted to the webserver for the response; it activates the type of content used.
…..
8
name
It specifies the button name used in the form element, which is used by form inputs.
9
type
It specifies the type of button being used. It has three default values submit, reset, and text.
< button type “……” >
10
value
It gives an initial value when a button is used along with the form data
11
tabindex
It specifies the tab key and the order does the preference.
12
onclick
When a button is pressed, it runs a small javascript code behind it.
Examples to Implement in HTML Button Tag
Below are examples of implementing an HTML Button Tag:
Example #1
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title> HTML button tag Example</title>
</head>
<body>
<h2>HTML button tag Example </h2>
<form action="/examples/html/action.php" method="post">
<p>
Employee Name: <input type="text" name="Employee-Name">
<button type="submit" value="Submit">Click</button>
<button type="reset" value="Reset">Reset</button>
</p>
</form>
</body>
</html>
로그인 후 복사
Output:
Example #2
Code:
<!DOCTYPE html>
<html>
<head>
<h3> <center> Example using CSS </center><h3>
</head>
<body>
Normal Class
<button type="button">Add to the First class</button>
<hr />
Economic Class
<button type="button" style="color: pink;"><b> Book Economic Class </b></button>
<hr />
Bussiness class
<button type="button" style="color: orange;"><b> Book Bussiness Class </b></button>
<hr />
Departure
<button type="button" style="font: bold 12px Open Sans;">Norway </button><br />
</body>
</html>
로그인 후 복사
Output:
Example #3
With CSS: Here, we have used padding and margin property. Here are some ways to look at the page better. To create a button with rounded corners, use border-radius.
Note: You can also increase the button size by giving < button type=” button” style=: font-size: 30px”>. btn in the above code is the bootstrap function class.
Example #4
The below example shows how to use the attribute autofocus with button element; in an example, when a page Loads, it focuses on the first HTML control.
onclick attribute demo. In the below example, I have used JavaScript to take action in the button; meanwhile, it alerts a dialog box with a text message. We use a JavaScript function to make the critical decision by activating the button with onclick().
Code:
<!DOCTYPE html>
<html>
<head>
<title>HTML On Click Button Demo</title>
</head>
<body>
<h3> HTML On Click Button Demo</h3>
<button onclick="alert('Hi Welcome to EDUCBA!')"> Press me... </button>
</body>
</html>
로그인 후 복사
Output: Before the button press
Alert Message – After the Button click
Example #6
Code:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="scripts.js">
</script>
<link rel="stylesheet" href="styles.css">
<script type="text/javascript" src="scripts.js"></script>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p>The button loads to the next web page!</p>
<a href="https://www.educba.com" target="_blank">
<button>Submit!</button>
</a>
</body>
</html>
로그인 후 복사
Output:
Conclusion
In summary, we have learned about the HTML Button tag. This tag initiates an action and submits content within an HTML document. Important aspects of the website create an easy button, CSS, and JavaScript to look colorful. You can also learn many options related to buttons.
위 내용은 HTML 버튼 태그의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
