HTML 입력 자리 표시자는 주어진 입력 필드의 필수 값을 식별하는 데 도움이 되는 주어진 요소에 대한 힌트로 작동합니다. 이는 사용자가 실제로 입력을 입력하기 전에 입력 텍스트 필드 또는 텍스트 영역에 사용될 수 있습니다. 자리 표시자 텍스트로 포함된 각 선택기 요소에서 값을 선택하고 사용자가 입력 필드에 입력을 입력할 때 제안으로 표시합니다. 입력 필드에 자리 표시자를 배치하면 사용자가 주어진 입력 필드에 필요한 값을 쉽게 입력할 수 있습니다. 따라서 사용자의 노력이 최소화됩니다. 기본적으로 자리 표시자는 밝은 회색이지만 일부 CSS 속성을 사용하여 색상을 변경할 수도 있습니다.
구문:
자리 표시자의 구문과 입력 필드에서 정확히 어떻게 사용되는지 살펴보겠습니다.
<element placeholder="placeholder_text">
다음과 같은 일부 CSS 코드를 사용하여 자리 표시자의 스타일을 지정할 수 있습니다.
::placeholder{ //CSS code; }
자리 표시자는 자리 표시자 색상이 입력 필드의 배경보다 밝음을 설명하는 명암비와 같은 기능을 사용하여 구현할 수 있으며, 유용성은 입력 필드에 입력을 입력할 때마다 자리 표시자가 사라져야 하므로 사용 중인 텍스트를 정의합니다. .
입력 필드 외에 자리 표시자를 정의하는 것도 입력 필드에 자리 표시자를 사용하는 가장 좋은 방법으로 간주됩니다.
해당 입력 필드는 활성화, 비활성화, 읽기 전용, 읽기-쓰기, 자리 표시자 표시, 기본값, 선택됨, 불확정, 유효, 유효하지 않음, 범위 내, 범위 외와 같은 일부 의사 클래스와 함께 사용됩니다. -범위, 필수, 선택, 공백 등 기타 클래스도 있습니다.
클래스와 마찬가지로 max, maxlength, min, minlength, 패턴, 필수, 단계, 유형 등과 같은 많은 속성도 사용됩니다.
입력 텍스트에 자리 표시자가 어떻게 사용되는지 살펴보겠습니다.
<input type="text " placeholder="placeholder-text">
이 구문은 간단한 입력 텍스트 필드를 위한 것이므로 자리 표시자 속성을 사용하여 사용자가 입력 필드에 적절한 입력을 추가하는 데 도움이 됩니다. 자리 표시자 – 텍스트는 사용자가 이 입력 필드에 실제로 입력할 내용에 대한 제안일 뿐입니다.
자리 표시자를 사용하는 또 다른 것은 입력 텍스트 영역입니다. 이 입력 필드에서는 자리 표시자를 사용하여 입력으로 정확히 무엇을 줄 수 있는지 제안할 수 있으므로 적절한 입력 값을 입력하는 사람뿐만 아니라 더 나은 사용자 경험을 위해 입력하는 사용자 모두에게 도움이 될 것입니다.
<input type="textarea" placeholder="placeholder-text">
자리 표시자에는 두 가지 다른 사항이 있습니다. 하나는 입력 필드에서 사용할 수 있는 자리 표시자 텍스트를 통해 입력 선택이 수행된다는 의미를 제공하는 :placeholder-shown이고, 다른 하나는 사용되는::placeholder입니다. 자리표시자에 스타일을 부여합니다.
자리 표시자는 제목이나 라벨 속성으로 작동하지 않거나 두 속성을 대체하는 것으로 간주되지 않습니다.
모든 브라우저에서 동일하게 자리 표시자를 표시하도록 자리 표시자의 스타일을 변경할 수 있습니다. 이 시나리오에서는 각 브라우저에 동일한 내용이 표시되도록 특정 브라우저에 CSS 코드를 적용해야 합니다.
아래에 언급된 예시는 다음과 같습니다.
이 예에서는 모든 입력 필드에 자리 표시자를 사용하는 하나의 로그인 양식과 하나의 등록 양식을 만들 것이므로 이에 대한 HTML 코드와 출력은 다음과 같습니다.
코드:
<!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>
출력:
이 예에서는 자리표시자의 색상을 변경하는 방법을 살펴보겠습니다.
코드:
<!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>
출력:
이것은 입력 필드뿐만 아니라 텍스트 영역에서도 작동하는 HTML 자리 표시자의 또 다른 예입니다.
코드:
<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>
출력:
결론
위의 모든 정보를 통해 HTML 자리 표시자는 텍스트 입력 필드나 텍스트 영역과 같은 입력 필드에 대한 일종의 관련 텍스트, 제안 또는 힌트일 뿐이라고 말할 수 있습니다. 따라서 사용자는 자리 표시자에서 쉽게 내용을 파악하고 입력 필드에 적절한 입력을 제공할 수 있습니다.
위 내용은 HTML 입력 자리 표시자의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!