Automatic focus and placeholder text sample code of HTML5 registration form_html5 tutorial skills

First look at the sample code below to use HTML auto-focus and placeholder text

Copy the code

The code is as follows:

2:

New user registration

1. 
   Email
   


2. 
   Username
   
   


3. 
   display name
   
   


4. 
   password
   
   


5. 
   Confirm password
   
   

< /html>

Use autofocus
To use the autofocus function of HTML5, you only need to add the autofocus attribute to the form field
For example, above, think Let the cursor be automatically positioned on the first form field mailbox of the form when the page is loaded and improve input efficiency.

Copy code

The code is as follows:

< label for="name">email

It should be noted that if multiple autofocus attributes are set on the page, the user's cursor will only be positioned on the last form field with the autofocus attribute set.
Use placeholder text
The biggest use of placeholder text is to explain to users how to fill in the form correctly. That is, the input prompt is performed. To use placeholder text, you only need to add the placeholder attribute to the input field
The following is the input form field using the placeholder attribute

Copy Code

The code is as follows:

1. 
   email
   
   

username


2. 
   display name
   
   


3. 
   password
   
   


4. 
   Confirm password
   
   

작동 효과는 다음과 같습니다.

자동 완성 활성화 여부
autocomplete 속성은 HTML5에서 도입되었습니다. 현재 양식 필드에 대한 데이터를 자동으로 채울지 여부를 브라우저에 알리는 데 사용됩니다. 일부 브라우저는 사용자가 이전에 입력한 데이터를 기억하며 경우에 따라 특히 비밀번호와 같은 데이터를 사용자가 기록하는 것을 원하지 않을 수도 있습니다.
자동 완성 끄기

코드 복사

코드는 다음과 같습니다.

자동 완성을 방지하려면 atuocomplete 값을 off로 설정하기만 하면 됩니다.