Artikel HTML: Bagaimana untuk melaksanakan kesan kotak input dalam halaman web (penjelasan kod terperinci)-html tutorial-php.cn

Artikel HTML: Bagaimana untuk melaksanakan kesan kotak input dalam halaman web (penjelasan kod terperinci)

奋力向前

Lepaskan： 2021-08-17 17:06:00

asal

18412 orang telah melayarinya

Dalam artikel sebelumnya "Ajar anda langkah demi langkah untuk menambah senarai tersusun dan senarai tidak tersusun pada teks html (penjelasan kod terperinci) ", saya memperkenalkan anda cara menggunakan html untuk menambah senarai tersusun kepada teks dengan senarai tidak tersusun. Artikel berikut akan memperkenalkan kepada anda cara melaksanakan kesan kotak input dalam halaman web HTML Mari kita lihat cara melakukannya bersama-sama.

Artikel HTML: Bagaimana untuk melaksanakan kesan kotak input dalam halaman web (penjelasan kod terperinci)

<input> Spesifikasi teg: kumpulkan maklumat pengguna dan medan input dalam pelbagai bentuk, seperti: medan teks, kotak semak, butang radio, dsb.

Cara menambah kotak input

<input type="">Jenis ini memberitahu anda jenis teks tersebut. Contohnya, jenis teks txt ialah jenis lalai contoh kod.

Contoh kod

<body>
<input type="text">
</body>

Salin selepas log masuk

Kesan kod

Kod telah selesai. Saya percaya semua orang sudah biasa dengan ini. Ini adalah kotak input. 

Contoh kod

<body>
<p>用户名：</p>
<input type="text">
</body>

Salin selepas log masuk

Kesan kod

Anda boleh melihat nama pengguna, tetapi akan ada sesuatu selepas nama pengguna, tambah kata laluan, kami menggunakan untuk menjadikannya lebih mudah untuk dilihat, dan menjadikannya satu baris. <div>

Contoh kod

<body>
<div>
用户名：
<input type="text">
</div> 
</body>

Salin selepas log masuk

Kesan kod

Hampir sama apabila ia selesai Ia keadaan sedemikian dan adakah terdapat kata laluan

Contoh kod

<body>
<div>
用户名：
<input type="text">
</div> 
<div>
密码：
<input type="text">
</div> 
</body>

Salin selepas log masuk

Kesan kod

Agak tidak sesuai kerana semua orang boleh melihat kata laluan, tetapi biasanya kata laluan itu tidak kelihatan. Gunakan untuk mencapai kesan kata laluan. password

Contoh kod

密码：
<input type="password">

Salin selepas log masuk

Kesan kod

Kata laluan hampir seperti status A ini, perkara yang agak biasa di halaman web ini. Bagaimana untuk melaksanakan kotak semak seterusnya? Anda boleh menggunakan untuk mencapai checkbox

contoh kod

<div>
1选项
<input type="checkbox">
2选项
<input type="checkbox">
3选项
<input type="checkbox">
</div>

Salin selepas log masuk

kesan kod

Ini adalah kotak semak Seterusnya, mari kita bercakap tentang butang radio Ini lebih biasa digunakan di Internet kotak pilihan. radio

Contoh kod

单选：
<input type="radio">

Salin selepas log masuk

Kesan kod

Selain itu radio, Warna juga merupakan perkara yang agak penting.

Contoh kod

<div>
<input type="color">
</div>

Salin selepas log masuk

Kesan kod

Seperti yang anda lihat, ini adalah sesuatu yang menarik. Ia boleh menukar warna secara langsung.

ok, selesai!

Pembelajaran yang disyorkan:

Tutorial video html

Atas ialah kandungan terperinci Artikel HTML: Bagaimana untuk melaksanakan kesan kotak input dalam halaman web (penjelasan kod terperinci). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!