Pemegang Tempat Input HTML

Pemegang tempat input HTML berfungsi sebagai pembayang kepada elemen tertentu yang membantu mengenal pasti nilai yang diperlukan bagi medan input yang diberikan. Ini boleh digunakan untuk input textfield atau textarea sebelum pengguna sebenarnya memasukkan input mereka. Ia memilih nilai daripada elemen pemilih masing-masing yang disertakan sebagai teks pemegang tempat dan memaparkannya sebagai cadangan apabila pengguna memasukkan input ke dalam medan input. Meletakkan ruang letak ke dalam medan input memudahkan pengguna memasukkan nilai yang diperlukan ke dalam medan input yang diberikan. Jadi ia meminimumkan usaha pengguna. Pada asasnya, pemegang tempat adalah dalam warna kelabu yang lebih terang, tetapi kami juga boleh menukar warnanya dengan menggunakan beberapa sifat CSS.

Sintaks:

Mari lihat sintaks untuk pemegang tempat, bagaimana sebenarnya ia akan digunakan dalam medan input.

<element placeholder="placeholder_text"></element>

Atribut untuk dan elemen ialah pemegang tempat. Pemegang tempat dianggap sebagai beberapa petunjuk kepada pengguna untuk memasukkan nilai input sebenar ke dalam medan input.

Pemegang tempat boleh digayakan dengan menggunakan beberapa kod CSS seperti berikut:

::placeholder{
//CSS code;
}

Pemegang tempat boleh dilaksanakan dengan menggunakan ciri seperti nisbah kontras yang menggambarkan bahawa warna pemegang tempat anda lebih terang daripada latar belakang medan input, kebolehgunaan mentakrifkan teks yang anda gunakan sebagai pemegang tempat mesti hilang apabila memasukkan input dalam medan input .

Dengan mentakrifkan ruang letak selain medan input juga dianggap sebagai cara terbaik untuk menggunakan ruang letak untuk medan input.

Medan input tersebut akan digunakan dengan beberapa kelas pseudo seperti didayakan, dilumpuhkan, baca sahaja, baca-tulis, ditunjukkan pemegang tempat, lalai, ditandai, tidak tentu, sah, tidak sah, dalam julat, di luar -julat, diperlukan, pilihan, kosong dan banyak lagi kelas lain juga.

Seperti kelas, terdapat banyak atribut juga akan digunakan seperti maks, panjang maks, min, panjang min, corak, diperlukan, langkah, jenis, dll.

Mari lihat cara pemegang tempat akan digunakan dengan teks input:

<input type="text " placeholder="placeholder-text">

Sintaks ini adalah untuk medan teks input mudah, jadi anda akan membantu pengguna menambah input yang betul ke dalam medan input dengan menggunakan atribut pemegang tempat. Pemegang tempat–teks hanyalah cadangan tentang perkara yang sebenarnya akan dimasukkan oleh pengguna dalam medan input ini.

Satu perkara lain di mana kami menggunakan ruang letak ialah kawasan teks input. Dalam medan input ini, kami boleh mencadangkan apa sebenarnya yang boleh diberikan oleh seseorang sebagai input dengan menggunakan pemegang tempat supaya ia akan membantu kedua-dua orang yang mengambil input untuk nilai input yang sesuai serta untuk pengguna yang memasukkan input untuk pengalaman pengguna yang lebih baik.

<input type="textarea" placeholder="placeholder-text">

Terdapat dua perkara berbeza dalam ruang letak, satu ialah :tempat-ditunjukkan yang memberi makna bahawa pemilihan input dilakukan apabila melalui teks pemegang tempat yang tersedia dalam medan input manakala satu lagi ialah::tempat letak yang digunakan untuk memberikan gaya kepada pemegang tempat.

Pemegang tempat tidak berfungsi sebagai tajuk atau atribut label atau tidak dianggap sebagai pengganti kedua-duanya.

Seseorang boleh menukar gaya ruang letak untuk memaparkan ruang letak yang sama dalam mana-mana penyemak imbas, untuk senario ini kita perlu menggunakan kod CSS untuk penyemak imbas tertentu supaya ia akan memaparkan perkara yang sama dalam setiap penyemak imbas.

Contoh Pemegang Tempat Input HTML

Berikut ialah contoh berikut yang dinyatakan di bawah.

Contoh #1

Dalam contoh ini kita akan mencipta satu borang Log Masuk dan satu borang Pendaftaran di mana kita menggunakan ruang letak untuk semua medan input jadi kod HTML dan output untuk ini adalah seperti berikut:

Kod:

<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
padding: 2px 12px;
}
.card {
border: 1px solid blue;
border-radius: 5px;
padding-left: 5%;
}
</style>


<div class="card">
<h4 id="Login-Form">Login Form</h4>
<form action="#">
<label for="username">User Name : </label><br>
<input type="text" name="username" placeholder="Enter User Name"><br>
<label for="pw">Password : </label><br>
<input type="password" name="pw" placeholder="Enter Password"><br><br>
<input type="submit" value="Login"><br><br>
</form>
</div>
<br><hr>
<div class="card">
<h4 id="Registration-Form">Registration Form</h4>
<form>
<label for="fname">First Name</label><br>
<input type="text" name="fname" placeholder="Enter First Name here"><br>
<label for="lname">Last Name</label><br>
<input type="text" name="lname" placeholder="Enter Last Name here"><br>
<label for="email">Email_ID</label><br>
<input type="email" name="email" placeholder="Enter Email ID here"><br>
<label for="mobileno">Contact No</label><br>
<input type="number" name="fname" placeholder="Enter Contact No"><br>
<label for="address">Address</label><br>
<input type="textarea" name="address" placeholder="Enter Address Here"><br><br>
<input type="submit" value="Register"><br><br>
</form>
</div>

Output:

Contoh #2

Dalam contoh ini, kita akan melihat cara menukar warna pemegang tempat.

Kod:

<title>Placeholder Color Demo</title>

<style>
::placeholder{
color: coral;
}
</style>

<center>
<h3 id="Changing-Color-of-Placeholder"> Changing Color of Placeholder </h3>
<h5 id="Enter-Course-Details-Here">Enter Course Details Here</h5>
<form action="#">
<input type="text" name="cname" placeholder="Course Name">
<br> <br>
<input type="text" name="duration" placeholder="Course Durations
(in Months)">
<br> <br>
<textarea placeholder="Course Details (Syllabus)"></textarea>
<br><br>  <input type="submit" value="Get Details">
</form>
</center>

Output:

Contoh #3

Ini ialah satu lagi contoh pemegang tempat HTML, yang akan berfungsi pada medan input dan juga pada kawasan teks.

Kod:

<title>HTML Placeholder</title>

We help jobseeker for getting better Jobs!

Enter First Name
Enter Last Name
Enter Email ID
Enter  Password
Confirm Password
Enter Mobile Number
Select Date of Birth
Enter City
Enter Address
Select Gender	male female other
Position Applied for	Select Position .NET Developer UX-UI Designer Full Stack Developer Digital Marketing
Additional skills or Certifications
Upload Resume Here

Output:

Kesimpulan

Daripada semua maklumat di atas, kita boleh mengatakan bahawa pemegang tempat HTML hanyalah sejenis teks, cadangan atau pembayang yang berkaitan ke dalam medan input seperti medan input teks atau kawasan teks. Jadi pengguna boleh menangkap sesuatu dengan mudah daripada pemegang tempat dan memberikan input yang sesuai ke dalam medan input.

Atas ialah kandungan terperinci Pemegang Tempat Input HTML. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!