1、新增input的类型:

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

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>

效果图:

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

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>

效果图:

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

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

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>

效果图:Html提高——HTML5 新增的 input 类型-LMLPHP

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>

效果图:

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

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>

效果图:

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

 

10-28 11:27