Code examples of new tags and new attributes in HTML5 forms

1. In the past, boxes had

tags, but now they all use semantic tags, such as:

Header tag

Navigation bar label

Sidebar label

Footer tag

##

Chapter, header, column

The code is as follows:

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

Add style:

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%;}

The effect is as follows:

2. Three new attributes added to the form:

Required: Automatically check content

autofocus: Automatically obtain focus (obtain focus as soon as the header is opened, instead of moving the cursor to it)

placeholder: displayed by default Content

The code is as follows:

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

Running effect:

After clicking the submit button:

##

The above is the detailed content of Code examples of new tags and new attributes in HTML5 forms. For more information, please follow other related articles on the PHP Chinese website!