Εκπαιδευτικός Οδηγός για το Ετικέτα <button> του HTML

  • Προηγούμενη σελίδα <br>
  • Επόμενη σελίδα <canvas>

Ορισμός και χρήση

<button> ετικέτα ορίζεται ο κlickable κουμπί.

στο <button> Στο εσωτερικό του στοιχείου, μπορείτε να τοποθετήσετε κείμενο (και ετικέτες όπως <i>, <b>, <strong>, <br>, <img> κ.λπ.). Αυτό είναι με <input> Δεν μπορεί να κάνει το κουμπί δημιουργίας στοιχείων!

Συμβουλή:Πάντα καθορίστε για το κουμπί <button> έλεγχος Ατρύπυο τύπουγια να ενημερώσετε τον περιηγητή για τον τύπο του κουμπιού.

Συμβουλή:Μπορείτε να προσθέσετε στυλ στο κουμπί με CSS! Εξετάστε τα παραδείγματα παρακάτω ή επισκεφθείτε τον Εκμάθηση CSS για κουμπιά。

Περιγραφή

<button> έλεγχος με <input type="button"> παρέχει πιο ισχυρές λειτουργίες και πιο πλούσια περιεχόμενα.<button> Καθώς </button> Όλα τα περιεχόμενα μεταξύ των ετικετών είναι το περιεχόμενο του κουμπιού, συμπεριλαμβανομένων οποιωνδήποτε αποδεκτών κειμένων, όπως κείμενο ή πολυμέσα. Για παράδειγμα, μπορούμε να συμπεριλάβουμε μια εικόνα και σχετικό κείμενο, χρησιμοποιώντας τα για να δημιουργήσουμε μια ελκυστική εικόνα ετικέτας στο κουμπί.

Ο μοναδικός εγκλωβισμένος στοιχείο που δεν πρέπει να χρησιμοποιηθεί είναι η εικόνα χάρτη, επειδή οι ενέργειες που είναι ευαίσθητες στο ποντίκι και το πλήκτρο θα διαταράξουν τη συμπεριφορά του κουμπιού φόρμας.

Πάντα καθορίστε για το κουμπί Ατρύπυο τύπου. Η προεπιλεγμένη τιμή του Internet Explorer είναι "button"ενώ η προεπιλεγμένη τιμή σε άλλους περιηγητές (περιλαμβανομένων των προτύπων του W3C) είναι "submit"。

Για περισσότερες πληροφορίες δείτε:

Εγχειρίδιο HTML DOM:Button αντικείμενο

Εκμάθηση CSS:Ρύθμιση του στυλ του κουμπιού

Παράδειγμα

Καθορίζεται έτσι ο κλικable κουμπί:

<button type="button">Κάνε κλικ εδώ!</button>

亲自试一试

Συμβουλή:Περισσότερες παραδείγματα παρέχονται στο κάτω μέρος της σελίδας.

Ατрибούτο

Ατрибούτο Αξία Περιγραφή
autofocus autofocus Καθορίζει ότι το κουμπί πρέπει να αποκτήσει αυτόματα το εστιασμό κατά την φόρτωση της σελίδας.
disabled disabled Καθορίζει ότι το κουμπί πρέπει να είναι απενεργοποιημένο.
form form_id Καθορίζει σε ποια φόρμα ανήκει το κουμπί.
formaction URL

Καθορίζει πού θα αποσταλούν τα δεδομένα της φόρμας κατά την υποβολή.

Μόνο για type="submit".
formenctype
  • application/x-www-form-urlencoded
  • multipart/form-data
  • text/plain

Καθορίζει πώς θα κωδικοποιηθούν τα δεδομένα της φόρμας πριν αποσταλούν στο διακομιστή.

Μόνο για type="submit".
formmethod
  • get
  • post

Καθορίζει πώς θα αποσταλούν τα δεδομένα της φόρμας (με ποιον HTTP μέθοδο).

Μόνο για type="submit".
formnovalidate formnovalidate

Καθορίζει ότι τα δεδομένα της φόρμας δεν πρέπει να ελεγχθούν κατά την υποβολή.

Μόνο για type="submit".
formtarget
  • Όνομα πλαισίου

Καθορίζει πού θα εμφανιστεί η απάντηση μετά την υποβολή της φόρμας.

Μόνο για type="submit".
name Όνομα Καθορίζει το όνομα του κουμπιού.
popovertarget element_id Καθορίζει το στοιχείο του αναδυόμενου παράθυρου που θα καλείται.
popovertargetaction
  • hide
  • show
  • toggle
 规定按钮被点击时对弹出窗口元素的操作。
type
  • button
  • reset
  • submit
 规定按钮的类型。
value 文本 规定按钮的初始值。

全局属性

<button> 标签还支持 HTML 中的全局属性。

事件属性

<button> 标签还支持 HTML 中的事件属性。

默认的 CSS 设置

无。

更多实例

例子 2

使用 CSS 设置按钮样式：

!DOCTYPE html
<html>
<head>
<style>
.button {
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}
.button1 {background-color: #4CAF50;} /* 绿色 */
.button2 {background-color: #008CBA;} /* 蓝色 */
</style>
</head>
<body>
<button class="button button1">绿色</button>
<button class="button button2">蓝色</button>
</body>
</html>

亲自试一试

例子 2

使用 CSS 设置按钮样式（带有悬停效果）：

!DOCTYPE html
<html>
<head>
<style>
.button {
  border: none;
  color: white;
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
}
.button1 {
  background-color: white;
  color: black;
  border: 2px solid #4CAF50;
}
.button1:hover {
  background-color: #4CAF50;
  color: white;
}
.button2 {
  background-color: white;
  color: black;
  border: 2px solid #008CBA;
}
.button2:hover {
  background-color: #008CBA;
  color: white;
}
</style>
</head>
<body>
<button class="button button1">绿色</button>
<button class="button button2">蓝色</button>
</body>
</html>

亲自试一试

浏览器支持

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Υποστήριξη Υποστήριξη Υποστήριξη Υποστήριξη Υποστήριξη
  • Προηγούμενη σελίδα <br>
  • Επόμενη σελίδα <canvas>