HTML ボタン タグを使用すると、HTML ドキュメントを使用して Web ページ上にアクティブなボタン コントロールを作成できます。この<ボタン>要素はbodyタグ内で宣言されます。なぜボタン要素が必要なのでしょうか?通常、ユーザーが Web ページにアクセスするときに最も一般的なことは、Web サイト上のどこかをクリックして、次の URL ページに移動することです。これを行うには、Button 要素だけでは実行できません。これは、Web フォームにデフォルトの送信ボタンのクリックがあるフォーム アクションによって作成されます。
ボタンは
構文:
他の HTML タグと同様、ボタン タグにも開始タグと終了タグの両方があり、ボタンのタイプは属性を使用して定義されます。
<button>
// some stuff like content / image
</button>
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 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
