HTML5を使用した画像ボタン

次の記事では、HTML5 画像ボタンの使用について学習します。

タスクでは、ボタンとして機能する画像を作成しています。ユーザーがボタンをクリックすると、 フォームがサーバーに送信されます。見てみましょう。

画像ボタンとは

画像ボタンは、 タグ内に タグを配置することで作成され、画像が埋め込まれたクリック可能な HTML ボタンが作成されます。

タグ

タグを使用すると、HTML ページに画像を含めることができます。画像は実際には Web ページに埋め込まれません。代わりに、所定のパスを介して Web ページに接続されます。タグは 2 つの必須属性、つまり src で構成されますおよび alt.

＃＃＃構文＃＃＃

タグの構文は次のとおりです

リーリー

タグ

クリック可能なボタンは、 タグによって定義されます。テキスト (および 、、、
、 などのタグ) を挿入できます。など) 要素内。 要素で作成されたボタンでは、それは実現できません!

HTML5 で画像ボタンを理解するための例を見てみましょう。

例 1

以下の例では、単純な画像ボタンを作成しています。

リーリー

スクリプトが実行されると、Web ページ上のプロンプトとともに、テキストを含む画像ボタンを表示する出力が生成されます。

ユーザーが画像ボタンをクリックすると、イベントがトリガーされ、「動物を狩らないでください」という警告が表示されます。

例 2

以下の例では、 を使用して画像ボタンを作成します。

リーリー

スクリプトが実行されると、Web ページ上の画像ボタンとともにユーザー名とパスワードの入力フィールドを表示する出力が生成されます。ユーザーが画像ボタンをクリックすると、フォームがサーバーに送信されます。

例 3

以下の例では、プレースホルダーと リーリー 上記のスクリプトを実行すると、出力ウィンドウがポップアップ表示され、Web ページ上の画像ボタンとともに電子メールを入力するためのプレースホルダーが提供されたサインインが表示されます。

例 4

以下では画像ボタンを作成していますが、 タグ内に タグを挿入します。 リーリー

上記のスクリプトを実行すると、Web ページ上にテキストを含む画像ボタンが生成されます。

以上がHTML5を使用した画像ボタンの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。