type属性值有哪些

Z, ZLW • 2023年1月15日下午8:10 • 科技 • 阅读 1750

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>

延伸阅读