网站首页 > 技术文章正文

Web开发学习笔记(10)——HTML5(五)新属性

hmc789 2024-11-17 11:22:43 技术文章 2 ℃

HTML5 中 input 标签新增了一个 form 属性，可将表单元素绑定到指定的 form 标签上，这样就可以灵活进行布局，同时一个表单元素可以从属于多个表单，这就让表单和表单元素的组合变得更加灵活。

例子，

<!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 id="myForm1" action="#" method="GET"></form>
    <form id="myForm2" action="#" method="POST"></form>
    提交到 myForm1：<input type="text" form="myForm1" name="myForm1" />
    <input type="submit" value="提交" form="myForm1" />
    提交到 myForm2：<input type="text" form="myForm2" name="myForm2" />
    <input type="submit" value="提交" form="myForm2" />
  </body>
</html>

显示为，

内容根据不同的表单所属的id进行提交。

打开一个页面，当某个文本框需要获得光标焦点时，可以使用 autofocus 属性来实现。

例子，

<!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>
      <input type="text" autofocus /> <input type="submit" value="搜索" />
    </form>
  </body>
</html>

显示为，

当点击text框，可以获得焦点。

autocomplete 属性是用来规定表单是否应该启用自动完成功能，即“自动补全”。

自动完成功能就是当用户输入一次数据过后，再次输入相同的数据时可以自动补全内容。

autocomplete 属性包括两个属性值：on、off。

其语法格式为：

<form autocomplete="on"></form>

on 为默认值，意思是启用自动完成功能。

<form autocomplete="off"></form>

off 为禁用自动完成功能。

例子，

<!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 autocomplete="on">
      您最喜欢的体育运动：
        <input type="text" list="selectList"/>
        <datalist id="selectList">
            <option>Football</option>
            <option>Basketball</option>
            <option>Baseball</option>
            <option>Running</option>
            <option>Boxing</option>
        </datalist>
      <input type="submit" />
    </form>
  </body>
</html>

显示为，

HTML5 中添加的新标签还有 datalist，该标签可实现提供数据列表的功能，而 list 属性则是为了将该标签和指定文本框进行关联所设计的。

语法格式为：

<input list="datalist-id" />

例子与上面autocomplete相同，已经用过了。

placeholder 属性描述输入字段预期值的提示信息，提示用户设置的输入值。

其语法格式为：

<input placeholder="text" />

灰色字体是提示信息，placeholder 属性适用于 input 中的 text、search、url、tel、email 和 password 类型。

HTML5 新增了 min，max 和 step 属性用于为数字或日期输入类型的 input 提供数值限制，可以使用该属性的标签有 number、range、Date pickers。

min 属性规定 input 元素的最小值。其语法格式为：

<input type="number" min="number" /> <input type="date" min="date" />

number 为数字值，date 为日期。

max 属性规定 input 元素的最大值。其语法格式为：

<input type="number" max="number" /> <input type="date" max="date" />

step 属性规定 input 元素数值之间的步长，也就是数字间隔。其语法格式为：

<input type="number" step="number" />

例子，

<!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>
      输入：<input type="number" min="-1000" max="1000" step="9" /><input
        type="submit"
        value="提交"
      />
    </form>
  </body>
</html>

显示为，

点击上下箭头，数字以9为step增加或减少。

multiple 属性规定用户一次可以输入多个值。

multiple 属性适用于文件上传功能，也可在 email 类型中使用。

其语法格式为：

<input multiple />

例子，

<!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>
      上传：<input type="file" multiple /><input type="submit" value="上传" />
    </form>
  </body>
</html>

multiple 属性，通常用在 file 和 email 类型中使用来绑定多个值。

使用 HTML5 实现表单验证的几个前提条件：

form 标签不能有 novalidate 属性。
input 标签一定要有 required 和 pattern 属性。
必须要有 form 标签和提交按钮。

HTML表单验证：

placeholder 属性用于为文本框提供提示说明功能，提示说明该文本框希望用户输入何种数据。

当用光标焦点聚焦到该文本框时，提示说明文字消失。不输入任何信息，提示说明文字不会被当做用户输入数据提交。

<form>
  <input placeholder="提示信息" />
</form>

required 属性是用来限定文本框内容不能为空的。当文本框内容为空时，无法提交表单。该属性适用于 text、password 等大多数文本框。

<form>
  <input required />
</form>

pattern 属性是对用户输入信息进行正则表达式校验。该属性适用于大多数的 input 类型。例如 text、pass、search 等。

<input type="text" pattern="正则表达式" />

pattern 属性常用的正则表达式：

Email 地址：^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$

域名：[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(/.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+/.?

InternetURL：[a-zA-z]+://[^\s]* 或 ^http://([\w-]+\.)+[\w-]+(/[\w-./?%&=]*)?$

手机号码：^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$

国内电话号码（0511-4405222、021-87888822）：\d{3}-\d{8}|\d{4}-\d{7}

身份证号（15 位、18 位数字）：^\d{15}|\d{18}$

帐号是否合法（字母开头，允许 5-16 字节，允许字母数字下划线）：^[a-zA-Z][a-zA-Z0-9_]{4,15}$

密码（以字母开头，长度在 6~18 之间，只能包含字母、数字和下划线）：^[a-zA-Z]\w{5,17}$

强密码（必须包含大小写字母和数字的组合，不能使用特殊字符，长度在 8-10 之间）：^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$

日期格式：^\d{4}-\d{1,2}-\d{1,2} 一年的 12 个月（01～09 和 1～12）：^(0?[1-9]|1[0-2])$

一个月的 31 天（01～09 和 1～31）：^((0?[1-9])|((1|2)[0-9])|30|31)$

例子，假设一个用户登录页面，用户名必填，要求格式为字母数字和下划线组合，长度在 6 到 20 之间。密码为数字，长度也是 6 到 20 之间：

<!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>
      用户名：<input
        type="text"
        id="userName"
        placeholder="请输入用户名"
        required
        pattern="\w{6,20}"
      />
      密码：<input
        type="password"
        id="password"
        placeholder="请输入密码"
        required
        pattern="\d{6,20}"
      />
      <button>登录</button>
    </form>
  </body>
</html>

显示为，

novalidate 属性是用来取消表单的自动验证功能的，例如前面已经讲过的 email 元素，当用户输入数据格式不符合 email 的格式要求时，系统会自动提示格式不正确，这个功能就是自动验证功能。

若用户不希望系统提示错误信息而是由自己写代码来实现验证提示功能的话，可以使用 novalidate 属性关闭该功能。

例如，取消 email 类型的内置表单验证。

<!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 novalidate>
      email：<input type="email" name="email" /><input
        type="submit"
        value="提交"
      /><br />
    </form>
  </body>
</html>

表单验证的四个相关属性，分别是

placeholder 属性：用于为文本框提供提示说明。
pattern 属性：用来对用户输入信息进行正则表达式校验的。
required 属性：用来限定文本框内容不能为空的。
novalidate 属性：用来取消表单的自动验证功能的。

HTML5 新增了一个神奇的属性，用它可以存储一些数据，进行定义和数据存取。

我们以 data- 开头来表示自定义数据属性。

例子，

<!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>Document</title>
    <style type="text/css">
        li[data-type="one"]{
            background:#8bc34a;
        }
        li[data-type="two"]{
            background:#5089c6;
        }
    </style>
</head>
<body>
    <ul>
        <li data-type="one"></li>
        <li data-type="two"></li>
    </ul>
</body>
</html>

除了使用自定义数据属性设置样式外，我们还可以使用它来创建元素的提示信息。

例子，

<!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>Document</title>
    <style type="text/css">
        span.tooptip{
            cursor:pointer;
        }
        .tooltip-info{
            position:absolute;
            top: -9999px;
        }
        span.tooltip::before{
            content:attr(data-tooltip);
            position:absolute;
            display:none;
            color:white;
            background:rgba(177, 166, 155, 0.55);
        }
        span:hover::before{
            display:inline-block;
        }
    </style>
</head>
<body>
    <p>
        欢迎来到王椰浪的学习笔记
        <span class="tooltip" data-tooltip="这是一个自定义属性">
            <span class="tooltip-info">
                这是一个自定义属性
            </span>
            王耶浪笔记本
        </span>
    </p>
</body>
</html>

上一篇：原生Javasript添加dom元素的常用几种方式
下一篇： Vue常见的面试知识点汇总(上)「附答案」

网站首页 > 技术文章 正文

Web开发学习笔记(10)——HTML5(五)新属性

猜你喜欢

网站首页 > 技术文章正文