type属性值有：1、text；2、password；3、button/submit/reset；4、radio；5、checkbox；6、time；7、week；8、month；9、date；10、datetime_local；11、search；12、color等。text是指，input将会接受文本输入。
一、type属性值
- text：input将会接受文本输入
- password：可用于一些私密性和隐私性的内容（例如：密码）
- button/submit/reset：实现一个按钮形式，但用于的内容不同，实质上都是实现一个按钮形式，此时可以为input元素设置value值为按钮贴上文字
- radio：实现单选框（注意：同一组单选框name属性需要相同，否则无法实现单选）
- checkbox：实现复选框
- time：时间框
- week：星期框
- month：年月框
- date：日期框
- datetime_local：本地日期和时间
- search：实现搜索框，从搜索框三子=字可以看出这个值用于搜索方面的
- color：实现颜色选择框（例如：ps中的拾色器一样）
- image：实现图像按钮，将一幅图像作为按钮，点击图像任何位置都会做出响应
- file：有时我们需要将文件上传至服务器，使用file值将会实现此功能，但是如果只给type属性设置为file，并不能实现完整的上传操作，除需要给form元素中method属性设置为post外，还需要将input元素中的enctype属性设置为multipart/form-data。这样就可以完整的上传文件了。
- number：设置为此属性输入框只能输入数字
- range：实现数值滚动条
- hidden：将i元素给隐藏
- email/tel/url：对邮箱、电话号码、网址等数据进行把关，但是把关方面需要 正则表达式来定义（正则表达式通过pattern属性来定义）
二、使用实例
<!DOCTYPE html>
<html lang="en">
<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 class="header">
网站头部区域
</header>
<main class="contaier">
<div class="content">
<form class="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>延伸阅读
type日期相关属性详解
- date规定显示的类型为“日期”选择控件
- month规定显示的类型为“月份”选择控件
- week规定显示的类型为“周”选择控件
- time规定显示的类型为“时间”选择控件
- datetime规定显示的类型为“日期时间”选择控件
- datetime-local规定显示的类型为“本地日期时间”选择控件
文章标题：type属性值有哪些，发布者：Z, ZLW，转载请注明出处：https://worktile.com/kb/p/35585
微信扫一扫 
支付宝扫一扫 
