HTML5笔记 04：其他标签与表单

其他标签

1. 状态标签

meter

<!-- 
  用来显示已知范围的标量值或者分数值，外观类似进度条
    value：当前的数值
    min：值域的最小边界值，默认为 0
    max：值域的上限边界值，默认为 1
    low：定义了低值区间的上限值
    high：定义了高值区间的下限值
      在二者之间进度条为绿色，剩下部分为黄色（火狐浏览器下）
    optimum：最佳取值
-->
<meter id="meter" value="30" min="20" max="100" low="40" high="80" optimum="90"></meter>
<input id="msg" type="text" value="" />
<button id="add">加</button>
<button id="del">减</button>
<script>
  var meter = document.getElementById("meter");
  var msg = document.getElementById("msg");
  msg.value = meter.value;
  document.getElementById("add").onclick = function () {
    meter.value += 5;
    msg.value = meter.value;
  };
  document.getElementById("del").onclick = function () {
    meter.value -= 5;
    msg.value = meter.value;
  };
</script>

progress

<!-- 
  用来显示一项任务的完成进度（默认是0 —— 1）
    max：表示这个progress元素所表示的任务一共需要完成多少工作
    value：用来指定进度条已经完成的工作量
-->
<progress id="progress" max="10" value="8"></progress>
<input id="msg" type="text" value="" />
<button id="add">加</button>
<button id="del">减</button>
<script>
  var progress = document.getElementById("progress");
  var msg = document.getElementById("msg");
  msg.value = progress.value;
  document.getElementById("add").onclick = function () {
    progress.value += 5;
    msg.value = progress.value;
  };
  document.getElementById("del").onclick = function () {
    progress.value -= 5;
    msg.value = progress.value;
  };
</script>

2. 列表标签

datalist

<style>
  /* 指定 placeholder 的颜色 */
  input::-webkit-input-placeholder {
    color: red;
  }
</style>
<!-- 
  包含一组option元素，这些元素表示其表单控件的可选值
    id必须要和input中的list一致
-->
<input type="text" placeholder="你最喜欢的人物是？" list="s">
<datalist id="s">
  <option value="1">费渡</option>
  <option value="2">简隋英</option>
  <option value="3">顾昀</option>
</datalist>

details

<!-- 
  一个UI小组件，用户可以从其中检索附加信息
    open属性用来控制附加信息的显示与隐藏
-->
<details open>
  <summary>大河之剑天上来</summary>
  <p>将进酒 杯莫停</p>
  <p>将进酒 杯莫停</p>
  <p>将进酒 杯莫停</p>
</details>

3. 注释标签

ruby

<span>
  <ruby>
    李白
    <rt>版本弃子</rt>
  </ruby>
</span>

4. 标记标签

mark

<!-- 类似于荧光笔的效果 -->
<span>大河之剑<mark>李白</mark>天上来！</span>

表单

1. 表单格式

<form>
    <!-- 会进行校验，是否符合邮件格式，移动端获取到焦点时会切换到英文键盘 -->
    电子邮件：<input type="email" name="email"><br><br>
    <!-- 移动端获取到焦点时会切换到数字键盘 -->
    电话：<input type="tel" name="tel"><br><br>
    <!-- 会进行校验，是否符合URL格式， -->
    网址：<input type="url" name="url"><br><br>
    <!-- 带有清空按钮 -->
    搜索：<input type="search" name="search"><br><br>
    <!-- 特定范围内的数值选择器，属性有最小值，最大值，步长 -->
    数值选择器：<input type="range" name="range" min="0" max="100" step="10"><br><br>
    <!-- 只能包含数字的输入框，尾端带有上下按钮调节数字的大小 -->
    数字：<input type="number" name="number"><br><br>
    <!-- 颜色选择器 -->
    颜色：<input type="color" name="color"><br><br>
    <!-- 显示完整日期（移动端浏览器支持） -->
    完整日期（移动端）：<input type="datetime" name="datetime"><br><br>
    <!-- 显示完整日期（不包含时区） -->
    完整日期：<input type="datetime-local" name="datetimeLocal"><br><br>
    <!-- 显示时间（不包含时区） -->
    时间：<input type="time" name="color"><br><br>
    <!-- 显示日期 -->
    日期：<input type="date" name="color"><br><br>
    <!-- 显示周 -->
    周：<input type="week" name="color"><br><br>
    <!-- 显示月 -->
    月：<input type="month" name="color"><br><br>
    <input type="submit" value="提交">
</form>

2. 表单属性

<form action="https://www.baidu.com/">
    <!-- 
        placeholder：输入框提示信息
            ::-webkit-input-placeholder用来选中placeholder
    -->
    输入框：<input type="text" name="username" placeholder="请输入内容："><br><br>
    <!-- 自动获取输入焦点 -->
    自动获取焦点的输入框：<input type="text" name="autofocus" autofocus><br><br>
    <!-- 必选填写 -->
    必填的输入框：<input type="text" name="required" required><br><br>
    <!-- 正则校验 -->
    正则校验的输入框：<input type="text" name="pattern" pattern="\d"><br><br>
    <!-- list和datalist -->
    <input type="submit" value="提交">
    <!-- 在submit里指定提交地址 -->
    <input type="submit" value="提交" formaction="https://www.jd.com/">
</form>

3. 表单验证

<form>
    <!-- valueMissing: true -->
    用户名：<input type="text" name="username" required> <br><br>
    <!-- typeMismatch: true -->
    邮箱：<input type="email" name="email"> <br><br>
    <!-- patternMismatch: true -->
    年龄：<input type="text" name="age" pattern="\d{0,3}"> <br><br>
    <!-- tooLong：浏览器会不接受18位以后的输入，无法触发验证失败 -->
    身份证号：<input type="text" name="id" maxlength="18"> <br><br>
    <!-- customError: true -->
    自定义：<input type="text" name="custom"> <br><br>
    <input type="submit" value="提交">
</form>
<script>
var inputs = document.getElementsByTagName("input");
// 验证失败会触发该事件
for (let i = 0; i < inputs.length; i++) {
  inputs[i].addEventListener('invalid', showMsg);
}
inputs[inputs.length - 1].onclick = function () {
  var value = inputs[inputs.length - 2].value;
  // 自定义校验
  if (value === 'dudu') {
    inputs[inputs.length - 2].setCustomValidity(value + '不是正确的值');
  } else {
    // 通过验证
    inputs[inputs.length - 2].setCustomValidity();
  }
}
function showMsg() {
  /* 
    validity对象用来查看验证是否通过，如果八种验证都通过返回true，一种验证失败返回false
      valueMissing：输入值为空时返回true
      typeMismatch：控件值与预期类型不匹配返回true
      patternMismatch：输入值不满足pattern正则表达式返回true
      tooLong：超过maxLength最大限制返回true
      rangeUnderflow：验证的range最小值返回true
      rangeOverflow：验证的range最大值返回true
      stepMismatch：验证range的当前值是否符合min，max以及step的规则返回true
      customError：不符合自定义验证返回true
        setCustomValidity
  */
  console.log(this.validity);
}
</script>