HTML 입력 자리 표시자

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

구문:

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

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

및 요소는 자리 표시자입니다. 자리 표시자는 사용자가 입력 필드에 실제 입력 값을 입력하도록 하는 힌트로 간주됩니다.

다음과 같은 일부 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 입력 자리 표시자의 예

아래에 언급된 예시는 다음과 같습니다.

예시 #1

이 예에서는 모든 입력 필드에 자리 표시자를 사용하는 하나의 로그인 양식과 하나의 등록 양식을 만들 것이므로 이에 대한 HTML 코드와 출력은 다음과 같습니다.

코드:

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

출력:

예시 #2

이 예에서는 자리표시자의 색상을 변경하는 방법을 살펴보겠습니다.

코드:

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

출력:

예시 #3

이것은 입력 필드뿐만 아니라 텍스트 영역에서도 작동하는 HTML 자리 표시자의 또 다른 예입니다.

코드:

<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

출력:

결론

위의 모든 정보를 통해 HTML 자리 표시자는 텍스트 입력 필드나 텍스트 영역과 같은 입력 필드에 대한 일종의 관련 텍스트, 제안 또는 힌트일 뿐이라고 말할 수 있습니다. 따라서 사용자는 자리 표시자에서 쉽게 내용을 파악하고 입력 필드에 적절한 입력을 제공할 수 있습니다.

위 내용은 HTML 입력 자리 표시자의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!