HTML5+CSS3笔记---第一天

最新推荐文章于 2025-04-22 16:40:19 发布

Dreamer_Ji

最新推荐文章于 2025-04-22 16:40:19 发布

阅读量158

点赞数

本文链接：https://blog.csdn.net/Dreamer_Ji/article/details/107358446

版权

本文详细介绍了H5表单的各种元素与属性，包括手机号验证、文件上传、下拉列表、进度条等，以及如何利用事件监听进行实时验证。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

解决IE8及以下浏览器不支持H5的问题的方式：

第一种导入此文件：
在这里插入图片描述
第二种：
document.createElement(header);

H5手机号的简单匹配：

1.required必须输入，否则会阻止提交
2.pattern正则表达式
2.1 *:代表任意个
2.2 ？：带表0个或1个
2.3 +：代表1个或多个

    \：使用转义符对+进行转义为普通的加号
    \d{10}：说明后面还有10个数字
    ^$：首尾

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="">
    手机号：<input type="tel" required pattern="^(\+86)?\d{10}$">
   <input type="submit" value="提交">
</form>
    
</body>
</html>

在这里插入图片描述

选择文件：

<!-- multiple是可以同时选中多个文件 -->
   文件 <input type="file" multiple>

在这里插入图片描述
表单的提交:
form:指定表单id，当指定表单id号的表单在进行数据提交的时候，也会将不在form中的表单的数据进行提交。

<form action="" id="myForm">
    手机号：<input type="tel" required pattern="^(\+86)?\d{10}$">
   <input type="submit" value="提交">
   <!-- multiple是可以同时选中多个文件 -->
   文件 <input type="file" multiple>
</form>
    地址:
    <input type="text" name="address" form="myForm">

在浏览器的开发者工具的network中，当点击提交时点击地址便能进行查看所传递的值。注意：要在标签里书写name，才能看到传值。
在这里插入图片描述

autofocus自动获取焦点
autocomplete 自动完成；on：打开 off：关闭
1.必须提交过：提交过才会记录
2.当前添加autocomplete元素必须有name属性


    用户名：<input type="text" name="userName" autofocus autocomplete="on">
   <input type="submit" value="提交">

在这里插入图片描述

创建下拉列表的两种方式 :

只能选择不能输入。

专业：
    <select name="" id="">
        <option value="1">前端移动应用与开发</option>
        <option value="2">JAVA</option>
        <option value="3">JavaScript</option>
        <option value="4">C</option>
    </select>

在这里插入图片描述
可以输入也可以选择—datalist

 专业：
    <!-- 首先有个文本框可以输入 -->
    <input type="text" list="datalist"><br>
    <!-- value是具体的值，label是提示值、辅助值 -->
    <!-- 注意：要建立文本框和选项值之间的关联  list="datalist的id值" -->
    <datalist id="datalist">
        <option value="前端移动应用与开发" label="前景好"></option>
        <option value="JAVA" label="前景好"></option>
        <option value="JavaScript" label="前景好"></option>
        <option value="C" label="前景好"></option>
    </datalist>

在这里插入图片描述

 网址：
    <!-- 如果input输入框中的type类型是url时，value值中一定要输入http:// -->
    <input type="url" list="datalist"><br>
    <datalist id="datalist">
        <option value="http://www.baidu.com" label="百度"></option>
        <option value="http://www.sohu.com" label="搜狐"></option>
    </datalist>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="">
        用户名： <input type="text" name="userName" id="userName"><br>
        电话：<input type="tel" name="telPhone" id="telPhone" pattern="^(\+86)?\d{10}$">
        <input type="submit" value="提交">
    </form>
    <!-- 事件
    1.script
    2.操作谁就获取谁
    3.添加相应的事件
    4.this表示当前的元素，就如下相当于用户名这个元素 -->
    <script>
        //oninput相当于监听某元素中内容的变化，增加或减少
        // document.getElementById("userName").οninput=function(){
        //     console.log("outinput:"+this.value);
        // };
        // //onkeyup：键盘弹起的时候触发：每一个键的弹起都会触发一次
        // document.getElementById("userName").οnkeyup=function(){
        //     console.log("outkeyup:"+this.value);
        // }
        //oninvalid:当验证不通过时触发
        document.getElementById("telPhone").oninvalid=function(){
            // console.log("请输入正确的11位手机号");=>请输入正确的11位手机号
            // 设置默认的提示信息
            this.setCustomValidity("请输入正确的11位手机号");
        }
    </script>
</body>
</html>

outinput事件运行结果：

在这里插入图片描述

onkeyup事件运行结果：

在这里插入图片描述

oninvalid事件运行结果：

在这里插入图片描述

进度条：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- value当前进度值 max最大值 -->
    <progress></progress><br>
    <progress  max="100" value="100"></progress><br>
    <progress  max="100" value="50"></progress><br>
    <!-- 度量器：衡量当前的进度值
        high：规定的较高的值
        low：规定的较低的值
        max：最大的值
        min：最小值
        value：当前度量值 -->
    <meter></meter><br>
    <meter max="100" min="0" high="80" low="40" value="30"></meter><br>
    <meter max="100" min="0" high="80" low="40" value="60"></meter><br>
    <meter max="100" min="0" high="80" low="40" value="90"></meter><br>
</body>
</html>