Detaillierte Erläuterung der Verwendung des

黄舟

Freigeben： 2017-06-20 13:40:56

Original

9908 Leute haben es durchsucht

Einführung in Schaltflächen: Sie wissen: Schaltfläche ist eine Schaltfläche, aber es gibt auch eine Schaltfläche, die im Formular definiert werden kann. Wir wissen, dass es sich bei um eine Schaltfläche handelt Auch auf der Webseite erstellt. Worüber ich jetzt sprechen möchte, ist der Unterschied zwischen der Schaltflächenbeschriftung und der Beschriftung in der Eingabe. Natürlich bietet uns dieses Tag leistungsfähigere Funktionen. Wir können die Schaltfläche festlegen, den Text auf der Schaltfläche festlegen und sogar Bilder laden usw. Multimedia In HTML5 wurden dem Schaltflächen-Tag einige Attribute hinzugefügt. wie Autofokus, deaktiviert, Form, Formation, Formentyp, Formmethode, Fornovalidat, Formziel, Name, Typ, Wert, um dieses Tag zu veranschaulichen

<!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="Detaillierte Erläuterung der Verwendung des <button>-Tags in HTML" >
   </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>

Nach dem Login kopieren

1 >

Normale Schaltflächen müssen im Allgemeinen mit

JavaScript-Skripten kombiniert werden, um das Formular zu implementieren.

Syntax:

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

Nach dem Login kopieren

Beschreibung:

Der Wert von value ist der auf der Schaltfläche angezeigte Text, onclick ist das Ereignis der normalen Schaltfläche, wir Wir machen das. Es wird im JavaScript-Einführungs-Tutorial ausführlich erklärt, daher ist es für jeden hier in Ordnung, es zu verstehen.

Zum Beispiel:

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

Nach dem Login kopieren

Der Vorschaueffekt im Browser ist wie folgt:

Detaillierte Erläuterung der Verwendung des <button>-Tags in HTML

Wenn Sie dann auf die Schaltfläche klicken, Es erscheint ein Eingabeaufforderungsfeld:

Detaillierte Erläuterung der Verwendung des <button>-Tags in HTML

2. Senden-Schaltfläche

Die Senden-Schaltfläche kann als gewöhnliche Schaltfläche mit Sonderfunktionen betrachtet werden Mit der Schaltfläche kann der Formularinhalt zur Verarbeitung an den Server übermittelt werden.

Syntax:

<input type="submit" value="提交按钮的取值"/>

Nach dem Login kopieren

Beschreibung:

Der Wert von value ist der auf der Schaltfläche angezeigte Text. Ein Beispiel finden Sie im Beispiel unter „Reset-Taste“.

Der wahre Nutzen der Schaltfläche „Senden“ kann erst wirklich verstanden werden, wenn wir uns mit der Back-End-Technologie vertraut machen.

3. Zurücksetzen der Schaltfläche „Zurücksetzen“

Die Schaltfläche „Zurücksetzen“ kann auch als gewöhnliche Schaltfläche mit Sonderfunktionen betrachtet werden. Durch Klicken auf die Schaltfläche „Zurücksetzen“ können die vom Benutzer im Seitenformular eingegebenen Informationen gelöscht werden.

Syntax:

<input type="reset" value="重置按钮的取值"/>

Nach dem Login kopieren

Beschreibung:

Der Wert von value ist der auf der Schaltfläche angezeigte Text.

Zum Beispiel:

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

Nach dem Login kopieren

Der Vorschaueffekt im Browser ist wie folgt:

Detaillierte Erläuterung der Verwendung des <button>-Tags in HTML

Sie geben Zeichen >Drücken Sie anschließend die Reset-Taste und Sie werden feststellen, dass der Inhalt des Textfelds gelöscht ist! Dies ist, was die Reset-Taste tut.

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung des