Bagaimana cara memberikan tindakan pada tombol di html?

Halaman ini menunjukkan cara membuat tombol HTML onclick dan menatanya menggunakan CSS menjadi berbagai warna dan ukuran

Cara membuat aksi tombol di HTML

Kami menunjukkan kepada Anda formulir dengan dua tindakan tombol kirim. Tindakan tombol kirim pertama mengirimkan data formulir ke "action_first_page. php", dan yang kedua kirim tombol aksi ke "action_second_page. php"

Contoh 1

<. DOCTYPE html>

Tombol diklik

First name:

Last name:

Submit

Kirim ke halaman lain

Periksa contoh ini >>

Kode html di atas akan menampilkan hasil onclick tombol HTML ini

Klik tombol HTML, gaya tombol

Klik tombol

Nama.
Nama keluarga.
Kirim
Kirim ke halaman lain

Ukuran tombol HTML - Cara membuat ukuran tombol

Itu tidak menghindari CSS, itu hanya menggunakan CSS sebaris alih-alih lembar gaya eksternal

Contoh2

<. DOCTYPE html>





Teks Anda di sini /
Teks Anda di sini /
Teks Anda di sini

Periksa contoh ini >>

Kode HTML ini akan menghasilkan hasil sebagai berikut -

Teks Anda di sini. Teks Anda di sini. Teks Anda di sini

Tindakan tombol HTML, cara membuat ukuran tombol HTML
Tindakan tombol HTML - Cara membuat tindakan tombol HTML, ukuran - tutorial html

Ada beberapa cara untuk membuat tombol HTML, yang berfungsi seperti tautan (mis. e. , mengkliknya pengguna dialihkan ke URL yang ditentukan). Anda dapat memilih salah satu metode berikut untuk menambahkan tautan ke tombol HTML

Anda dapat menambahkan acara onclick sebaris ke tag

Ini mungkin tidak berfungsi jika tombolnya ada di dalam a

elemen

  
    Title of the document
  
  
    

Click Here

Dimungkinkan juga untuk menambahkan acara onclick sebaris ke tag di dalam elemen

  
    Title of the document
  
  
    
      
    
  

_

Tautan tidak akan berfungsi saat JavaScript dinonaktifkan, dan mesin telusur mungkin mengabaikan tautan semacam ini

Cara lain untuk membuat tombol yang berfungsi seperti tautan adalah dengan menggunakan atribut action atau formaction di dalam

elemen

   
      Title of the document
   
   
      
         Click me
      
   

Untuk membuka tautan di tab baru, tambahkan target="_blank"

   
      Title of the document
   
   
      
         Click me
      
   

Karena tidak ada formulir dan tidak ada data yang dikirimkan, ini mungkin salah secara semantik. Namun, markup ini valid

   
      Title of the document
   
   
      
         Click me
      
   

Atribut formaction hanya digunakan dengan tombol yang memiliki type="submit". Karena atribut ini spesifik untuk HTML5, dukungannya di browser lama mungkin buruk

Tambahkan tautan yang ditata sebagai tombol dengan properti CSS. Atribut href adalah atribut wajib dari tag. Ini menentukan tautan di halaman web atau tempat di halaman yang sama tempat pengguna menavigasi setelah mengklik tautan

Dapatkan penghasilan dengan keahlian HTML Anda

Daftar dan kami akan mengirimkan Anda peluang freelance terbaik langsung ke kotak masuk Anda
Kami sedang membangun pasar lepas swalayan terbesar untuk orang-orang seperti Anda

Elemen HTML _ adalah elemen interaktif yang diaktifkan oleh pengguna dengan mouse, keyboard, jari, perintah suara, atau teknologi bantuan lainnya. Setelah diaktifkan, ia kemudian melakukan tindakan, seperti mengirimkan formulir atau membuka dialog

Secara default, tombol HTML ditampilkan dalam gaya yang menyerupai platform tempat agen pengguna berjalan, tetapi Anda dapat mengubah tampilan tombol dengan CSS

Atribut elemen ini termasuk atribut global

Atribut Boolean ini menentukan bahwa tombol harus memiliki fokus input saat halaman dimuat. Hanya satu elemen dalam dokumen yang dapat memiliki atribut ini

Non-standar

Atribut ini pada

tidak standar dan spesifik untuk Firefox. Tidak seperti browser lain, Firefox mempertahankan status nonaktif dinamis dari di seluruh pemuatan halaman. Pengaturan autocomplete="off" pada tombol menonaktifkan fitur ini;

Atribut Boolean ini mencegah pengguna berinteraksi dengan tombol. itu tidak bisa ditekan atau difokuskan

Firefox, tidak seperti browser lain, mempertahankan status nonaktif dinamis dari

di seluruh pemuatan halaman. Gunakan atribut untuk mengontrol fitur ini

Elemen

<button name="favorite">
  <svg aria-hidden="true" viewBox="0 0 10 10">
    <path d="M7 9L5 8 3 9V6L1 4h3l1-3 1 3h3L7 6z" />
  svg>
  Add to favorites
button>

_2 untuk mengasosiasikan tombol dengan (pemilik formulirnya). Nilai atribut ini harus

<button name="favorite">
  <svg aria-hidden="true" viewBox="0 0 10 10">
    <path d="M7 9L5 8 3 9V6L1 4h3l1-3 1 3h3L7 6z" />
  svg>
  Add to favorites
button>

_3 dari

<button name="favorite">
  <svg aria-hidden="true" viewBox="0 0 10 10">
    <path d="M7 9L5 8 3 9V6L1 4h3l1-3 1 3h3L7 6z" />
  svg>
  Add to favorites
button>

2 dalam dokumen yang sama. (Jika atribut ini tidak disetel, dikaitkan dengan elemen

<button name="favorite">
  <svg aria-hidden="true" viewBox="0 0 10 10">
    <path d="M7 9L5 8 3 9V6L1 4h3l1-3 1 3h3L7 6z" />
  svg>
  Add to favorites
button>

2 leluhurnya, jika ada. )

Atribut ini memungkinkan Anda mengaitkan

elemen ke

<button name="favorite">
  <svg aria-hidden="true" viewBox="0 0 10 10">
    <path d="M7 9L5 8 3 9V6L1 4h3l1-3 1 3h3L7 6z" />
  svg>
  Add to favorites
button>

2 di mana saja dalam dokumen, tidak hanya di dalam

<button name="favorite">
  <svg aria-hidden="true" viewBox="0 0 10 10">
    <path d="M7 9L5 8 3 9V6L1 4h3l1-3 1 3h3L7 6z" />
  svg>
  Add to favorites
button>

2. Itu juga dapat menimpa elemen

<button name="favorite">
  <svg aria-hidden="true" viewBox="0 0 10 10">
    <path d="M7 9L5 8 3 9V6L1 4h3l1-3 1 3h3L7 6z" />
  svg>
  Add to favorites
button>

2 leluhur

URL yang memproses informasi yang dikirimkan oleh tombol. Menimpa atribut pemilik formulir tombol. Tidak melakukan apa-apa jika tidak ada pemilik formulir

Jika tombolnya adalah tombol kirim (ada di dalam/terkait dengan

<button name="favorite">
  <svg aria-hidden="true" viewBox="0 0 10 10">
    <path d="M7 9L5 8 3 9V6L1 4h3l1-3 1 3h3L7 6z" />
  svg>
  Add to favorites
button>

2 dan tidak memiliki 5), tentukan cara menyandikan data formulir yang dikirimkan. Nilai yang mungkin

6. Default jika atribut tidak digunakan

7. Digunakan untuk mengirim elemen _8 dengan atributnya disetel ke autofocus0

autofocus1. Ditentukan sebagai bantuan debugging;

Jika atribut ini ditentukan, atribut pemilik formulir tombol akan diganti

Jika tombolnya adalah tombol kirim (ada di dalam/terkait dengan

<button name="favorite">
  <svg aria-hidden="true" viewBox="0 0 10 10">
    <path d="M7 9L5 8 3 9V6L1 4h3l1-3 1 3h3L7 6z" />
  svg>
  Add to favorites
button>

2 dan tidak memiliki 5), atribut ini menentukan metode HTTP yang digunakan untuk mengirimkan formulir. Nilai yang mungkin

• autofocus6. Data dari formulir dimasukkan ke dalam isi permintaan HTTP saat dikirim ke server. Gunakan saat formulir berisi informasi yang seharusnya tidak dipublikasikan, seperti kredensial masuk
• autofocus7. Data formulir ditambahkan ke URL

2 formulir, dengan autofocus9 sebagai pemisah, dan URL yang dihasilkan dikirim ke server. Gunakan metode ini jika formulir tidak memiliki efek samping, seperti formulir pencarian

Jika ditentukan, atribut ini menggantikan atribut pemilik formulir tombol

Jika tombolnya adalah tombol kirim, atribut Boolean ini menentukan bahwa formulir tidak akan divalidasi saat dikirimkan. Jika atribut ini ditentukan, atribut pemilik formulir tombol akan diganti

Atribut ini juga tersedia pada elemen autocomplete_3 dan autocomplete4

Jika tombolnya adalah tombol kirim, atribut ini adalah nama yang ditentukan penulis atau kata kunci standar dengan awalan garis bawah yang menunjukkan tempat untuk menampilkan respons dari pengiriman formulir. Ini adalah autocomplete_6 dari, atau kata kunci untuk, konteks penelusuran (tab, jendela, atau autocomplete7). Jika atribut ini ditentukan, atribut pemilik formulir tombol akan diganti. Kata kunci berikut memiliki arti khusus

• autocomplete_9. Muat respons ke dalam konteks penelusuran yang sama dengan yang sekarang. Ini adalah default jika atribut tidak ditentukan

0. Muat respons ke dalam konteks penjelajahan baru tanpa nama — biasanya tab atau jendela baru, bergantung pada pengaturan browser pengguna

1. Muat respons ke dalam konteks penjelajahan induk dari yang sekarang. Jika tidak ada orang tua, opsi ini berlaku sama seperti autocomplete9

3. Muat respons ke dalam konteks penjelajahan tingkat atas (yaitu, konteks penjelajahan yang merupakan leluhur dari konteks saat ini, dan tidak memiliki induk). Jika tidak ada orang tua, opsi ini berlaku sama seperti autocomplete9

Nama tombol, dikirimkan berpasangan dengan

6 tombol sebagai bagian dari data formulir, saat tombol tersebut digunakan untuk mengirimkan formulir

Perilaku default tombol. Nilai yang mungkin adalah

8. Tombol mengirimkan data formulir ke server. Ini adalah default jika atribut tidak ditentukan untuk tombol yang terkait dengan

<button name="favorite">
  <svg aria-hidden="true" viewBox="0 0 10 10">
    <path d="M7 9L5 8 3 9V6L1 4h3l1-3 1 3h3L7 6z" />
  svg>
  Add to favorites
button>

2, atau jika atribut adalah nilai kosong atau tidak valid

0: The button resets all the controls to their initial values, like . (This behavior tends to annoy users.)

1. Tombol tidak memiliki perilaku default, dan tidak melakukan apa pun saat ditekan secara default. Itu dapat membuat skrip sisi klien mendengarkan peristiwa elemen, yang dipicu saat peristiwa terjadi

Menentukan nilai yang terkait dengan autocomplete6 tombol saat dikirimkan dengan data formulir. Nilai ini diteruskan ke server dalam parameter saat formulir dikirimkan menggunakan tombol ini

Tombol kirim dengan atribut

_1 ditetapkan, tetapi tanpa formulir terkait tidak melakukan apa-apa. Anda harus menyetel pemilik formulir, baik dengan membungkusnya dalam

<button name="favorite">
  <svg aria-hidden="true" viewBox="0 0 10 10">
    <path d="M7 9L5 8 3 9V6L1 4h3l1-3 1 3h3L7 6z" />
  svg>
  Add to favorites
button>

2 atau menyetel atribut

<button name="favorite">
  <svg aria-hidden="true" viewBox="0 0 10 10">
    <path d="M7 9L5 8 3 9V6L1 4h3l1-3 1 3h3L7 6z" />
  svg>
  Add to favorites
button>

1 ke id formulir

elemen jauh lebih mudah ditata daripada 8 elemen. Anda dapat menambahkan konten HTML bagian dalam (pikirkan 9, autocomplete="off"0, atau bahkan autocomplete="off"1), dan gunakan autocomplete="off"2 dan autocomplete="off"3 elemen semu untuk rendering yang kompleks

Jika tombol Anda bukan untuk mengirimkan data formulir ke server, pastikan untuk menyetel atribut

9 ke 1. Jika tidak, mereka akan mencoba mengirimkan data formulir dan memuat respons (yang tidak ada), kemungkinan merusak status dokumen saat ini

Meskipun autocomplete="off"_6 tidak memiliki perilaku default, event handler dapat dituliskan untuk memicu perilaku. Tombol yang diaktifkan dapat melakukan tindakan yang dapat diprogram menggunakan JavaScript, seperti menghapus item dari daftar

<button name="button">Press mebutton>

Tombol yang hanya menampilkan ikon untuk mewakili tidak memiliki nama yang dapat diakses. Nama yang dapat diakses memberikan informasi untuk teknologi bantuan, seperti pembaca layar, untuk mengakses saat mereka mengurai dokumen dan membuatnya. Teknologi bantu kemudian menggunakan pohon aksesibilitas untuk menavigasi dan memanipulasi konten halaman

Untuk memberikan tombol ikon nama yang dapat diakses, masukkan teks ke dalam elemen

yang secara singkat menjelaskan fungsi tombol

Contoh

<button name="favorite">
  <svg aria-hidden="true" viewBox="0 0 10 10">
    <path d="M7 9L5 8 3 9V6L1 4h3l1-3 1 3h3L7 6z" />
  svg>
  Add to favorites
button>

Jika Anda ingin menyembunyikan teks tombol secara visual, cara yang dapat diakses untuk melakukannya adalah dengan menghapusnya secara visual dari layar, tetapi tetap dapat diuraikan oleh teknologi bantuan

Namun, perlu dicatat bahwa membiarkan teks tombol terlihat secara visual dapat membantu orang yang mungkin tidak terbiasa dengan arti ikon atau memahami tujuan tombol. Ini sangat relevan untuk orang yang tidak canggih secara teknologi, atau yang mungkin memiliki interpretasi budaya yang berbeda untuk ikon yang digunakan tombol

• Apa itu nama yang dapat diakses?. Grup Paciello
• Memahami Kriteria Sukses 4. 1. 2. W3C Memahami WCAG 2. 0

Ukuran

Elemen interaktif seperti tombol harus menyediakan area yang cukup luas sehingga mudah untuk mengaktifkannya. Ini membantu berbagai orang, termasuk orang dengan masalah kontrol motorik dan orang yang menggunakan bentuk masukan yang tidak akurat seperti stilus atau jari. Disarankan ukuran interaktif minimum 44×44

• Memahami Kriteria Sukses 2. 5. 5. Ukuran Sasaran. W3C Memahami WCAG 2. 1
• Ukuran Sasaran dan 2. 5. 5. Adrian Roseli
• Tes cepat. Target sentuh besar - Proyek A11Y

Kedekatan

Konten interaktif dalam jumlah besar — ​​termasuk tombol — ditempatkan dalam jarak visual yang dekat satu sama lain harus memiliki ruang yang memisahkannya. Spasi ini bermanfaat bagi orang yang mengalami masalah kontrol motorik, yang mungkin secara tidak sengaja mengaktifkan konten interaktif yang salah

Penspasian dapat dibuat menggunakan properti CSS seperti autocomplete="off"8

• Tremor tangan dan masalah tombol raksasa - Axess Lab

Untuk menjelaskan status tombol, atribut ARIA yang benar untuk digunakan adalah autocomplete="off"9 dan bukan disabled0 atau disabled1. Untuk mengetahui lebih lanjut, baca informasi tentang peran tombol ARIA

Firefox akan menambahkan batas bertitik kecil pada tombol fokus. Perbatasan ini dideklarasikan melalui CSS di lembar gaya browser, tetapi Anda dapat menimpanya untuk menambahkan gaya fokus Anda sendiri menggunakan disabled2

Jika dikesampingkan, penting untuk memastikan bahwa perubahan keadaan saat fokus dipindahkan ke tombol cukup tinggi sehingga orang yang mengalami kondisi penglihatan rendah akan dapat melihatnya.

Rasio kontras warna ditentukan dengan membandingkan luminositas teks tombol dan nilai warna latar belakang dibandingkan dengan latar belakang tombol ditempatkan. Untuk memenuhi Pedoman Aksesibilitas Konten Web (WCAG) saat ini, rasio 4. 5. 1 diperlukan untuk konten teks dan 3. 1 untuk teks besar. (Teks besar didefinisikan sebagai 18. 66px dan disabled3 atau lebih besar, atau 24px atau lebih besar. )

• WebAIM. Pemeriksa Kontras Warna
• Memahami Kriteria Sukses 1. 4. 3. W3C Memahami WCAG 2. 0

Apakah mengklik jenis tombol

atau 8 menyebabkannya (secara default) menjadi terfokus bervariasi menurut browser dan OS. Sebagian besar browser memang memberikan fokus pada tombol yang diklik, tetapi Safari tidak, karena desainnya

Kategori konten, , , , , dan elemen, konten yang gamblang. Konten yang diizinkan tetapi tidak boleh ada Tag omissionNone, tag awal dan akhir wajib. Orang tua yang diizinkan Elemen apa pun yang menerima. Peran ARIA implisitdisabled6 Peran ARIA yang Dikeretdisabled7, disabled8, disabled9,

, 1, ________20___2, ________20___3, 4, _______________2, 3, ________20_____4, ________20______5, 3, ______________5, ______________________________________________________.

Bagaimana cara melakukan tindakan pada tombol di HTML?

Atribut formaction menentukan ke mana mengirim data formulir saat formulir dikirimkan . Atribut ini menimpa atribut tindakan formulir. Atribut formaction hanya digunakan untuk tombol dengan type="submit".

Bisakah tombol memiliki tindakan dalam HTML?

Dalam HTML, tombol adalah elemen yang dapat diklik yang mengambil tindakan . Mereka dapat mengirimkan formulir, mengatur ulang formulir, atau menjalankan fungsi JavaScript. Tombol didefinisikan dengan tag

Bisakah kita menambahkan tindakan di tombol?

Letakkan tombol tindakan di slide Anda . Klik lokasi di slide, lalu seret untuk menggambar bentuk tombol. On the Insert tab, click Shapes, and then under Action Buttons at the bottom of the menu, click the button shape that you want to add. Click a location on the slide, and then drag to draw the shape for the button.

Bisakah sebuah tombol memiliki atribut tindakan?

Anda tidak dapat menggunakan atribut tindakan pada tombol ini hanya berfungsi dengan formulir HTML. type="submit" digunakan pada elemen formulir untuk mengirimkan data formulir. Elemen dengan tipe ini akan muncul sebagai tombol secara default.

Bagaimana cara membuat tombol interaktif dalam HTML?

Elemen , yang dapat diletakkan di mana saja di halaman web. Browser menyajikan tombol ini sesuai dengan platform host. Namun, tampilan tombol HTML dapat diubah dengan CSS.

Bagaimana cara membuat tombol dapat diklik?

Tag . Di dalam elemen