HTML 입력 자리 표시자

王林원래의: 2024-09-04 16:54:24948검색

HTML 입력 자리 표시자는 주어진 입력 필드의 필수 값을 식별하는 데 도움이 되는 주어진 요소에 대한 힌트로 작동합니다. 이는 사용자가 실제로 입력을 입력하기 전에 입력 텍스트 필드 또는 텍스트 영역에 사용될 수 있습니다. 자리 표시자 텍스트로 포함된 각 선택기 요소에서 값을 선택하고 사용자가 입력 필드에 입력을 입력할 때 제안으로 표시합니다. 입력 필드에 자리 표시자를 배치하면 사용자가 주어진 입력 필드에 필요한 값을 쉽게 입력할 수 있습니다. 따라서 사용자의 노력이 최소화됩니다. 기본적으로 자리 표시자는 밝은 회색이지만 일부 CSS 속성을 사용하여 색상을 변경할 수도 있습니다.

구문:

자리 표시자의 구문과 입력 필드에서 정확히 어떻게 사용되는지 살펴보겠습니다.

<element placeholder="placeholder_text">

및 요소는 자리 표시자입니다. 자리 표시자는 사용자가 입력 필드에 실제 입력 값을 입력하도록 하는 힌트로 간주됩니다.</p> <p>다음과 같은 일부 CSS 코드를 사용하여 자리 표시자의 스타일을 지정할 수 있습니다.</p> <pre class="brush:php;toolbar:false">::placeholder{ //CSS code; }</pre> <p>자리 표시자는 자리 표시자 색상이 입력 필드의 배경보다 밝음을 설명하는 명암비와 같은 기능을 사용하여 구현할 수 있으며, 유용성은 입력 필드에 입력을 입력할 때마다 자리 표시자가 사라져야 하므로 사용 중인 텍스트를 정의합니다. .</p> <p>입력 필드 외에 자리 표시자를 정의하는 것도 입력 필드에 자리 표시자를 사용하는 가장 좋은 방법으로 간주됩니다.</p> <p>해당 입력 필드는 활성화, 비활성화, 읽기 전용, 읽기-쓰기, 자리 표시자 표시, 기본값, 선택됨, 불확정, 유효, 유효하지 않음, 범위 내, 범위 외와 같은 일부 의사 클래스와 함께 사용됩니다. -범위, 필수, 선택, 공백 등 기타 클래스도 있습니다.</p> <p>클래스와 마찬가지로 max, maxlength, min, minlength, 패턴, 필수, 단계, 유형 등과 같은 많은 속성도 사용됩니다.</p> <p>입력 텍스트에 자리 표시자가 어떻게 사용되는지 살펴보겠습니다.</p> <pre class="brush:php;toolbar:false"><input type="text " placeholder="placeholder-text"></pre> <p>이 구문은 간단한 입력 텍스트 필드를 위한 것이므로 자리 표시자 속성을 사용하여 사용자가 입력 필드에 적절한 입력을 추가하는 데 도움이 됩니다. 자리 표시자 – 텍스트는 사용자가 이 입력 필드에 실제로 입력할 내용에 대한 제안일 뿐입니다.</p> <p>자리 표시자를 사용하는 또 다른 것은 입력 텍스트 영역입니다. 이 입력 필드에서는 자리 표시자를 사용하여 입력으로 정확히 무엇을 줄 수 있는지 제안할 수 있으므로 적절한 입력 값을 입력하는 사람뿐만 아니라 더 나은 사용자 경험을 위해 입력하는 사용자 모두에게 도움이 될 것입니다.</p> <pre class="brush:php;toolbar:false"><input type="textarea" placeholder="placeholder-text"></pre> <p>자리 표시자에는 두 가지 다른 사항이 있습니다. 하나는 입력 필드에서 사용할 수 있는 자리 표시자 텍스트를 통해 입력 선택이 수행된다는 의미를 제공하는 :placeholder-shown이고, 다른 하나는 사용되는::placeholder입니다. 자리표시자에 스타일을 부여합니다.</p> <p>자리 표시자는 제목이나 라벨 속성으로 작동하지 않거나 두 속성을 대체하는 것으로 간주되지 않습니다.</p> <p>모든 브라우저에서 동일하게 자리 표시자를 표시하도록 자리 표시자의 스타일을 변경할 수 있습니다. 이 시나리오에서는 각 브라우저에 동일한 내용이 표시되도록 특정 브라우저에 CSS 코드를 적용해야 합니다.</p> <h3>HTML 입력 자리 표시자의 예</h3> <p>아래에 언급된 예시는 다음과 같습니다.</p> <h4>예시 #1</h4> <p>이 예에서는 모든 입력 필드에 자리 표시자를 사용하는 하나의 로그인 양식과 하나의 등록 양식을 만들 것이므로 이에 대한 HTML 코드와 출력은 다음과 같습니다.</p> <p><strong>코드:</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>출력: </strong></p> <p><img src="https://img.php.cn/upload/article/000/000/000/172544006758459.png" alt="HTML 입력 자리 표시자" ></p> <h4>예시 #2</h4> <p>이 예에서는 자리표시자의 색상을 변경하는 방법을 살펴보겠습니다.</p> <p><strong>코드:</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>출력:</strong></p> <p><img src="https://img.php.cn/upload/article/000/000/000/172544006863390.png" alt="HTML 입력 자리 표시자" ></p> <h4>예시 #3</h4> <p>이것은 입력 필드뿐만 아니라 텍스트 영역에서도 작동하는 HTML 자리 표시자의 또 다른 예입니다.</p> <p><strong>코드:</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 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>출력:</strong></p> <p><img src="https://img.php.cn/upload/article/000/000/000/172544007059734.png" alt="HTML 입력 자리 표시자" ></p> <p><strong>결론</strong></p> <p>위의 모든 정보를 통해 HTML 자리 표시자는 텍스트 입력 필드나 텍스트 영역과 같은 입력 필드에 대한 일종의 관련 텍스트, 제안 또는 힌트일 뿐이라고 말할 수 있습니다. 따라서 사용자는 자리 표시자에서 쉽게 내용을 파악하고 입력 필드에 적절한 입력을 제공할 수 있습니다.</p><p>위 내용은 HTML 입력 자리 표시자의 상세 내용입니다. 자세한 내용은 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>성명：</span><div>본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.</div></div></div><div class="nphpSytBox"><span>이전 기사：<a class="dBlack" title="HTML 양식 입력 유형" href="http://m.php.cn/ko/faq/1796600268.html">HTML 양식 입력 유형</a></span><span>다음 기사：<a class="dBlack" title="HTML 양식 입력 유형" href="http://m.php.cn/ko/faq/1796600270.html">HTML 양식 입력 유형</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>관련 기사</h2><em><a href="http://m.php.cn/ko/article.html" class="bBlack"><i>더보기</i><b></b></a></em><div class="clear"></div></div><ul class="nphpXgwzList"><li><b></b><a href="http://m.php.cn/ko/faq/348757.html" title="HTML 지식 요약" class="aBlack">HTML 지식 요약</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ko/faq/348804.html" title="HTML을 빨리 배우는 방법" class="aBlack">HTML을 빨리 배우는 방법</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ko/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/ko/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/ko/faq/348902.html" title="HTML5 및 CSS 대체 사용 정보" class="aBlack">HTML5 및 CSS 대체 사용 정보</a><div class="clear"></div></li></ul></div></div><div class="nphpFoot"><div class="nphpFootBg"><ul class="nphpFootMenu"><li><a href="http://m.php.cn/ko/"><b class="icon1"></b><p>집</p></a></li><li><a href="http://m.php.cn/ko/course.html"><b class="icon2"></b><p>강의</p></a></li><li><a href="http://m.php.cn/ko/wenda.html"><b class="icon4"></b><p>Q&A</p></a></li><li><a href="http://m.php.cn/ko/login"><b class="icon5"></b><p>나의</p></a></li><div class="clear"></div></ul></div></div><div class="nphpYouBox" style="display: none;"><div class="nphpYouBg"><div class="nphpYouTitle"><span onclick="$('.nphpYouBox').hide()"></span><a href="http://m.php.cn/ko/"></a><div class="clear"></div></div><ul class="nphpYouList"><li><a href="http://m.php.cn/ko/"><b class="icon1"></b><span>집</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/course.html"><b class="icon2"></b><span>강의</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/article.html"><b class="icon3"></b><span>기사</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/wenda.html"><b class="icon4"></b><span>Q&A</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/dic.html"><b class="icon6"></b><span>사전</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/course/type/99.html"><b class="icon7"></b><span>수동</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/xiazai/"><b class="icon8"></b><span>다운로드</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/faq/zt" title="주제"><b class="icon12"></b><span>주제</span><div class="clear"></div></a></li><div class="clear"></div></ul></div></div><div class="nphpDing" style="display: none;"><div class="nphpDinglogo"><a href="http://m.php.cn/ko/"></a></div><div class="nphpNavIn1"><div class="swiper-container nphpNavSwiper1"><div class="swiper-wrapper"><div class="swiper-slide"><a href="http://m.php.cn/ko/" >집</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/article.html" class="hover">기사</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/wenda.html" >Q&A</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/course.html" >강의</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/faq/zt" >주제</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/xiazai" >다운로드</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/game" >게임</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/dic.html" >사전</a></div><div class="clear"></div></div></div><div class="langadivs" ><a href="javascript:;" class="bg4 bglanguage"></a><div class="langadiv" ><a onclick="javascript:setlang('zh-cn');" class="language course-right-orders chooselan " href="javascript:;"><span>简体中文</span><span>（ZH-CN）</span></a><a onclick="javascript:setlang('en');" class="language course-right-orders chooselan " href="javascript:;"><span>English</span><span>（EN）</span></a><a onclick="javascript:setlang('zh-tw');" class="language course-right-orders chooselan " href="javascript:;"><span>繁体中文</span><span>（ZH-TW）</span></a><a onclick="javascript:setlang('ja');" class="language course-right-orders chooselan " href="javascript:;"><span>日本語</span><span>（JA）</span></a><a onclick="javascript:;" class="language course-right-orders chooselan chooselanguage" href="javascript:;"><span>한국어</span><span>（KO）</span></a><a onclick="javascript:setlang('ms');" class="language course-right-orders chooselan " href="javascript:;"><span>Melayu</span><span>（MS）</span></a><a onclick="javascript:setlang('fr');" class="language course-right-orders chooselan " href="javascript:;"><span>Français</span><span>（FR）</span></a><a onclick="javascript:setlang('de');" class="language course-right-orders chooselan " href="javascript:;"><span>Deutsch</span><span>（DE）</span></a></div></div><script> var swiper = new Swiper('.nphpNavSwiper1', { slidesPerView : 'auto', observer: true,//修改swiper自己或子元素时，自动初始化swiper observeParents: true,//修改swiper的父元素时，自动初始化swiper }); </script></div></div><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>