html其他表单和html5新增标签

一时失言乱红尘 2021-11-17 03:58 431阅读 0赞

#### 邮箱表单 ####

#### url表单 校验网址 ####

#### 数字表单 ####

#### 滑块表单 ####

#### 搜索表单 ####

#### 颜色日期表单 ####

<input type="color" name="color" id="color" value=""/>
    			
    			<input type="date" name="date" id="date" value="" onclick=""/>

#### 表单校验 ####

表单的校验:  
1.前端校验  
就是防止用户输入不合法的信息，能够减轻服务器端的压力  
placeholder: 提示用户输入  
required: 用户必选项  
readonly: 只读  
disabled: 废除组件  
pattern: 正则表达式属性

2.后台校验
    				通过Java代码来做相应的判断
    			3.数据库校验
    				数据库可以在插入数据的时候做校验

## html5中新增标签 ##

#### mark标签 ####

1.用于显示页面中需要重点关注的内容,就像看书需要用荧光笔划重点一样
    		 2.浏览器通常会用黄色显示mark标注的内容

#### time标签 ####

1.用来显示被标注内容是日期、时间或者日期时间  
2.常用属性  
datetime:该属性主要用于向机器提供时间,datetime属性的属性值应该符合yyyy-MM-ddTHH:mm格式的日期时间  
当然也可以只指定日期或者只指定时间  
pubdate:是一个支持boolean值的属性,用于表明是否为发布日期  
3.如果time元素本身就满足标准的日期时间格式，那么可以不用指定datetime属性

今天是<time datetime="2018-05-01">2018年5月</time>。<br /> 
    		上课时间是<time datetime="09:00">早上9点</time>。<br />
    		我们将于<time datetime="2019-01-08T09:00">正月初八</time>结束课程。<br />
    		明年<time>2019-02-01</time>大家就可以上班了。<br />
    		本次通知的发布时间是<time datetime="2018-05-24T19:06" pubdate>2018年5月24</time>

#### article section标签 ####

article:代表一篇独立的文档内容，可以是一片文章或者一篇短文，通常由标题和内容组成  
可以使用header定义文档的标题  
可以使用footer定义文档的脚注  
可以使用子article划分文档的多个段落  
可以使用section对文档进行分块  
section:对页面的内容进行分块，通常也可以由标题和内容组成

二者的区别: article侧重于文档 section侧重于分块

<h1>浏览帖子内容</h1>
    		
    		<article>
    			<h2>学习Android,必须先学习Java吗?</h2>
    			<p>Android上的应用程序只能用Java编写吗?可以用C++吗?</p>
    			
    			<section>
    				<h2>回复内容</h2>
    				
    				<article>
    					
    					<h3>还是得学习Java</h3>					
    					<div>作者: xyr</div>
    					<p>虽然Android不一定要使用Java开发,还可以选择JavaScript开发或者NDK开发,但是Java毕竟是Android开发的主流语言</p>
    					
    				</article>
    				
    				<article>
    					
    					<h3>Java是基础</h3>					
    					<div>作者: xyr2</div>
    					<p>Java是基础,学好Java再去学习Android事半功倍</p>				
    					
    				</article>
    			</section>
    			
    			<section>
    				<h2>评价内容</h2>
    				
    				<article>
    					
    					<h3>讨论很好</h3>
    					<p>大家讨论的很深入</p>
    					
    				</article>
    				<article>
    					
    					<h3>赞</h3>	
    					<p>不错,赞</p>
    				</article>
    			</section>
    		</article>

#### footer header标签 ####

header通常用于代表标题，但是和h1到h6不一样,h1-h6仅代表标题,
    而header代表头部分,header范围更广,header可以包含h1-h6,也可以包含p或者span或者nav等标签
    一般header所代表的的标题内容更加丰富
    
    			
    footer代表脚注部分,可以包含一些版权信息或者脚注部分,一般代表附加说明信息
    <header>
    			<img src="../img/logo.png" alt="尚学堂" /> 
    			<a href="#">返回首页</a>
    			<h1>浏览帖子内容</h1>
    		</header>	
    		
    		
    		<article>
    			<h2>学习Android,必须先学习Java吗?</h2>
    			<p>Android上的应用程序只能用Java编写吗?可以用C++吗?</p>
    			
    			<section>
    				<h2>回复内容</h2>
    				
    				<article>
    					
    					<header>
    						<h3>还是得学习Java</h3>					
    						<div>作者: xyr</div>
    					</header>
    					
    					<p>虽然Android不一定要使用Java开发,还可以选择JavaScript开发或者NDK开发,但是Java毕竟是Android开发的主流语言</p>
    					
    				</article>
    				
    				<article>
    					
    					<header>
    						<h3>Java是基础</h3>					
    						<div>作者: xyr2</div>
    					</header>
    					<p>Java是基础,学好Java再去学习Android事半功倍</p>				
    					
    				</article>
    			</section>
    			
    			<section>
    				<h2>评价内容</h2>
    				
    				<article>
    					
    					<h3>讨论很好</h3>
    					<p>大家讨论的很深入</p>
    					
    				</article>
    				<article>
    					
    					<h3>赞</h3>	
    					<p>不错,赞</p>
    				</article>
    			</section>
    			
    			
    		</article>
    		
    		<footer>
    			以上帖子和回复只代表个人观点
    		</footer>

#### nav aside标签 ####

nav专门用于页面上的导航栏  如上方的主导航条,侧边导航栏,页面内部导航栏,页面底部导航栏
    			 aside专门用于定义当前页面和当前文章的附属信息,通常推荐将aside元素渲染成侧边栏
    			 
    			 将aside元素放在body的内部,表明为整个页面添加边栏
    			 将aside元素防在其他元素内部,表明为父元素添加边栏

#### detail summary标签 ####

details  
1.用于显示一段详细信息或者某个主题的细节  
2.该元素通常会和summary元素结合使用,当把summary放在details的内部时,  
summary用于为details定义摘要信息  
3.摘要信息默认是可见的,当用户点击信息是,浏览器会显示details信息的详细内容

<details>
    			<summary>芙蓉镇</summary>
    			芙蓉镇是一部非常不错的电影,每个人都可以去看看
    		</details>

#### from属性 ####

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    	<body>
    		<form action="http://www.baidu.com" method="get" id="addForm">
    			物品名: <input type="text" name="name" id="name" />
    			<input type="submit" value="添加"/>
    		</form>
    		
    		物品描述: <textarea name="desc" rows="30" cols="20" form="addForm"></textarea>
    	</body>
    </html>

#### fromXXX属性 ####

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    	<body>
    		<form method="get" >
    			用户名: <input type="text" name="name" id="name" /><br />
    			<input type="submit" value="注册" formaction="http://www.baidu.com" formmethod="get" formenctype="application/x-www-form-urlencoded" /><br />
    			<input type="submit" value="修改" formaction="http://www.taobao.com" formaction="post" formenctype="multipart/form-data"/><br />
    		</form>
    	</body>
    </html>

#### autofocus ####

该属性表示打开页面时该组件会自动获取焦点  
整个页面上最多只能有一个表单空间可以设置该属性

#### list属性 ####

1.list属性必须和datalist元素结合使用  
2.list属性是一个看不见的select标签  
3.datalist所包含的子元素和select的子元素完全相同

<form action="../server/server.html" method="get">
    				请输入水果的种类: <input type="text" name="fruit" id="fruit" list="fruits" /><br />
    				<input type="submit" name="" id="" value="购买" />
    			</form>
    			
    			<datalist id="fruits">
    				
    				<option value="apple">苹果</option>
    				<option value="banana">香蕉</option>
    				<option value="orange">橘子</option>
    			</datalist>

#### autocomplete属性 ####

用于设置表单是否支持自动完成功能
    			   如果启动了自动完成功能,浏览器会根据用户上次提交的数据生成列表框供用户选择,或提示自动完成
    			 该属性支持两个属性值
    			 on: 文本框下方会显示下拉菜单
    			 off: 文本框下方不会显示下拉菜单