HTMLのボタンタグ
この記事では、HTMLでボタンタグを使用する方法を紹介します。これは、HTMLフォーム構造で非常に重要なタグです。
ボタンタグはボタンを作成しますが、入力タグのようにフォーム送信アクションを作成することはありません。したがって、問題の必要なアクションを作成するために、Javascriptと組み合わせて使用することがよくあります。
<button></button>タグのペアで、ユーザーはコンテンツをテキストまたは画像に設定できます。これは、ボタンタグとtype=buttonの入力タグの違いです。
1.HTMLでボタンタグを使用する方法
たとえば、クリックしたときに挨拶を表示するボタンを作成します。
<!DOCTYPE html> <html> <head> <title>Học lập trình miễn phí tại web888.vn</title> <meta charset="utf-8"> </head> <body> <h1>Học lập trình miễn phí tại web888.vn</h1> <button type="button" onclick="alert('Hello web888.vn!')" > Click để in ra lời chào web888 </button> </body> </html>上記の例では、ボタンがクリックされたときに「 Hello world！ 」というテキストを警告するように、ボタンタグのonclickイベントを作成しました。 '。
2.htmlのボタンタグの属性
最も一般的に使用される属性のいくつかを次に示します。
- autofocus-ページが読み込まれると、タグに自動的に焦点を合わせます。
- type-送信、リセット、ボタンなど、ボタンのスタイルを指定します。
- name-ボタンの名前。
- 無効-ボタンが無効かどうか。
たとえば、type属性を使用して、入力したデータをリセットするボタンを作成します。
<form> <input type="text" name="username"> <input type="text" name="email"> <button type="reset">Reset</button> </form>3.ボタンのCSSを設定します。tag
ボタンにCSSを追加するには、次の2つの方法を使用できます。
- 最初の方法は、スタイル属性を追加し、CSSをその中に書き込むことです。
- 2番目の方法は、入力タグにクラスまたはIDを指定し、この情報を使用してCSSを生成することです。
<button class="color-red" id="btn" type="reset">Reset</button> <style> button{ color:red } .color-red{ color:red } #btn{ color:red } </style>上記の3つの方法のうち、いずれかを使用できます。
Bài viết liên quan:
Dịch vụ thiết kế Wesbite
