代码收藏家技术教程 2024-10-25

Html提高——HTML5 新增的 input 类型

1、新增input的类型：

2、各类input属性代码展示与效果图

2.1、required属性

文本框一定要被填写，否则在点击提交的时候会提示需要被填写

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>HTML5新增表单属性</title>
</head>

<body>
    <form action="">
        <input type="search" name="sear" id="" required="required">
        <input type="submit" value="提交">
    </form>

</body>

</html>

效果图：

2.2、placeholder属性

会在文本框里面提示一些文本，当在文本框里输入任意内容后，提示文本会消失

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>HTML5新增表单属性</title>
    <style>
        input::placeholder {
            color: blue;
        }
    </style>
</head>

<body>
    <form action="">
        <input type="search" name="sear" id="" placeholder="迪幻">
        <input type="submit" value="提交">
    </form>

</body>

</html>

效果图：

2.3、autofocus属性

当打开页面的时候，会将光标自动聚焦在文本框

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>HTML5新增表单属性</title>
</head>

<body>
    <form action="">
        <input type="search" name="sear" id="" autofocus="autofocus">
        <input type="submit" value="提交">
    </form>

</body>

</html>

效果图：

2.4、autocomplete属性

当文本框里的内容提交成功后，下次填写可以直接选中以前填写提交过的内容

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>HTML5新增表单属性</title>
</head>

<body>
    <form action="">
        <input type="search" name="sear" id="" autocomplete="on">
        <input type="submit" value="提交">
    </form>

</body>

</html>

效果图：

2.5、mutipile属性

可以同时选中多个文件

代码:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>HTML5新增表单属性</title>
</head>

<body>
    <form action="">
        <input type="file" name="" id="" multiple="multiple">
        <input type="submit" value="提交">
    </form>

</body>

</html>

效果图：