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">

Atribut untuk dan elemen ialah pemegang tempat. Pemegang tempat dianggap sebagai beberapa petunjuk kepada pengguna untuk memasukkan nilai input sebenar ke dalam medan input.</p> <p>Pemegang tempat boleh digayakan dengan menggunakan beberapa kod CSS seperti berikut:</p> <pre class="brush:php;toolbar:false">::placeholder{ //CSS code; }</pre> <p>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 .</p> <p>Dengan mentakrifkan ruang letak selain medan input juga dianggap sebagai cara terbaik untuk menggunakan ruang letak untuk medan input.</p> <p>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.</p> <p>Seperti kelas, terdapat banyak atribut juga akan digunakan seperti maks, panjang maks, min, panjang min, corak, diperlukan, langkah, jenis, dll.</p> <p>Mari lihat cara pemegang tempat akan digunakan dengan teks input:</p> <pre class="brush:php;toolbar:false"><input type="text " placeholder="placeholder-text"></pre> <p>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.</p> <p>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.</p> <pre class="brush:php;toolbar:false"><input type="textarea" placeholder="placeholder-text"></pre> <p>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.</p> <p>Pemegang tempat tidak berfungsi sebagai tajuk atau atribut label atau tidak dianggap sebagai pengganti kedua-duanya.</p> <p>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.</p> <h3>Contoh Pemegang Tempat Input HTML</h3> <p>Berikut ialah contoh berikut yang dinyatakan di bawah.</p> <h4>Contoh #1</h4> <p>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:</p> <p><strong>Kod:</strong></p> <pre class="brush:php;toolbar:false"><!DOCTYPE html> <html> <head> <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> </head> <body > <div class="card"> <h4>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>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> </body> </html></pre> <p><strong>Output: </strong></p> <p><img src="https://img.php.cn/upload/article/000/000/000/172544006758459.png" alt="Pemegang Tempat Input HTML" ></p> <h4>Contoh #2</h4> <p>Dalam contoh ini, kita akan melihat cara menukar warna pemegang tempat.</p> <p><strong>Kod:</strong></p> <pre class="brush:php;toolbar:false"><!DOCTYPE html> <html> <head> <title>Placeholder Color Demo</title> </head> <style> ::placeholder{ color: coral; } </style> <body> <center> <h3> Changing Color of Placeholder </h3> <h5>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> </body> </html></pre> <p><strong>Output:</strong></p> <p><img src="https://img.php.cn/upload/article/000/000/000/172544006863390.png" alt="Pemegang Tempat Input HTML" ></p> <h4>Contoh #3</h4> <p>Ini ialah satu lagi contoh pemegang tempat HTML, yang akan berfungsi pada medan input dan juga pada kawasan teks.</p> <p><strong>Kod:</strong></p> <pre class="brush:php;toolbar:false"><html> <head> <title>HTML Placeholder</title> </head> <body> <form > <table border="2" align="center" width="500" bgcolor="lightblue" > <caption><b>We help jobseeker for getting better Jobs!</b></caption> <tr> <th>Enter First Name</th> <td><input type="text" name="fn" placeholder="John" required/></td> </tr> <tr> <th>Enter Last Name</th> <td><input type="text" placeholder="Smith" required/ ></td> </tr> <tr> <th>Enter Email ID</th> <td><input type="email" placeholder="[email&#160;protected]" required/></td> </tr> <tr> <th>Enter  Password</th> <td><input type="password" placeholder="JSJS123" required/></td> </tr> <tr> <th>Confirm Password</th> <td><input type="password" placeholder="JSJS123" required/></td> </tr> <tr> <th>Enter Mobile Number</th> <td><input type="number" placeholder="9867986798" required/></td> </tr> <tr> <th>Select Date of Birth</th> <td><input type="date" placeholder="30-04-1994"/></td> </tr> <tr> <th>Enter City</th> <td><input type="city" placeholder="Eg. Pune"/></td> </tr> <tr> <th>Enter Address</th> <td><textarea rows="3" cols="20" placeholder="Enter address details"></textarea></td> </tr> <tr> <th>Select Gender</th> <td> male<input type="radio" name="g" /> female<input type="radio" name="g" /> other<input type="radio" name="o"/> </td> </tr> <tr> <th>Position Applied for</th> <td> <select name="position"> <option value="" selected="selected" disabled="disabled">Select Position</option> <option value="1">.NET Developer</option> <option value="2">UX-UI Designer</option> <option value="3">Full Stack Developer</option> <option value="4">Digital Marketing</option> </select> </td> </tr> <tr> <th>Additional skills or Certifications</th> <td><textarea rows="5" cols="20" placeholder="Enter your master skills as well as certification you completed"></textarea></td> </tr> <tr> <th>Upload Resume Here</th> <td><input type="file"/ ></td> </tr> <tr> <td colspan="2" align="center"><input type="submit" value="Save Details"/> <input type="reset" value="Reset Details"/> </td> </tr> </table> </form> </body> </html></pre> <p><strong>Output:</strong></p> <p><img src="https://img.php.cn/upload/article/000/000/000/172544007059734.png" alt="Pemegang Tempat Input HTML" ></p> <p><strong>Kesimpulan</strong></p> <p>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.</p><p>Atas ialah kandungan terperinci Pemegang Tempat Input HTML. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!</p></div><div class="nphpQianMsg"><a href="javascript:void(0);">css</a> <a href="javascript:void(0);">html</a> <a href="javascript:void(0);">for</a> <a href="javascript:void(0);">catch</a> <a href="javascript:void(0);">using</a> <a href="javascript:void(0);">Attribute</a> <a href="javascript:void(0);">default</a> <a href="javascript:void(0);">this</a> <a href="javascript:void(0);">display</a> <a href="javascript:void(0);">background</a> <a href="javascript:void(0);">input</a> <a href="javascript:void(0);">kind</a><div class="clear"></div></div><div class="nphpQianSheng"><span>Kenyataan：</span><div>Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn</div></div></div><div class="nphpSytBox"><span>Artikel sebelumnya：<a class="dBlack" title="Jenis Input Borang HTML" href="http://m.php.cn/ms/faq/1796600268.html">Jenis Input Borang HTML</a></span><span>Artikel seterusnya：<a class="dBlack" title="Jenis Input Borang HTML" href="http://m.php.cn/ms/faq/1796600270.html">Jenis Input Borang HTML</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>Artikel berkaitan</h2><em><a href="http://m.php.cn/ms/article.html" class="bBlack"><i>Lihat lagi</i><b></b></a></em><div class="clear"></div></div><ul class="nphpXgwzList"><li><b></b><a href="http://m.php.cn/ms/faq/348757.html" title="Html小知识总结" class="aBlack">Html小知识总结</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ms/faq/348804.html" title="如何快速学习HTML" class="aBlack">如何快速学习HTML</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ms/faq/348873.html" title="html xhtml xml的区别" class="aBlack">html xhtml xml的区别</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ms/faq/348884.html" title="src与href属性的区别" class="aBlack">src与href属性的区别</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ms/faq/348902.html" title="关于HTML5和CSS替换使用" class="aBlack">关于HTML5和CSS替换使用</a><div class="clear"></div></li></ul></div></div><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！</p></div><div class="footermid"><a href="http://m.php.cn/ms/about/us.html">Tentang kita</a><a href="http://m.php.cn/ms/about/disclaimer.html">Penafian</a><a href="http://m.php.cn/ms/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved </p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了，就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body></html>