李涛自留地
回到顶部
首页 > 前端 > Html表单input type属性值有哪些？input各种type属性值的作用

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 控件）
email 定义用于 e-mail 地址的文本字段
number 定义带有 spinner 控件的数字字段
range 定义带有 slider 控件的数字字段。
search 定义用于搜索的文本字段。
tel 定义用于电话号码的文本字段。
url 定义用于 URL 的文本字段。

在以上新增的input的type属性值里，很多还是比较使用的。比如：拾色器，可以直接使用在本地做个颜色拾色器小工具。

在HTML5新增的input的type属性值中关于时间控件的属性值，当我们选择的时候，都显示的是实时的时间，比如：当我设置的type属性值为datetime-local的时候，显示的就是实时的年月日时分秒的时间，其他的时间控件也类似。

在以下的第二大部分中，将使用一些HTML5中input中的type新属性值写一个小实例。

二、HTML5中input中的type新属性值使用Demo

<!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>
Html表单input type属性值有哪些？input各种type属性值的作用

从上面记载的input的type属性值来看，input在我们的前端页面或者是网站模板制作中具有很重要的作用。本文通过队input的type属性值的记载和一个HTML5中input中的type新属性值使用Demo，详细的记载了Form表单中input的type属性值的相关问题，在后面的文章中将记载更多关于input使用的文章。

若非作者标注皆为李涛自留地原创文章，转载或复制请以超链接形式并注明出处。