HTMLタグの使用法

Jun 16, 2017 pm 02:08 PM
button html ラベル 使用法

Webページでは、ボタンは通常のボタン、送信ボタン、リセットボタンの3種類に分けられます。

1. 通常のボタン ボタン

通常、フォームを実装するには、JavaScript スクリプトと組み合わせる必要があります。

構文:

<input type="button" value="普通按钮的取值" onclick="JavaScript脚本程序"/>
ログイン後にコピー

説明:

value の値はボタンに表示されるテキスト、onclick は通常のボタンのイベントです。これについては JavaScript 入門チュートリアルで詳しく説明しますので、理解できると思います。ここ。

例:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    单击按钮弹出对话框:<br/>
    <input type="button" value="按钮" onclick="alert(&#39;你点击了按钮!&#39;)">
</body>
</html>
ログイン後にコピー

2. 送信ボタン submit

送信ボタンをクリックすると、フォームの内容をサーバーに送信して処理することができます。

構文:

<input type="submit" value="提交按钮的取值"/>
ログイン後にコピー

説明:

value の値は、ボタンに表示されるテキストです。例については、「リセット ボタン」の例を参照してください。

送信ボタンの本当の有用性は、バックエンド技術を学ぶまで真に理解することはできません。

3. リセット ボタン リセット

リセット ボタンをクリックすると、ページ フォームにユーザーが入力した情報をクリアできます。

構文:

<input type="reset" value="重置按钮的取值"/>
ログイン後にコピー

説明:

value の値は、ボタンに表示されるテキストです。

例:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <form name="form1" method="post" action="index.html">
        账号:<input type="text"/><br/>
        密码:<input type="text"/><br/>
        <input type="submit" value="提交"/>
        <input type="reset" value="重置"/>
    </form>
</body>
</html>
ログイン後にコピー

テキストボックスに文字を入力してリセットボタンを押すと、テキストボックスの内容が消去されます。これがリセットボタンの働きです。

1. リセットボタンの誤解

上記から、リセットボタンはユーザーがフォームに入力した情報をクリアできることがわかりますが、リセットボタンは「現在のフォーム」のフォーム要素の内容しかクリアできません。 form タグの外側の form 要素は無効です。

例:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <form name="form1" method="post" action="index.html">
        账号:<input type="text"/><br/>
        密码:<input type="text"/><br/>
        <input type="submit" value="提交"/>
        <input type="reset" value="重置"/>
    </form>
    昵称:<input type="text"/><br/>
</body>
</html>
ログイン後にコピー

その後、

タグの外側のテキストボックス、つまりニックネームのテキストボックスに情報を入力してリセットボタンを押すと、無効であることがわかります。

結論: リセット ボタンは、現在の タグ内のフォーム要素の入力情報のみをクリアでき、現在の タグの外側のフォーム要素には影響しません。

ここで言及しておきますが、送信ボタンは現在の タグにも使用されます。

4. 通常のボタン、送信ボタン、リセット ボタンの違い

上記のことから、通常のボタンは通常、特殊な効果を実現するために JavaScript スクリプトと組み合わせられ、送信ボタンは主に現在の < ボタンを変換するために使用されます。 form> タグ内 フォーム入力情報は処理のためにサーバーに送信され、リセット ボタンは現在 タグ内にあるフォーム要素の入力情報をクリアします。

HTMLの入門段階では、これら3つのボタンの機能を完全に理解することは不可能です。パニックになる必要はありません。よく理解していなくても問題ありません。これには JavaScript と動的 Web ページが含まれるためです。後のコースを学習すれば明確に理解できるようになります。 HTMLの段階では、どのような種類のボタンがあるのか​​、ラベルのコードをどのように記述するのかだけを知る必要があります。非常に簡単です。

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

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

HTMLの表の境界線 HTMLの表の境界線 Sep 04, 2024 pm 04:49 PM

HTML の表の境界線に関するガイド。ここでは、HTML でのテーブルの境界線の例を示しながら、テーブル境界線を定義する複数の方法について説明します。

HTML 左マージン HTML 左マージン Sep 04, 2024 pm 04:48 PM

HTML マージン左のガイド。ここでは、HTML margin-left の概要とその例、およびそのコード実装について説明します。

HTML のネストされたテーブル HTML のネストされたテーブル Sep 04, 2024 pm 04:49 PM

これは、HTML でのネストされたテーブルのガイドです。ここでは、テーブル内にテーブルを作成する方法をそれぞれの例とともに説明します。

HTML テーブルのレイアウト HTML テーブルのレイアウト Sep 04, 2024 pm 04:54 PM

HTML テーブル レイアウトのガイド。ここでは、HTML テーブル レイアウトの値と例および出力について詳しく説明します。

HTML入力プレースホルダー HTML入力プレースホルダー Sep 04, 2024 pm 04:54 PM

HTML 入力プレースホルダーのガイド。ここでは、コードと出力とともに HTML 入力プレースホルダーの例について説明します。

HTML 順序付きリスト HTML 順序付きリスト Sep 04, 2024 pm 04:43 PM

HTML 順序付きリストのガイド。ここでは、HTML 順序付きリストと型の導入とその例についても説明します。

HTML 内のテキストの移動 HTML 内のテキストの移動 Sep 04, 2024 pm 04:45 PM

HTML でのテキストの移動に関するガイド。ここでは、概要、マーキー タグが構文でどのように機能するか、および実装例について説明します。

HTML の onclick ボタン HTML の onclick ボタン Sep 04, 2024 pm 04:49 PM

HTML オンクリック ボタンのガイド。ここでは、それらの紹介、動作、例、およびさまざまなイベントでの onclick イベントについてそれぞれ説明します。

See all articles