Bagaimana untuk menggayakan kotak teks dalam HTML

PHPz
Lepaskan: 2023-04-13 11:13:50
asal
3353 orang telah melayarinya

Dalam reka bentuk web, kotak teks ialah elemen yang biasa digunakan yang membolehkan pengguna memasukkan maklumat pada halaman. Artikel ini akan memperkenalkan cara menyediakan kotak teks dalam HTML.

  1. Gunakan teg

Untuk membuat kotak teks, gunakan teg Berikut ialah contoh asas:

<input type="text" name="username">
Salin selepas log masuk

Dalam contoh ini, kami mencipta kotak teks dan menamakannya "nama pengguna".

  1. Tetapkan saiz kotak teks dan panjang maksimum

Anda boleh menggunakan atribut "saiz" untuk menetapkan saiz kotak teks, contohnya:

<input type="text" name="username" size="30">
Salin selepas log masuk

Dalam contoh ini, kami menetapkan saiz kotak teks kepada 30 aksara lebar.

Selain itu, anda juga boleh menggunakan atribut "maxlength" untuk menetapkan panjang maksimum kotak teks, contohnya:

<input type="text" name="username" maxlength="20">
Salin selepas log masuk

Dalam contoh ini, kami menetapkan panjang maksimum bagi kotak teks kepada 20 aksara.

  1. Tetapkan nilai lalai dan pemegang tempat

Anda boleh menggunakan atribut "nilai" untuk menetapkan nilai lalai kotak teks, contohnya:

<input type="text" name="username" value="请输入用户名">
Salin selepas log masuk

dalam Dalam contoh ini, kami menetapkan nilai lalai kotak teks kepada "Sila masukkan nama pengguna anda".

Selain itu, anda juga boleh menggunakan atribut "pemegang tempat" untuk menetapkan pemegang tempat bagi kotak teks, contohnya:

<input type="text" name="username" placeholder="请输入用户名">
Salin selepas log masuk

Dalam contoh ini, kami menetapkan pemegang tempat bagi teks kotak ke "Sila masukkan nama pengguna". Pemegang tempat akan hilang secara automatik apabila pengguna memasuki kotak teks.

  1. Gunakan teg