Html表单input type属性值有哪些？input各种type属性值的作用
在Html的Form表单中，input是很重要的标签，而在input的属性当中，input的type属性同样是input多个属性当中，重要的属性之一。input的type属性规定了input元素的类型，那么input的type属性值有哪些？input各种type属性值又有什么作用呢？
一、input的type属性值有哪些
1、HTML4中input的type属性值表格
| 属性值 | 属性值作用 |
|---|---|
| button | 定义可点击的按钮（大多与 JavaScript 使用来启动脚本） |
| checkbox | 定义复选框。 |
| file | 定义输入字段和 "浏览..." 按钮，供文件上传 |
| hidden | 定义隐藏输入字段 |
| image | 定义图像作为提交按钮 |
| password | 定义密码字段。字段中的字符会被遮蔽。 |
| radio | 定义单选按钮。 |
| reset | 定义重置按钮。重置按钮会将所有表单字段重置为初始值。 |
| submit | 定义提交按钮。提交按钮向服务器发送数据。 |
| text | 默认。定义单行输入字段，用户可在其中输入文本。默认是 20 个字符。 |
以上就是在HTML4中input的type属性值及属性值的作用，而在HTML5中新增了很多实用的type属性值。
2、HTML5新增的input的type属性值
| 属性值 | 属性值作用 |
|---|---|
| color | 定义拾色器。 |
| date | 定义日期字段（带有 calendar 控件） |
| datetime | 定义日期字段（带有 calendar 和 time 控件） |
| datetime-local | 定义日期字段（带有 calendar 和 time 控件） |
| month | 定义日期字段的月（带有 calendar 控件） |
| week | 定义日期字段的周（带有 calendar 控件） |
| time | 定义日期字段的时、分、秒（带有 time 控件） |
| 定义用于 e-mail 地址的文本字段 | |
| number | 定义带有 spinner 控件的数字字段 |
| range | 定义带有 slider 控件的数字字段。 |
| search | 定义用于搜索的文本字段。 |
| tel | 定义用于电话号码的文本字段。 |
| url | 定义用于 URL 的文本字段。 |
在以上新增的input的type属性值里，很多还是比较使用的。比如：拾色器，可以直接使用<input type="color">在本地做个颜色拾色器小工具。
在HTML5新增的input的type属性值中关于时间控件的属性值，当我们选择的时候，都显示的是实时的时间，比如：当我设置的type属性值为datetime-local的时候，显示的就是实时的年月日时分秒的时间，其他的时间控件也类似。
在以下的第二大部分中，将使用一些HTML5中input中的type新属性值写一个小实例。
二、HTML5中input中的type新属性值使用Demo
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5中input中的type新属性值使用Demo</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
background-color: #f8f8f8;
color: #666;
}
.header {
height: 80px;
margin-bottom: 20px;
background-color: #9c3;
color: #fff;
text-align: center;
}
.container {
width: 1024px;
margin: 0 auto;
}
.content {
width: 600px;
height: 400px;
margin: 0 auto;
border: 1px solid #333;
}
.content .form {
display: flex;
flex-flow: column;
height: 100%;
padding: 30px;
align-content: space-between;
justify-content: space-around;
text-align: center;
}
.content .form input,
{
height: 32px;
max-width: 100%;
}
</style>
</head>
<body>
<header>
网站头部区域
</header>
<main>
<div>
<form action="" method="post">
<p><strong>HTML5中input中的type新属性值使用Demo</strong></p>
<p>拾色器：<input type="color" name=" color"></p>
<p>时间年月日控件：<input type="date" name="date"></p>
<p>时间时分秒控件：<input type="time" name="time"></p>
<p>时间年月日时分秒控件：<input type="datetime-local" name="datetime-local"></p>
<p>带有slider控件的数字字段控件：<input type="range" name="range"></p>
</form>
</div>
</main>
</body>
</html>
从上面记载的input的type属性值来看，input在我们的前端页面或者是网站模板制作中具有很重要的作用。本文通过队input的type属性值的记载和一个HTML5中input中的type新属性值使用Demo，详细的记载了Form表单中input的type属性值的相关问题，在后面的文章中将记载更多关于input使用的文章。
上一篇
信息由用户投稿以及用户自行发布，真实性、合法性由发布人负责，涉及到汇款等个人财产或隐私内容时请仔细甄别，注意防骗！如有侵权，请联系：wwwlaoyuwang#126.com(#=@)！我们会第一时间核实处理！