Bagaimana saya menggunakan html5 & lt; textarea & gt; elemen dan atributnya untuk input teks berbilang baris?

Menggunakan elemen HTML5 <textarea></textarea> untuk input teks berbilang baris

Elemen HTML5 <textarea></textarea> direka khusus untuk membuat medan input teks berbilang baris dalam bentuk web. Ia adalah elemen yang mudah namun berkuasa yang menyediakan cara yang mudah untuk membolehkan pengguna memasukkan dan mengedit sejumlah besar teks. Inilah contoh asas:

 <code class="html"><textarea id="myTextarea" name="user_comment" rows="5" cols="30" placeholder="Enter your comment here..."></textarea></code>

Kod ini mewujudkan kawasan teks dengan:

• id="myTextarea" : ​​Pengenal pasti unik untuk elemen, berguna untuk manipulasi JavaScript.
• name="user_comment" : Atribut nama, penting untuk menyerahkan data dengan borang.
• rows="5" : Menentukan bilangan baris yang kelihatan. Perhatikan bahawa ini hanya satu petunjuk; Pengguna masih boleh memasukkan lebih banyak teks daripada yang sesuai dalam baris ini, menyebabkan Textarea berkembang secara menegak.
• cols="30" : Menentukan bilangan lajur yang kelihatan. Sama seperti rows , ini adalah garis panduan visual.
• placeholder="Enter your comment here..." : Menyediakan arahan yang berguna kepada pengguna sebelum sebarang teks dimasukkan. Teks pemegang tempat hilang apabila pengguna mula menaip.

Di luar atribut asas ini, <textarea></textarea> menyokong atribut HTML standard seperti disabled , readonly , required (untuk pengesahan borang), dan autofocus (secara automatik memfokuskan kepada Textarea apabila halaman beban). Atribut wrap mengawal bagaimana bungkus teks (biasanya "lembut" atau "keras").

Mengawal saiz dan <textarea></textarea> dan penampilan dengan CSS

Ya, anda boleh mengawal saiz dan penampilan elemen <textarea></textarea> menggunakan CSS. Anda mempunyai kebebasan lengkap untuk menggayakannya untuk menyesuaikan reka bentuk laman web anda. Berikut adalah beberapa sifat CSS biasa:

• width dan height : Mengatasi dimensi visual yang ditetapkan oleh cols dan rows . Menggunakan peratusan atau unit em membolehkan reka bentuk responsif. Sebagai contoh: width: 50%; atau height: 10em;
• padding , margin , border : mengawal jarak dan sempadan di sekitar kawasan teks.
• font-family , font-size , line-height : Sesuaikan sifat fon teks.
• resize : Kawalan sama ada pengguna boleh mengubah saiz Textarea. Nilai yang mungkin adalah both , horizontal , vertical , atau none . Sebagai contoh, resize: none; menghalang saiz semula.
• overflow : Mengawal bagaimana kandungan melebihi dimensi Textarea dikendalikan (misalnya, auto , scroll , hidden ).
• box-shadow : Tambah kesan bayangan visual.

Inilah contoh gaya CSS:

 <code class="css">textarea { width: 400px; height: 150px; padding: 10px; border: 1px solid #ccc; border-radius: 5px; font-size: 16px; resize: vertical; /* Allow only vertical resizing */ box-shadow: 2px 2px 5px #888888; }</code>

Mengendalikan pengesahan input pengguna dalam elemen <textarea></textarea>

Pengesahan input sisi klien dalam <textarea></textarea> biasanya dikendalikan menggunakan JavaScript. Anda boleh menyemak pelbagai kriteria, seperti:

• Panjang minimum/maksimum: Pastikan teks memenuhi keperluan panjang.
• Sekatan aksara: Benarkan hanya aksara tertentu (misalnya, alfanumerik).
• Kata -kata yang dilarang: Mencegah penggunaan perkataan atau frasa tertentu.
• Corak khusus: Mengesahkan ungkapan biasa untuk corak kompleks.

Berikut adalah contoh JavaScript menggunakan pemeriksaan panjang yang mudah:

 <code class="javascript">const textarea = document.getElementById("myTextarea"); const submitButton = document.getElementById("submitButton"); submitButton.addEventListener("click", function() { if (textarea.value.length </code>

Ingat bahawa pengesahan sisi klien harus selalu dilengkapi dengan pengesahan sisi pelayan untuk memastikan integriti data.

Pertimbangan kebolehcapaian biasa untuk <textarea></textarea> elemen

Kebolehcapaian adalah penting untuk reka bentuk web inklusif. Berikut adalah beberapa pertimbangan utama untuk <textarea></textarea> elemen:

• ARIA ATTRIBUTES: Walaupun <textarea></textarea> sememangnya mempunyai aksesibiliti yang baik, menggunakan atribut ARIA dapat meningkatkannya lagi. Sebagai contoh, aria-describedby boleh menghubungkan Textarea ke teks deskriptif yang menyediakan konteks atau arahan selanjutnya.
• Pelabelan: Sentiasa berikan label yang jelas dan ringkas menggunakan elemen <label></label> . Kaitkan label dengan TextArea menggunakan for untuk label dan atribut id pada TextArea. Ini penting untuk pembaca skrin.
• Kontras yang mencukupi: Memastikan perbezaan warna yang cukup antara teks dan latar belakang untuk kebolehbacaan.
• Navigasi Papan Kekunci: Uji bahawa Textarea sepenuhnya dilayari menggunakan hanya papan kekunci.
• Pengendalian ralat: Apabila pengesahan gagal, berikan mesej ralat yang jelas dan bermaklumat. Pertimbangkan menggunakan atribut ARIA seperti aria-invalid untuk menunjukkan kesilapan kepada teknologi bantuan.

Dengan mengikuti garis panduan ini, anda boleh membuat unsur-unsur yang boleh diakses dan mesra pengguna <textarea></textarea> yang memenuhi keperluan penonton yang lebih luas.

Atas ialah kandungan terperinci Bagaimana saya menggunakan html5 & lt; textarea & gt; elemen dan atributnya untuk input teks berbilang baris?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!