記事特集学ぶダウンロードに質問プログラミング辞典ゲーム最近の更新

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

ホームページ> ウェブフロントエンド> htmlチュートリアル> 本文

HTMLボタンタグ

WBOY

リリース： 2024-09-04 16:29:55

オリジナル

691 人が閲覧しました

HTML ボタンタグを使用すると、HTML ドキュメントを使用して Web ページ上にアクティブなボタンコントロールを作成できます。この <ボタン> 要素はbodyタグ内で宣言されます。なぜボタン要素が必要なのでしょうか?通常、ユーザーが Web ページにアクセスするときに最も一般的なことは、Web サイト上のどこかをクリックして、次の URL ページに移動することです。これを行うには、Button 要素だけでは実行できません。これは、Web フォームにデフォルトの送信ボタンのクリックがあるフォームアクションによって作成されます。

ボタンは

ログイン後にコピー

HTML ボタンタグの属性

必須の属性がないため、特別な属性は使用されていません。代わりに、type=” 属性を持つ通常のボタンとして使用されます。「この要素でさえ、ボタンタグの変更を変更するプロパティを使用して CSS を使用してスタイル設定されています。これらのプロパティは、CSS フォントファミリ、Font-weight、Text-decoration、および font-Style です。 Background-color などの色付けプロパティと、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:

    HTML button tag Example 
  HTML button tag Example 
   Employee Name:

ログイン後にコピー

Output:

HTMLボタンタグ

Example #2

Code:

     Example using CSS 
 
  Normal Class  
 Economic Class  
 Bussiness class  
 Departure

ログイン後にコピー

Output:

HTMLボタンタグ

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.

Code:

   HTML Form action Using Button
       
          
           ログイン後にコピー

Output:

HTMLボタンタグ

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.

Code:

    Button Demo <button>autofocus Attribute  
   EDUCBA Web Tutorial 
  Button Tag 
  Button Tag

ログイン後にコピー

Output:

HTMLボタンタグ

Example #5

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:

   HTML On Click Button Demo 
   HTML On Click Button Demo

ログイン後にコピー

Output:Before the button press

HTMLボタンタグ

Alert Message – After the Button click

HTMLボタンタグ

Example #6

Code:

The button loads to the next web page!

ログイン後にコピー

Output:

HTMLボタンタグ

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 サイトの他の関連記事を参照してください。