HTML5 input

YFxiaogui

已于 2023-08-18 11:17:21 修改

阅读量54

点赞数

分类专栏： HTML5 文章标签： html5 前端 html

于 2023-08-18 10:41:42 首次发布

本文链接：https://blog.csdn.net/YFxiaogui/article/details/132355689

版权

HTML5 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、类型

属性	说明
color	color 类型用在input字段主要用于选取颜色
date	date 类型允许你从一个日期选择器选择一个日期
datetime	datetime 类型允许你选择一个日期（UTC 时间）
datetime-local	datetime-local 类型允许你选择一个日期和时间 (无时区)
email	email 类型用于应该包含 e-mail 地址的输入域
mouth	month 类型允许你选择一个月份
number	number 类型用于应该包含数值的输入域
range	range 类型用于应该包含一定范围内数字值的输入域 range 类型显示为滑动条
search	search 类型用于搜索域，比如站点搜索或 Google 搜索
tel	定义输入电话号码字段
time	time 类型允许你选择一个时间
url	url 类型用于应该包含 URL 地址的输入域在提交表单时，会自动验证 url 域的值
week	定义周和年 (无时区)

code

<!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</title>
</head>

<body>
    <form action="">
        颜色 <input type="color"><br>
        日期 <input type="date"><br>
        日期时间 <input type="datetime"><br>
        日期时间选择 <input type="datetime-local"><br>
        邮箱 <input type="email"><br>
        月份 <input type="month"><br>
        数字 <input type="number"><br>
        滑动条 <input type="range"><br>
        搜索域 <input type="search"><br>
        电话号码 <input type="tel"><br>
        选择时间 <input type="time"><br>
        路径 <input type="url"><br>
        周 <input type="week"><br>
        <input type="submit" value="提交">
    </form>
</body>

注意：必须放在form表单里才会生效

二、表单属性

属性	版本	描述
disabled	html	规定输入字段是禁用的
maxlength	html	规定输入字段的最大字符长度
readonly	html	规定输入字段的值无法修改
size	html	规定输入字段中的可见字符数
value	html	规定输入字段的默认值
max	html5	规定允许的最大值
min	html5	规定允许的最小值
pattern	html5	规定用于验证输入字段的模式
required	html5	规定输入字段的值是必需的
step	html5	规定输入字段的合法数字间隔

code

<!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>input属性</title>
    <style>
        /* 设置提示文字颜色 */
        input::placeholder {
            color: pink;
        }
    </style>
</head>

<body>
    <form action="">
        必填 <input type="text" required="required"><br>
        提示文本 <input type="text" placeholder="请输入文字"><br>
        自动聚焦 <input type="text" autofocus="autofocus"><br>
        记录之前输入字段 <input type="text" autocomplete="on"><br>
        不记录之前输入字段 <input type="text" autocomplete="off"><br>
        多选文件提交 <input type="file" multiple="multiple"><br>
        <input type="submit">
    </form>
</body>

</html>