HTML新增的常用元素

最新推荐文章于 2024-01-31 21:10:14 发布

Daisy-lv

最新推荐文章于 2024-01-31 21:10:14 发布

阅读量759

点赞数

分类专栏： HTML5

本文链接：https://blog.csdn.net/qq_36747861/article/details/84337604

版权

HTML5 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1.新增的常用语义性元素

make：突出显示文本
progress：显示进程
time：表示时间日期值
details：定义用户可见或者需要隐藏的补充细节说明
datalist：定义选项列表

2.新增的input输入类型

email：输入email地址的字段
url：输入URL的字段
number：输入数字的字段
range：用于精确值不重要的输入数字的控件
DatePickers：data（年月日时分秒），month（月和年），week（星期和年），time（输入时间的控件），datetime（定义date和time控件，基于UTC时区），datetime-local（同上，带时区）
search：定义用于输入搜索字符串的文本字段
tel：输入电话号码
color：定义拾色器

码段代码感受一下效果和区别

<body>
     <form action="123" method="get">
     	<input type="email" name="user_email"/><br/>
     	<input type="url" name="user_url"/><br/>
     	<input type="number" name="user_number" 
     	value="1" max="100" min="1" step="2" /><br/>
     	<input type="range" name="user_range" 
     	value="1" max="100" min="1" step="2"/><br/>
     	<input type="date" name="user_date"/><br/>
     	<input type="month" name="user_month"/><br/>
     	<input type="week" name="user_week"/><br/>
     	<input type="time" name="user_time" value="11:13:00"
     	max="22:00:00" min="06:00:00" step="2" /><br/>
     	<input type="datetime" name="user_datetime"/><br/>
     	<input type="datetime-local" name="user_datetime-local"/><br/>
     	<input type="search" name="user_search"/><br/>
     	<input type="tel" name="user_tel"/><br/>
     	<input type="color" value="user_color"/><br/>
     	<input type="submit" value="提交">
     </form>
</body>

3.新增的input属性

autocomplete：规定<input>元素输入字段是否应该启用记忆功能（值为on或off）

<body>
    <form action="login" method="get">
    	用户名:<input type="text" name="username" autocomplete="
    	on"/><br/>
    	密码:<input type="text" name="password" autocomplete="on">
    	<input type="submit" value="登录">
    </form>
</body>

autofocus：定义当页面加载时<input>元素是否会自动获取焦点

<form>
	<body>
      <p>XXXXXXXXXX</p>
      <p><textarea name="textarea" id="textarea" rows="5" cols="15">是否同意以上说法？</textarea><br/></p>
      <p>
      	<input type="submit" value="同意" autofocus="on">
      	<input type="submit" value="拒绝" >
      </p>
</body>
</form>

form：规定<input>元素所属的一个或多个表单
新增的表单重写属性：

1）formaction：规定当表单提交时处理输入控件的文件的URL

2）formenctype：规定当表单数据提交到服务器时如何编码

3）formmethod：定义发送表单数据时action URL的HTTP方法

4）formnovalidate：formnovalidate属性覆盖<form>元素的novalidate属性

5）formtarget：规定表示提交表单后在哪里显示接收到响应的名称或关键词

<body>
    <form action="#" method="get" enctype="application/x-www-form-urlencoded" id="testform">
    	请输入邮箱地址:<input type="email" name="email"/><br/>
    	<input type="submit" value="formation" formaction="demo1.html"/>
    	<input type="submit" value="formenctype" formenctype="multipart/form-data"/>
    	<input type="submit" value="formmethod" formmethod="post"/>
    	<input type="submit" value="formnovalidate" formnovalidate="formnovalidate"/>
    	<input type="submit" value="formtarget" formtarget="_self"/>
    	
    </form>

新增的height和width属性：规定<input>的高度和宽度，（只针对type="image"）
list：属性引用<datalist>元素

<body>
     <form action="#" method="get">
     	请输入网址:<input type="url" list="url_list" name="weblink"/>
     	<datalist id="url_list">
     		<option label="网易" value="http://www.163.com"/></option>
     		<option label="新浪" value="http://www.sina.com"/></option>
     		<option label="搜狐" value="http://www.sohu.com"/></option>
     		<option label="百度" value="http://www.baidu.com"/></option>
     	</datalist>
     	<input type="submit" value="提交">
     </form>

multiple：规定允许输入到<input>元素的多个值（可以一次性选择多个文件或图片上传）

<body>
     <form action="#" method="get">
     	选择要上传的文件：select:<input type="file" name="img" multiple />
     	<input type="submit" value="提交"/>
     </form>
</body>

pattern：验证<input>元素值的正则表达式

<body>
     <form action="#" method="get">
     	请输入考试代码：<input type="text" name="text_code" pattern="[A-Za-z]{3}" title="三个字符">
     	<input type="submit" value="提交">
     </form>
</body>

placeholder：描述<input>字段预期值的简短提示信息
required：规定必须在提交表单之前填写输入字段

<body>
     <form action="#" method="get">
     	请输入姓名：<input type="text" name="user_name" required="required"/>
     	<input type="submit" value="提交">
     </form>
</body>

3.新增的keygen元素

keygen元素是秘钥对生成器，能够使用户验证更为可靠，用户提交表单时会生成两个键，一个私钥一个公钥，私钥保存客户端，公钥会发送到服务端。

4.新增的output元素

output元素用于浏览器中显示计算结果或脚本输出。

<head>
	<script type="text/javascript">
		function multi(){
			a=parseInt(prompt("请输入第1个数字:",0));
			b=parseInt(prompt("请输入第2个数字:",0));
			document.forms["form"]["result"].value=a*b;
		}
	</script>
</head>
<body onload="multi()">
	<form action="#" method="get" name="form">
	  两数的乘积为：<output name="result"></output> 	
	</form>
</body>

5.新增的novalidate属性

此属性用于提交表单时取消整个表单的验证，即关闭对表单内所有元素的有效检查。如果只取消表单中较少部分内容的验证而不妨碍提交大部分内容，则可以将此属性单独用于表单中的这些元素。

<body>
    <form action="#" method="get" novalidate="true">
    	请输入邮箱地址：<input type="email" name="username"/><br/>
    	请输入邮政编码:<input type="text" name="code" pattern="[0-9]{6}" 
    	title="请输入6位数的邮箱编码"/>
    	<input type="submit" value="提交">
    </form>
</body>

Daisy-lv

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
HTML新增的常用元素

1.新增的常用语义性元素 make：突出显示文本 progress：显示进程 time：表示时间日期值 details：定义用户可见或者需要隐藏的补充细节说明 datalist：定义选项列表 2.新增的input输入类型 email：输入email地址的字段 url：输入URL的字段 number：输入数字的字段 range：用于精确值不重要的输入数字...
复制链接

扫一扫