의견 : HTML5의 자동 초점과 자리 표시 자 텍스트를 잘 이해하고 있다고 생각합니다. html5의 자동 초점 함수를 사용하려면 양식 필드에 자동 초점 속성 만 추가하면됩니다. 먼저 HTML AutoFocus 및 자리 표시 자 텍스트를 사용하기위한 다음 예제 코드를 참조하십시오. 관심있는 친구들은 그것에 대해 배울 수 있습니다.
먼저 HTML 자동 초점 및 자리 표시 자 텍스트 사용을위한 다음 예제 코드를보십시오.
<! doctype html> 2 : <html>
<헤드>
<title> 계정 등록 </title>
<meta charset = "utf-8">
</head>
<body>
<form 메소드 = "post"action = "goto">
<fieldset>
<Legend> 새로운 사용자 등록 </LEGEND>
<ol>
<li>
<label for = "name"> 이메일 </label>
<입력 유형 = "이메일">
</li>
<li>
<label for = "user"> username </label>
<입력 유형 = "텍스트">
</li>
<li>
<label for = "nickname"> 디스플레이 이름 </label>
<입력 유형 = "텍스트">
</li>
<li>
<label for = "password"> password </label>
<입력 유형 = "비밀번호">
</li>
<li>
<label for = "quicate_password"> 확인 암호 </label>
<입력 유형 = "비밀번호">
</li>
</ol>
</fieldset>
</form>
</body>
</html>
자동 초점 사용
html5의 자동 초점 기능을 사용하려면 양식 필드에 자동 초점 속성을 추가하십시오.
예를 들어, 페이지가로드 될 때 양식의 첫 번째 양식 필드 사서함에서 커서를 자동으로 찾아 입력 효율성을 향상 시키려고합니다.
<li>
<label for = "name"> 이메일 </label>
<입력 유형 = "이메일"자동 초점>
</li>
여러 자동 초점 속성이 페이지에 설정된 경우 사용자의 커서는 자동 초점 속성 세트가있는 마지막 양식 필드에만 위치합니다.
자리 표시 자 텍스트를 사용하십시오
자리 표시 자 텍스트를 가장 많이 사용하는 것은 사용자에게 양식을 올바르게 작성하는 방법을 설명하는 것입니다. 즉, 입력 프롬프트가 이루어집니다. 자리 표시 자 텍스트를 사용하려면 입력 필드에 자리 표시 자 속성을 추가하십시오.
아래는 자리 표시 자 속성을 사용하는 입력 양식 필드입니다.
<ol>
<li>
<label for = "name"> 이메일 </label>
<input type = "이메일"자동 초점 자리 표시 자 = "유효한 이메일 주소를 입력하십시오">
</li>
<li>
<label for = "user"> username </label>
<입력 유형 = "텍스트"자리 표시기 = "사용자 이름을 입력하십시오">
</li>
<li>
<label for = "nickname"> 디스플레이 이름 </label>
<입력 유형 = "텍스트"자리 표시 자 = "닉네임을 입력">
</li>
<li>
<label for = "password"> password </label>
<입력 유형 = "비밀번호"자리 표시 자 = "비밀번호를 입력하십시오">
</li>
<li>
<label for = "quicate_password"> 확인 암호 </label>
<입력 유형 = "비밀번호"자리 표시 자 = "비밀번호를 다시 입력하십시오">
</li>
</ol>
작동 효과는 다음과 같습니다
자동 완성을 활성화할지 여부
Autocomplete 속성은 HTML5에 도입되었습니다. 브라우저에 현재 폼 필드에 자동으로 데이터로 채워져 있는지 알리는 데 사용됩니다. 일부 브라우저는 이전에 사용자가 입력 한 데이터를 기억하며 경우에 따라 사용자가 레코드 데이터, 특히 비밀번호와 유사하게 사용하기를 원하지 않을 수도 있습니다.
자동 완성
<입력 유형 = "비밀번호"autocomplete = "Off"자리 표시기 = "암호를 입력하십시오">
자동 완료를 방지하기 위해 Atuocomplete의 값을 OFF로 설정하십시오.