が作成されると、ボタンが作成されます。ここで言いたいのは、このボタンのラベルと入力のラベルの違いは何ですか?ということです。もちろん、このタグはボタンを設定したり、ボタンにテキストを設定したり、画像やその他のマルチメディアを読み込んだりするためのより強力な機能を提供します。HTML5 では、button タグに autofocus や dis などの属性が追加されています。"/> が作成されると、ボタンが作成されます。ここで言いたいのは、このボタンのラベルと入力のラベルの違いは何ですか?ということです。もちろん、このタグはボタンを設定したり、ボタンにテキストを設定したり、画像やその他のマルチメディアを読み込んだりするためのより強力な機能を提供します。HTML5 では、button タグに autofocus や dis などの属性が追加されています。">

ホームページ  >  記事  >  ウェブフロントエンド  >  HTMLの

HTMLの

黄舟
黄舟オリジナル
2017-06-20 13:40:569960ブラウズ

button ボタンの概要: button はボタンを定義するものですが、 のときにボタンも作成されることがわかります。ここで私が話しているのは、ボタンのラベルと入力のラベルの違いです。もちろん、このタグは、ボタンを設定したり、ボタンにテキストを設定したり、画像を読み込んだりすることもできます。 マルチメディア HTML5 では、ボタン タグにオートフォーカスなどのいくつかの属性が追加されました。無効、フォーム、フォーメーション、formenctype、formmethod、fornovalidate、formtarget、name、type、value このラベルを説明するために、いくつかの小さなケースを実行してみましょう

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
<title></title>
</head>
<body>
   <button type="button">这是一个按钮</button>
    <hr/>
   <br/>
   <!-- 这个地方告诉我们在button之间的文本都会写到button这个按钮上面 -->
   <button type="button">
   <img  src="https://www.baidu.com/img/bd_logo1.png"    style="max-width:90%"  style="max-width:90%" alt="HTMLの<button>タグの使い方を詳しく解説" >
   </button>
   <!-- 这一个部分告诉我们可以将按钮设置为图画,在按钮上增加图片 -->
   <hr/>
   <button type="button" autofocus="autofocus">已经获得焦点</button>


   <!--这个地方定义一个获得焦点的按钮,获得焦点就和鼠标在上面滑动一样-->
   <hr/>
   <button type="button" disabled="disabled">失效</button>
   <!-- 在这个地方定义一个失效的按钮,已经禁用,其实就是在button中增加一个属性
   并且将值设置为disabled -->
    <form action="http://www.w3school.com.cn/example/html/form_action.asp"
    method="get">
    请选择你喜爱的项目:
    <button name="subject" type="submit" value="HTML">HTML</button>
    <button name="subject" type="subject" value="CSS">CSS</button>
     </form>
        <!--在这个地方用到form和button进行结合使用,其实form提供的是
        一个来链接,button的属性是提交submit,而且method方法是得到
        应该注意的是button标签尽量少和form一起使用,因为不同的浏览器提交的
        内容是不同的,有的 是value的值,有的 是button之间的内容  -->


</body>
</html>

1. 通常のボタン button

通常のボタンは、JavaScript と一致する必要があります。 フォームを実装するスクリプト。

文法:

<input type="button" value="普通按钮的取值" onclick="JavaScript脚本程序"/>

説明:

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

例:

<!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>

ブラウザでのプレビュー効果は次のとおりです:

HTMLの<button>タグの使い方を詳しく解説

次に、ボタンをクリックすると、プロンプトボックスがポップアップ表示されます:

HTMLの<button>タグの使い方を詳しく解説

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>

ブラウザでのプレビュー効果は次のとおりです:

HTMLの<button>タグの使い方を詳しく解説

テキストボックスに文字を入力した後、リセットボタンを押すと、テキストボックスの内容がクリアされることがわかります。 !これがリセットボタンの働きです。

以上がHTMLの

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