HTML5 양식의 새 태그 및 새 속성에 대한 코드 예제

1. 상자에는

태그가 있었지만 이제는 모두

탐색 모음 라벨

사이드바 라벨

바닥글 태그

장, 머리글, 열

코드는 다음과 같습니다.

<header>头部</header>
<nav>导航</nav>
<section>    
<aside>左侧栏</aside>    
<article>文章</article>
</section>
<footer>页脚</footer>

스타일 추가:

header,nav,section,footer{    
width: 1300px;    
height: 50px;    
border: solid #08050a 1px;    
/*margin:auto;*/    
margin-bottom: 5px;}
aside,article{    
border: solid red 1px;   
 height: 100%;    
 margin:0;}
 aside{    
 float: left;    
 width:30%;}
 article{    
 float:left;    
 width: 60%;}

효과는 다음과 같습니다:

2. 양식에 세 가지 새로운 속성이 추가되었습니다:

필수: 내용 자동 확인

자동 초점: 자동으로 초점 가져오기(커서를 헤더로 이동하는 대신 헤더가 열리자마자 초점 가져오기)

자리 표시자: 표시됨 기본적으로 Content

코드는 다음과 같습니다.

<form action="post">    
用户名：<input type="text" name="username" required="required" placeholder="请输入用户名" autofocus="autofocus">    
<br>    
<input type="submit" name="submit" value="提交">
</form>

실행 효과:

제출 버튼 클릭 후:

위 내용은 HTML5 양식의 새 태그 및 새 속성에 대한 코드 예제의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!